[CSS Shapes] Add performance test for complex polygon with shape-margin
authorzoltan@webkit.org <zoltan@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Fri, 14 Feb 2014 01:17:14 +0000 (01:17 +0000)
committerzoltan@webkit.org <zoltan@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Fri, 14 Feb 2014 01:17:14 +0000 (01:17 +0000)
https://bugs.webkit.org/show_bug.cgi?id=128769

Reviewed by Ryosuke Niwa.

This patch modifies the logic of createShapeOutsideTest to accept multiple
CSS properties from the test. The patch adds performance test for complex
polygon shape (self intersecting at multiple places) case, moreover we
apply shape-margin on the polygon also.

* Layout/Shapes/ShapeOutsideContentBox.html:
* Layout/Shapes/ShapeOutsideInset.html:
* Layout/Shapes/ShapeOutsidePolygonWithMargin.html: Added.
* Layout/Shapes/ShapeOutsideRaster.html:
* Layout/Shapes/ShapeOutsideSimplePolygon.html:
* Layout/Shapes/resources/shapes.js:

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

PerformanceTests/ChangeLog
PerformanceTests/Layout/Shapes/ShapeOutsideContentBox.html
PerformanceTests/Layout/Shapes/ShapeOutsideInset.html
PerformanceTests/Layout/Shapes/ShapeOutsidePolygonWithMargin.html [new file with mode: 0644]
PerformanceTests/Layout/Shapes/ShapeOutsideRaster.html
PerformanceTests/Layout/Shapes/ShapeOutsideSimplePolygon.html
PerformanceTests/Layout/Shapes/resources/shapes.js

index 7371f82..03acc6e 100644 (file)
@@ -1,5 +1,24 @@
 2014-02-13  Zoltan Horvath  <zoltan@webkit.org>
 
+        [CSS Shapes] Add performance test for complex polygon with shape-margin
+        https://bugs.webkit.org/show_bug.cgi?id=128769
+
+        Reviewed by Ryosuke Niwa.
+
+        This patch modifies the logic of createShapeOutsideTest to accept multiple
+        CSS properties from the test. The patch adds performance test for complex
+        polygon shape (self intersecting at multiple places) case, moreover we
+        apply shape-margin on the polygon also.
+
+        * Layout/Shapes/ShapeOutsideContentBox.html:
+        * Layout/Shapes/ShapeOutsideInset.html:
+        * Layout/Shapes/ShapeOutsidePolygonWithMargin.html: Added.
+        * Layout/Shapes/ShapeOutsideRaster.html:
+        * Layout/Shapes/ShapeOutsideSimplePolygon.html:
+        * Layout/Shapes/resources/shapes.js:
+
+2014-02-13  Zoltan Horvath  <zoltan@webkit.org>
+
         [CSS Shapes] Add performance test for raster shape
         https://bugs.webkit.org/show_bug.cgi?id=128746
 
index b1fd446..8b8970a 100644 (file)
@@ -8,8 +8,12 @@
     <body>
         <pre id="log"></pre>
         <script>
-            var shape = "content-box";
-            PerfTestRunner.measureTime(createShapeOutsideTest("200px", "200px", shape, 1000));
+            var properties = {
+                width: "200px",
+                height: "200px",
+                webkitShapeOutside: "content-box"
+            };
+            PerfTestRunner.measureTime(createShapeOutsideTest(properties, 1000));
         </script>
     </body>
 </html>
index 3720501..3feeb6b 100644 (file)
@@ -8,8 +8,12 @@
     <body>
         <pre id="log"></pre>
         <script>
-            var shape = "inset(10px)";
-            PerfTestRunner.measureTime(createShapeOutsideTest("200px", "200px", shape, 1000));
+            var properties = {
+                width: "200px",
+                height: "200px",
+                webkitShapeOutside: "inset(10px)"
+            };
+            PerfTestRunner.measureTime(createShapeOutsideTest(properties, 1000));
         </script>
     </body>
 </html>
