Attachment 229177 Details for Bug 131572 – Patch

[patch] Patch

perffix.patch (text/plain), 18.13 KB, created by Zoltan Horvath on 2014-04-11 16:36:20 PDT

(hide)

Description:

Filename:

MIME Type:

Creator: Zoltan Horvath

Created: 2014-04-11 16:36:20 PDT

Size: 18.13 KB

patch

obsolete

>diff --git a/PerformanceTests/ChangeLog b/PerformanceTests/ChangeLog
>index 294defd..a496698 100644
>--- a/PerformanceTests/ChangeLog
>+++ b/PerformanceTests/ChangeLog
>@@ -1,3 +1,21 @@
>+2014-04-11  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 NOBODY (OOPS!).
>+
>+        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-11  Dirk Schulze  <krit@webkit.org>
> 
>         Optimize Canvas fill and drawImage with SourceIn, DestinationIn, SourceOut, and DestinationAtop using transparencyLayer.
>diff --git a/PerformanceTests/Layout/Shapes/resources/RegionsShapes.css b/PerformanceTests/Layout/Shapes/resources/RegionsShapes.css
>deleted file mode 100644
>index a21bf73..0000000
>--- a/PerformanceTests/Layout/Shapes/resources/RegionsShapes.css
>+++ /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%; }
>diff --git a/PerformanceTests/Layout/Shapes/resources/RegionsShapesContent.html b/PerformanceTests/Layout/Shapes/resources/RegionsShapesContent.html
>index d7ef319..42bc752 100644
>--- a/PerformanceTests/Layout/Shapes/resources/RegionsShapesContent.html
>+++ b/PerformanceTests/Layout/Shapes/resources/RegionsShapesContent.html
>@@ -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; }
>diff --git a/PerformanceTests/Layout/Shapes/resources/RegionsShapesContentNoRegionsWidth400.html b/PerformanceTests/Layout/Shapes/resources/RegionsShapesContentNoRegionsWidth400.html
>index 8ef2b62..7bf0ae5 100644
>--- a/PerformanceTests/Layout/Shapes/resources/RegionsShapesContentNoRegionsWidth400.html
>+++ b/PerformanceTests/Layout/Shapes/resources/RegionsShapesContentNoRegionsWidth400.html
>@@ -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>
> 
>diff --git a/PerformanceTests/Layout/Shapes/resources/RegionsShapesContentNoRegionsWidth600.html b/PerformanceTests/Layout/Shapes/resources/RegionsShapesContentNoRegionsWidth600.html
>index baaf1fe..b46248b 100644
>--- a/PerformanceTests/Layout/Shapes/resources/RegionsShapesContentNoRegionsWidth600.html
>+++ b/PerformanceTests/Layout/Shapes/resources/RegionsShapesContentNoRegionsWidth600.html
>@@ -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">
>diff --git a/PerformanceTests/Layout/Shapes/resources/RegionsShapesContentNoRegionsWidth800.html b/PerformanceTests/Layout/Shapes/resources/RegionsShapesContentNoRegionsWidth800.html
>index ee83365..4dd3f04 100644
>--- a/PerformanceTests/Layout/Shapes/resources/RegionsShapesContentNoRegionsWidth800.html
>+++ b/PerformanceTests/Layout/Shapes/resources/RegionsShapesContentNoRegionsWidth800.html
>@@ -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">
>diff --git a/PerformanceTests/Layout/Shapes/resources/RegionsShapesContentNoShapes.html b/PerformanceTests/Layout/Shapes/resources/RegionsShapesContentNoShapes.html
>index 82c4a90..4840451 100644
>--- a/PerformanceTests/Layout/Shapes/resources/RegionsShapesContentNoShapes.html
>+++ b/PerformanceTests/Layout/Shapes/resources/RegionsShapesContentNoShapes.html
>@@ -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>
>

Actions: View | Formatted Diff | Diff

Attachments on bug 131572: 229177 | 229185