[CSS Shapes] Linking stylesheet instead of inline style definition has ruined ShapesR...
authorzoltan@webkit.org <zoltan@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 15 Apr 2014 17:52:10 +0000 (17:52 +0000)
committerzoltan@webkit.org <zoltan@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 15 Apr 2014 17:52:10 +0000 (17:52 +0000)
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:

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@167315 268f45cc-cd09-0410-ab3c-d52691b4dbfc

PerformanceTests/ChangeLog
PerformanceTests/Layout/Shapes/resources/RegionsShapes.css [deleted file]
PerformanceTests/Layout/Shapes/resources/RegionsShapesContent.html
PerformanceTests/Layout/Shapes/resources/RegionsShapesContentNoRegionsWidth400.html
PerformanceTests/Layout/Shapes/resources/RegionsShapesContentNoRegionsWidth600.html
PerformanceTests/Layout/Shapes/resources/RegionsShapesContentNoRegionsWidth800.html
PerformanceTests/Layout/Shapes/resources/RegionsShapesContentNoShapes.html

index 8c07029..4968c59 100644 (file)
@@ -1,3 +1,21 @@
+2014-04-15  Zoltan Horvath  <zoltan@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  <ggaren@apple.com>
 
         MallocBench should scavenge explicitly instead of waiting
diff --git a/PerformanceTests/Layout/Shapes/resources/RegionsShapes.css b/PerformanceTests/Layout/Shapes/resources/RegionsShapes.css
deleted file mode 100644 (file)
index a21bf73..0000000
+++ /dev/null
@@ -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%; }
index d7ef319..42bc752 100644 (file)
@@ -1,9 +1,21 @@
 <!DOCTYPE html>
 <html>
 <head>
-<link rel="stylesheet" type="text/css" href="./Shapes/resources/RegionsShapes.css">
 <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;
@@ -24,9 +36,80 @@ article { -webkit-flow-into: article; }
     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; }
index 8ef2b62..7bf0ae5 100644 (file)
@@ -1,14 +1,17 @@
 <!DOCTYPE html>
 <html>
 <head>
-<link rel="stylesheet" type="text/css" href="resources/RegionsShapes.css">
 <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 @@ body { width: 400px; }
     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>
 
index baaf1fe..b46248b 100644 (file)
@@ -1,14 +1,17 @@
 <!DOCTYPE html>
 <html>
 <head>
-<link rel="stylesheet" type="text/css" href="resources/RegionsShapes.css">
 <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 @@ body { width: 600px; }
     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">
index ee83365..4dd3f04 100644 (file)
@@ -1,14 +1,17 @@
 <!DOCTYPE html>
 <html>
 <head>
-<link rel="stylesheet" type="text/css" href="resources/RegionsShapes.css">
 <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 @@ body { width: 800px; }
     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">
index 82c4a90..4840451 100644 (file)
@@ -1,8 +1,18 @@
 <!DOCTYPE html>
 <html>
 <head>
-<link rel="stylesheet" type="text/css" href="./resources/RegionsShapes.css">
 <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 @@ article { -webkit-flow-into: article; }
     margin-left: 3%;
 }
 
+#region1 { width: 40%; }
+#region2 { width: 22%; }
+#region3 { width: 22%; }
 #region4 { height: 200px; }
 #region5 { height: 300px; }
 
@@ -40,13 +53,66 @@ article { -webkit-flow-into: article; }
     #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>