diff --git a/PerformanceTests/Layout/Shapes/ShapeOutsidePolygonWithMargin.html b/PerformanceTests/Layout/Shapes/ShapeOutsidePolygonWithMargin.html
new file mode 100644 (file)
index 0000000..b601475
--- /dev/null
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <link rel="stylesheet" href="resources/shapes.css" type="text/css"></link>
+        <script src="../../resources/runner.js"></script>
+        <script src="resources/shapes.js"></script>
+    </head>
+    <body>
+        <pre id="log"></pre>
+        <script>
+            var properties = {
+                width: "200px",
+                height: "200px",
+                webkitShapeOutside: "polygon(0 0, 200px 40px, 0px 40px, 200px 80px, 0px 80px, 200px 120px, 0px 120px, 200px 160px, 0px 160px, 200px 200px)",
+                webkitShapeMargin: "5px"
+            };
+            PerfTestRunner.measureTime(createShapeOutsideTest(properties, 1000));
+        </script>
+    </body>
+</html>
index 383daa8..ec19f52 100644 (file)
@@ -8,8 +8,12 @@
     <body>
         <pre id="log"></pre>
         <script>
-            var shape = "url(resources/shape.gif)";
-            PerfTestRunner.measureTime(createShapeOutsideTest("200px", "200px", shape, 1000));
+            var properties = {
+                width: "200px",
+                height: "200px",
+                webkitShapeOutside: "url(resources/shape.gif)"
+            };
+            PerfTestRunner.measureTime(createShapeOutsideTest(properties, 1000));
         </script>
     </body>
 </html>
index 3e53f67..16e338a 100644 (file)
@@ -8,8 +8,12 @@
     <body>
         <pre id="log"></pre>
         <script>
-            var shape = "polygon(0 0, 200px 100px, 0px 200px)";
-            PerfTestRunner.measureTime(createShapeOutsideTest("200px", "200px", shape, 1000));
+            var properties = {
+                width: "200px",
+                height: "200px",
+                webkitShapeOutside: "polygon(0 0, 200px 100px, 0px 200px)"
+            };
+            PerfTestRunner.measureTime(createShapeOutsideTest(properties, 1000));
         </script>
     </body>
 </html>
index 34fd2e9..320f9a6 100644 (file)
         return paragraph;
     }
 
-    function createFloatingNode(width, height, shape) {
+    function createFloatingNode(properties) {
         if (!templateFloatingNode) {
             templateFloatingNode = document.createElement("div");
             templateFloatingNode.className = "floatingObject";
         }
 
         var float = templateFloatingNode.cloneNode(false);
-        float.style.width = width;
-        float.style.height = height;
-        float.style.webkitShapeOutside = shape;
+        for (prop in properties) {
+            float.style[prop] = properties[prop];
+        }
         return float;
     }
 
         }
     }
 
-    function createFloatingObjects(width, height, shape, floatingObjectCount) {
+    function createFloatingObjects(properties, floatingObjectCount) {
         var testBox = document.createElement("div");
         for (var i = 0; i < floatingObjectCount; ++i) {
-            testBox.appendChild(createFloatingNode(width, height, shape));
+            testBox.appendChild(createFloatingNode(properties));
             testBox.appendChild(createParagraphNode())
         }
         testBox.className = "testBox";
         }
     }
 
-    function createShapeOutsideTest(width, height, shape, shapeObjectCount) {
+    function createShapeOutsideTest(properties, shapeObjectCount) {
         shapeObjectCount = shapeObjectCount || DEFAULT_SHAPE_OBJECT_COUNT;
 
-        var floatingObjects = createFloatingObjects(width, height, shape, shapeObjectCount);
+        var floatingObjects = createFloatingObjects(properties, shapeObjectCount);
         document.body.appendChild(floatingObjects);
         return {
-            description: "Testing shapes with " + shape +" using " + shapeObjectCount + " shapes.",
+            description: "Testing shapes with " + properties['webkitShapeOutside'] +" using " + shapeObjectCount + " shapes.",
             run: function() {
                 applyFloating();
                 document.body.offsetTop;