Diff
Modified: trunk/PerformanceTests/ChangeLog (167314 => 167315)
--- trunk/PerformanceTests/ChangeLog 2014-04-15 17:51:18 UTC (rev 167314)
+++ trunk/PerformanceTests/ChangeLog 2014-04-15 17:52:10 UTC (rev 167315)
@@ -1,3 +1,21 @@
+2014-04-15 Zoltan Horvath <zol...@webkit.org>
+
+ [CSS Shapes] Linking stylesheet instead of inline style definition has ruined ShapesRegions test
+ https://bugs.webkit.org/show_bug.cgi?id=131572
+
+ Reviewed by Rob Buis.
+
+ In r167022 I moved the common CSS selectors into RegionsShapes.css, then I linked it into the perf test
+ files, but the measurement results dropped down from about 400ms to 10ms. I realized it's caused by the
+ linked css rule, so I've put the selectors back into every test case, which fixes the test measurements.
+
+ * Layout/Shapes/resources/RegionsShapes.css: Removed.
+ * Layout/Shapes/resources/RegionsShapesContent.html:
+ * Layout/Shapes/resources/RegionsShapesContentNoRegionsWidth400.html:
+ * Layout/Shapes/resources/RegionsShapesContentNoRegionsWidth600.html:
+ * Layout/Shapes/resources/RegionsShapesContentNoRegionsWidth800.html:
+ * Layout/Shapes/resources/RegionsShapesContentNoShapes.html:
+
2014-04-14 Geoffrey Garen <gga...@apple.com>
MallocBench should scavenge explicitly instead of waiting
Deleted: trunk/PerformanceTests/Layout/Shapes/resources/RegionsShapes.css (167314 => 167315)
--- trunk/PerformanceTests/Layout/Shapes/resources/RegionsShapes.css 2014-04-15 17:51:18 UTC (rev 167314)
+++ trunk/PerformanceTests/Layout/Shapes/resources/RegionsShapes.css 2014-04-15 17:52:10 UTC (rev 167315)
@@ -1,82 +0,0 @@
-html, body {
- padding: 0;
- margin: 0;
- text-align: justify;
- font-family: Palatino, Georgia, serif;
- font-size: 10px;
- -webkit-hyphens: auto;
- text-align: justify;
- line-height: 1.2em;
-}
-
-.shape {
- width: 100px;
- height: 100px;
-}
-
-#circleShape {
- float: left;
- -webkit-shape-outside: circle(closest-side at center);
- -webkit-shape-margin: 2px;
- -webkit-clip-path: circle(closest-side at center);
- background-color: green;
-}
-
-#imageShape {
- float: left;
- background: url("shape.gif") no-repeat;
- -webkit-shape-outside: url("shape.gif");
- -webkit-shape-margin: 2px;
- width: 200px;
- height: 200px;
-}
-
-#insetShape {
- float: right;
- -webkit-shape-outside: inset(5px);
- -webkit-clip-path: inset(5px);
- -webkit-shape-margin: 4px;
- background-color: red;
- border: 1px solid black;
-}
-
-#roundedInsetShape {
- float: right;
- -webkit-shape-outside: inset(5px round 64px 32px 16px 36px);
- -webkit-clip-path: inset(5px round 64px 32px 16px 36px);
- -webkit-shape-margin: 4px;
- background-color: lightblue;
- opacity: 0.4;
- border: 1px solid black;
-}
-
-#triangleLeft {
- float: left;
- -webkit-shape-outside: polygon(0 0, 100% 50%, 0 100%);
- -webkit-clip-path: polygon(0 0, 100% 50%, 0 100%);
- -webkit-shape-margin: 4px;
- background-color: yellow;
- opacity: 0.4;
-}
-
-#triangleRight {
- float: right;
- -webkit-shape-outside: polygon(100% 0, 0 50%, 100% 100%);
- -webkit-clip-path: polygon(100% 0, 0 50%, 100% 100%);
- -webkit-shape-margin: 4px;
- background-color: orange;
-}
-
-#selfIntersectingStar {
- float: left;
- -webkit-shape-outside: polygon(50% 0, 100% 100%, 0 34%, 100% 34%, 0 100%);
- -webkit-clip-path: polygon(50% 0, 100% 100%, 0 34%, 100% 34%, 0 100%);
- -webkit-shape-margin: 4px;
- background-color: blue;
- width: 100px;
- height: 200px;
-}
-
-#region1 { width: 40%; }
-#region2 { width: 22%; }
-#region3 { width: 22%; }
Modified: trunk/PerformanceTests/Layout/Shapes/resources/RegionsShapesContent.html (167314 => 167315)
--- trunk/PerformanceTests/Layout/Shapes/resources/RegionsShapesContent.html 2014-04-15 17:51:18 UTC (rev 167314)
+++ trunk/PerformanceTests/Layout/Shapes/resources/RegionsShapesContent.html 2014-04-15 17:52:10 UTC (rev 167315)
@@ -1,10 +1,22 @@
<!DOCTYPE html>
<html>
<head>
-<link rel="stylesheet" type="text/css" href=""
<style>
-article { -webkit-flow-into: article; }
+body {
+ padding: 0;
+ margin: 0;
+ text-align: justify;
+ font-family: Palatino, Georgia, serif;
+ font-size: 10px;
+ -webkit-hyphens: auto;
+ text-align: justify;
+ line-height: 1.2em;
+}
+article {
+ -webkit-flow-into: article;
+}
+
.regionColumns {
-webkit-flow-from: article;
float: left;
@@ -24,9 +36,80 @@
margin-left: 3%;
}
+#region1 { width: 40%; }
+#region2 { width: 22%; }
+#region3 { width: 22%; }
#region4 { height: 200px; }
#region5 { height: 300px; }
+.shape {
+ width: 100px;
+ height: 100px;
+}
+
+#circleShape {
+ float: left;
+ -webkit-shape-outside: circle(closest-side at center);
+ -webkit-shape-margin: 2px;
+ -webkit-clip-path: circle(closest-side at center);
+ background-color: green;
+}
+
+#imageShape {
+ float: left;
+ background-image: url("./Shapes/resources/shape.gif");
+ -webkit-shape-outside: url("./Shapes/resources/shape.gif");
+ -webkit-shape-margin: 2px;
+ width: 200px;
+ height: 200px;
+}
+
+#insetShape {
+ float: right;
+ -webkit-shape-outside: inset(5px);
+ -webkit-clip-path: inset(5px);
+ -webkit-shape-margin: 4px;
+ background-color: red;
+ border: 1px solid black;
+}
+
+#roundedInsetShape {
+ float: right;
+ -webkit-shape-outside: inset(5px round 64px 32px 16px 36px);
+ -webkit-clip-path: inset(5px round 64px 32px 16px 36px);
+ -webkit-shape-margin: 4px;
+ background-color: lightblue;
+ opacity: 0.4;
+ border: 1px solid black;
+}
+
+#triangleLeft {
+ float: left;
+ -webkit-shape-outside: polygon(0 0, 100% 50%, 0 100%);
+ -webkit-clip-path: polygon(0 0, 100% 50%, 0 100%);
+ -webkit-shape-margin: 4px;
+ background-color: yellow;
+ opacity: 0.4;
+}
+
+#triangleRight {
+ float: right;
+ -webkit-shape-outside: polygon(100% 0, 0 50%, 100% 100%);
+ -webkit-clip-path: polygon(100% 0, 0 50%, 100% 100%);
+ -webkit-shape-margin: 4px;
+ background-color: orange;
+}
+
+#selfIntersectingStar {
+ float: left;
+ -webkit-shape-outside: polygon(50% 0, 100% 100%, 0 34%, 100% 34%, 0 100%);
+ -webkit-clip-path: polygon(50% 0, 100% 100%, 0 34%, 100% 34%, 0 100%);
+ -webkit-shape-margin: 4px;
+ background-color: blue;
+ width: 100px;
+ height: 200px;
+}
+
@media screen and (max-width: 650px) {
#region1, #region2 { width: 46%; }
#region3 { display: none; }
Modified: trunk/PerformanceTests/Layout/Shapes/resources/RegionsShapesContentNoRegionsWidth400.html (167314 => 167315)
--- trunk/PerformanceTests/Layout/Shapes/resources/RegionsShapesContentNoRegionsWidth400.html 2014-04-15 17:51:18 UTC (rev 167314)
+++ trunk/PerformanceTests/Layout/Shapes/resources/RegionsShapesContentNoRegionsWidth400.html 2014-04-15 17:52:10 UTC (rev 167315)
@@ -1,14 +1,17 @@
<!DOCTYPE html>
<html>
<head>
-<link rel="stylesheet" type="text/css" href=""
<style>
-body { width: 400px; }
-
-#imageShape {
- // Relative to RegionsShapesNoRegions.html
- background: url("./resources/shape.gif") no-repeat;
- -webkit-shape-outside: url("./resources/shape.gif");
+body {
+ padding: 0;
+ margin: 0;
+ text-align: justify;
+ font-family: Palatino, Georgia, serif;
+ font-size: 10px;
+ -webkit-hyphens: auto;
+ text-align: justify;
+ line-height: 1.2em;
+ width: 400px;
}
.regionColumns {
@@ -22,13 +25,76 @@
margin-left: 3%;
}
-.region {
- clear: both;
- padding-top: 20px;
- margin-right: 2%;
+#region1 { width: 100%; }
+
+.shape {
+ width: 100px;
+ height: 100px;
}
-#region1 { width: 100%; }
+#circleShape {
+ float: left;
+ -webkit-shape-outside: circle(closest-side at center);
+ -webkit-shape-margin: 2px;
+ -webkit-clip-path: circle(closest-side at center);
+ background-color: green;
+}
+
+#imageShape {
+ float: left;
+ /* Relative to RegionsShapesNoRegions.html */
+ background-image: url("./resources/shape.gif");
+ -webkit-shape-outside: url("./resources/shape.gif");
+ -webkit-shape-margin: 2px;
+ width: 200px;
+ height: 200px;
+}
+
+#insetShape {
+ float: right;
+ -webkit-shape-outside: inset(5px);
+ -webkit-clip-path: inset(5px);
+ -webkit-shape-margin: 4px;
+ background-color: red;
+ border: 1px solid black;
+}
+
+#roundedInsetShape {
+ float: right;
+ -webkit-shape-outside: inset(5px round 64px 32px 16px 36px);
+ -webkit-clip-path: inset(5px round 64px 32px 16px 36px);
+ -webkit-shape-margin: 4px;
+ background-color: lightblue;
+ opacity: 0.4;
+ border: 1px solid black;
+}
+
+#triangleLeft {
+ float: left;
+ -webkit-shape-outside: polygon(0 0, 100% 50%, 0 100%);
+ -webkit-clip-path: polygon(0 0, 100% 50%, 0 100%);
+ -webkit-shape-margin: 4px;
+ background-color: yellow;
+ opacity: 0.4;
+}
+
+#triangleRight {
+ float: right;
+ -webkit-shape-outside: polygon(100% 0, 0 50%, 100% 100%);
+ -webkit-clip-path: polygon(100% 0, 0 50%, 100% 100%);
+ -webkit-shape-margin: 4px;
+ background-color: orange;
+}
+
+#selfIntersectingStar {
+ float: left;
+ -webkit-shape-outside: polygon(50% 0, 100% 100%, 0 34%, 100% 34%, 0 100%);
+ -webkit-clip-path: polygon(50% 0, 100% 100%, 0 34%, 100% 34%, 0 100%);
+ -webkit-shape-margin: 4px;
+ background-color: blue;
+ width: 100px;
+ height: 200px;
+}
</style>
</head>
Modified: trunk/PerformanceTests/Layout/Shapes/resources/RegionsShapesContentNoRegionsWidth600.html (167314 => 167315)
--- trunk/PerformanceTests/Layout/Shapes/resources/RegionsShapesContentNoRegionsWidth600.html 2014-04-15 17:51:18 UTC (rev 167314)
+++ trunk/PerformanceTests/Layout/Shapes/resources/RegionsShapesContentNoRegionsWidth600.html 2014-04-15 17:52:10 UTC (rev 167315)
@@ -1,14 +1,17 @@
<!DOCTYPE html>
<html>
<head>
-<link rel="stylesheet" type="text/css" href=""
<style>
-body { width: 600px; }
-
-#imageShape {
- // Relative to RegionsShapesNoRegions.html
- background: url("./resources/shape.gif") no-repeat;
- -webkit-shape-outside: url("./resources/shape.gif");
+body {
+ padding: 0;
+ margin: 0;
+ text-align: justify;
+ font-family: Palatino, Georgia, serif;
+ font-size: 10px;
+ -webkit-hyphens: auto;
+ text-align: justify;
+ line-height: 1.2em;
+ width: 600px;
}
.regionColumns {
@@ -28,10 +31,79 @@
padding-top: 20px;
margin-right: 2%;
}
+
#region1, #region2 { width: 46%; }
+
+.shape {
+ width: 100px;
+ height: 100px;
+}
+
+#circleShape {
+ float: left;
+ -webkit-shape-outside: circle(closest-side at center);
+ -webkit-shape-margin: 2px;
+ -webkit-clip-path: circle(closest-side at center);
+ background-color: green;
+}
+
+#imageShape {
+ float: left;
+ /* Relative to RegionsShapesNoRegions.html */
+ background-image: url("./resources/shape.gif");
+ -webkit-shape-outside: url("./resources/shape.gif");
+ -webkit-shape-margin: 2px;
+ width: 200px;
+ height: 200px;
+}
+
+#insetShape {
+ float: right;
+ -webkit-shape-outside: inset(5px);
+ -webkit-clip-path: inset(5px);
+ -webkit-shape-margin: 4px;
+ background-color: red;
+ border: 1px solid black;
+}
+
+#roundedInsetShape {
+ float: right;
+ -webkit-shape-outside: inset(5px round 64px 32px 16px 36px);
+ -webkit-clip-path: inset(5px round 64px 32px 16px 36px);
+ -webkit-shape-margin: 4px;
+ background-color: lightblue;
+ opacity: 0.4;
+ border: 1px solid black;
+}
+
+#triangleLeft {
+ float: left;
+ -webkit-shape-outside: polygon(0 0, 100% 50%, 0 100%);
+ -webkit-clip-path: polygon(0 0, 100% 50%, 0 100%);
+ -webkit-shape-margin: 4px;
+ background-color: yellow;
+ opacity: 0.4;
+}
+
+#triangleRight {
+ float: right;
+ -webkit-shape-outside: polygon(100% 0, 0 50%, 100% 100%);
+ -webkit-clip-path: polygon(100% 0, 0 50%, 100% 100%);
+ -webkit-shape-margin: 4px;
+ background-color: orange;
+}
+
+#selfIntersectingStar {
+ float: left;
+ -webkit-shape-outside: polygon(50% 0, 100% 100%, 0 34%, 100% 34%, 0 100%);
+ -webkit-clip-path: polygon(50% 0, 100% 100%, 0 34%, 100% 34%, 0 100%);
+ -webkit-shape-margin: 4px;
+ background-color: blue;
+ width: 100px;
+ height: 200px;
+}
</style>
</head>
-
<body>
<div class="page">
<div id="region1" class="regionColumns">
Modified: trunk/PerformanceTests/Layout/Shapes/resources/RegionsShapesContentNoRegionsWidth800.html (167314 => 167315)
--- trunk/PerformanceTests/Layout/Shapes/resources/RegionsShapesContentNoRegionsWidth800.html 2014-04-15 17:51:18 UTC (rev 167314)
+++ trunk/PerformanceTests/Layout/Shapes/resources/RegionsShapesContentNoRegionsWidth800.html 2014-04-15 17:52:10 UTC (rev 167315)
@@ -1,14 +1,17 @@
<!DOCTYPE html>
<html>
<head>
-<link rel="stylesheet" type="text/css" href=""
<style>
-body { width: 800px; }
-
-#imageShape {
- // Relative to RegionsShapesNoRegions.html
- background: url("./resources/shape.gif") no-repeat;
- -webkit-shape-outside: url("./resources/shape.gif");
+body {
+ padding: 0;
+ margin: 0;
+ text-align: justify;
+ font-family: Palatino, Georgia, serif;
+ font-size: 10px;
+ -webkit-hyphens: auto;
+ text-align: justify;
+ line-height: 1.2em;
+ width: 800px;
}
.regionColumns {
@@ -23,14 +26,86 @@
margin-left: 3%;
}
+#region1 { width: 40%; }
+#region2 { width: 22%; }
+#region3 { width: 22%; }
+
.region {
clear: both;
padding-top: 20px;
margin-right: 2%;
}
+
+.shape {
+ width: 100px;
+ height: 100px;
+}
+
+#circleShape {
+ float: left;
+ -webkit-shape-outside: circle(closest-side at center);
+ -webkit-shape-margin: 2px;
+ -webkit-clip-path: circle(closest-side at center);
+ background-color: green;
+}
+
+#imageShape {
+ float: left;
+ /* Relative to RegionsShapesNoRegions.html */
+ background-image: url("./resources/shape.gif");
+ -webkit-shape-outside: url("./resources/shape.gif");
+ -webkit-shape-margin: 2px;
+ width: 200px;
+ height: 200px;
+}
+
+#insetShape {
+ float: right;
+ -webkit-shape-outside: inset(5px);
+ -webkit-clip-path: inset(5px);
+ -webkit-shape-margin: 4px;
+ background-color: red;
+ border: 1px solid black;
+}
+
+#roundedInsetShape {
+ float: right;
+ -webkit-shape-outside: inset(5px round 64px 32px 16px 36px);
+ -webkit-clip-path: inset(5px round 64px 32px 16px 36px);
+ -webkit-shape-margin: 4px;
+ background-color: lightblue;
+ opacity: 0.4;
+ border: 1px solid black;
+}
+
+#triangleLeft {
+ float: left;
+ -webkit-shape-outside: polygon(0 0, 100% 50%, 0 100%);
+ -webkit-clip-path: polygon(0 0, 100% 50%, 0 100%);
+ -webkit-shape-margin: 4px;
+ background-color: yellow;
+ opacity: 0.4;
+}
+
+#triangleRight {
+ float: right;
+ -webkit-shape-outside: polygon(100% 0, 0 50%, 100% 100%);
+ -webkit-clip-path: polygon(100% 0, 0 50%, 100% 100%);
+ -webkit-shape-margin: 4px;
+ background-color: orange;
+}
+
+#selfIntersectingStar {
+ float: left;
+ -webkit-shape-outside: polygon(50% 0, 100% 100%, 0 34%, 100% 34%, 0 100%);
+ -webkit-clip-path: polygon(50% 0, 100% 100%, 0 34%, 100% 34%, 0 100%);
+ -webkit-shape-margin: 4px;
+ background-color: blue;
+ width: 100px;
+ height: 200px;
+}
</style>
</head>
-
<body>
<div class="page">
<div id="region1" class="regionColumns">
Modified: trunk/PerformanceTests/Layout/Shapes/resources/RegionsShapesContentNoShapes.html (167314 => 167315)
--- trunk/PerformanceTests/Layout/Shapes/resources/RegionsShapesContentNoShapes.html 2014-04-15 17:51:18 UTC (rev 167314)
+++ trunk/PerformanceTests/Layout/Shapes/resources/RegionsShapesContentNoShapes.html 2014-04-15 17:52:10 UTC (rev 167315)
@@ -1,8 +1,18 @@
<!DOCTYPE html>
<html>
<head>
-<link rel="stylesheet" type="text/css" href=""
<style>
+body {
+ padding: 0;
+ margin: 0;
+ text-align: justify;
+ font-family: Palatino, Georgia, serif;
+ font-size: 10px;
+ -webkit-hyphens: auto;
+ text-align: justify;
+ line-height: 1.2em;
+}
+
article { -webkit-flow-into: article; }
.regionColumns {
@@ -24,6 +34,9 @@
margin-left: 3%;
}
+#region1 { width: 40%; }
+#region2 { width: 22%; }
+#region3 { width: 22%; }
#region4 { height: 200px; }
#region5 { height: 300px; }
@@ -40,13 +53,66 @@
#region2, #region3 { display: none; }
}
-#circleShape { -webkit-shape-outside: none; }
-#imageShape { -webkit-shape-outside: none; }
-#insetShape { -webkit-shape-outside: none; }
-#roundedInsetShape { -webkit-shape-outside: none; }
-#triangleLeft { -webkit-shape-outside: none; }
-#triangleRight { -webkit-shape-outside: none; }
-#selfIntersectingStar { -webkit-shape-outside: none; }
+.shape {
+ width: 100px;
+ height: 100px;
+}
+
+#circleShape {
+ float: left;
+ -webkit-shape-margin: 2px;
+ -webkit-clip-path: circle(closest-side at center);
+ background-color: green;
+}
+
+#imageShape {
+ float: left;
+ background-image: url("shape.gif");
+ -webkit-shape-margin: 2px;
+ width: 200px;
+ height: 200px;
+}
+
+#insetShape {
+ float: right;
+ -webkit-clip-path: inset(5px);
+ -webkit-shape-margin: 4px;
+ background-color: red;
+ border: 1px solid black;
+}
+
+#roundedInsetShape {
+ float: right;
+ -webkit-clip-path: inset(5px round 64px 32px 16px 36px);
+ -webkit-shape-margin: 4px;
+ background-color: lightblue;
+ opacity: 0.4;
+ border: 1px solid black;
+}
+
+#triangleLeft {
+ float: left;
+ -webkit-clip-path: polygon(0 0, 100% 50%, 0 100%);
+ -webkit-shape-margin: 4px;
+ background-color: yellow;
+ opacity: 0.4;
+}
+
+#triangleRight {
+ float: right;
+ -webkit-clip-path: polygon(100% 0, 0 50%, 100% 100%);
+ -webkit-shape-margin: 4px;
+ background-color: orange;
+}
+
+#selfIntersectingStar {
+ float: left;
+ -webkit-clip-path: polygon(50% 0, 100% 100%, 0 34%, 100% 34%, 0 100%);
+ -webkit-shape-margin: 4px;
+ background-color: blue;
+ width: 100px;
+ height: 200px;
+}
</style>
</head>
