[CSS Shapes] Add initial performance tests for inset shape
authorzoltan@webkit.org <zoltan@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Sat, 8 Feb 2014 02:39:12 +0000 (02:39 +0000)
committerzoltan@webkit.org <zoltan@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Sat, 8 Feb 2014 02:39:12 +0000 (02:39 +0000)
https://bugs.webkit.org/show_bug.cgi?id=128378

Reviewed by Ryosuke Niwa.

* Layout/Shapes/ShapeOutsideContentBox.html: Move js to shapes.js.
* Layout/Shapes/ShapeOutsideInset.html: Added.
* Layout/Shapes/resources/shapes.js: Added.
(.):

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

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

index dbcc5f8..289df84 100644 (file)
@@ -1,3 +1,15 @@
+2014-02-07  Zoltan Horvath  <zoltan@webkit.org>
+
+        [CSS Shapes] Add initial performance tests for inset shape
+        https://bugs.webkit.org/show_bug.cgi?id=128378
+
+        Reviewed by Ryosuke Niwa.
+
+        * Layout/Shapes/ShapeOutsideContentBox.html: Move js to shapes.js.
+        * Layout/Shapes/ShapeOutsideInset.html: Added.
+        * Layout/Shapes/resources/shapes.js: Added.
+        (.):
+
 2014-02-04  Ryosuke Niwa  <rniwa@webkit.org>
 
         Undelete the "build" directory erroneously removed in r163427.
index d677d0e..b1fd446 100644 (file)
@@ -3,88 +3,7 @@
     <head>
         <link rel="stylesheet" href="resources/shapes.css" type="text/css"></link>
         <script src="../../resources/runner.js"></script>
-        <script>
-            var templateParagraph = null;
-            var templateFloatingNode = null;
-            var DEFAULT_SHAPE_OBJECT_COUNT = 100;
-
-            function createParagraphNode() {
-                if (!templateParagraph) {
-                    templateParagraph = document.createElement("p");
-                    templateParagraph.innerHTML = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam at turpis placerat sapien congue viverra nec sed felis.\
-                        Aenean aliquam, justo eu condimentum pharetra, arcu eros blandit metus, nec lacinia nisi orci vitae nunc.\
-                        Proin orci libero, accumsan non dignissim at, sodales in sapien. Curabitur dui nibh, venenatis vel tempus vel, accumsan nec velit.\
-                        Nam sit amet tempor lacus. Sed mollis dolor nibh, non tempus leo. Donec magna odio, commodo id porta in, aliquam mollis eros.\
-                        Pellentesque vulputate gravida ligula in elementum. Fusce lacinia massa justo, at porttitor orci.\
-                        Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec odio quam, pulvinar ut porttitor ac, tempor vitae ligula.\
-                        Cras aliquet sapien id sapien mollis nec pulvinar mauris adipiscing. Praesent porttitor consequat augue, sit amet mollis justo condimentum eu.\
-                        Etiam ut erat pellentesque orci congue interdum. Nulla eu eros mi.\
-                        Curabitur rutrum, lorem ac malesuada pellentesque, sapien risus consequat massa, eget pellentesque nunc nulla vel sem.";
-                        templateParagraph.className = "contentParagraph";
-                }
-
-                var paragraph = templateParagraph.cloneNode(true);
-                return paragraph;
-            }
-
-            function createFloatingNode(width, height, shape) {
-                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;
-                return float;
-            }
-
-            function addArticles(floatingObjects, paragraphCount) {
-                for (var i = 0; i < paragraphCount; ++i) {
-                    floatingObjects.appendChild(createParagraphNode());
-                }
-            }
-
-            function createFloatingObjects(width, height, shape, floatingObjectCount) {
-                var testBox = document.createElement("div");
-                for (var i = 0; i < floatingObjectCount; ++i) {
-                    testBox.appendChild(createFloatingNode(width, height, shape));
-                    testBox.appendChild(createParagraphNode())
-                }
-                testBox.className = "testBox";
-                return testBox;
-            }
-
-            function applyFloating() {
-                var floatingObjects = document.getElementsByClassName('floatingObject');
-                for (i = 0; i < floatingObjects.length; ++i) {
-                    floatingObjects[i].style.cssFloat = 'left';
-                }
-            }
-
-            function createShapeOutsideTest(width, height, shape, shapeObjectCount) {
-                shapeObjectCount = shapeObjectCount || DEFAULT_SHAPE_OBJECT_COUNT;
-
-                var floatingObjects = createFloatingObjects(width, height, shape, shapeObjectCount);
-                document.body.appendChild(floatingObjects);
-                return {
-                    description: "Testing shapes with " + shape +" using " + shapeObjectCount + " shapes.",
-                    run: function() {
-                        applyFloating();
-                        document.body.offsetTop;
-                    },
-                    setup: function() {
-                        PerfTestRunner.resetRandomSeed();
-                        document.body.offsetTop;
-                    },
-                    done: function() {
-                        document.body.removeChild(floatingObjects);
-                        templateParagraph = null;
-                    }
-                };
-            }
-        </script>
+        <script src="resources/shapes.js"></script>
     </head>
     <body>
         <pre id="log"></pre>
diff --git a/PerformanceTests/Layout/Shapes/ShapeOutsideInset.html b/PerformanceTests/Layout/Shapes/ShapeOutsideInset.html
new file mode 100644 (file)
index 0000000..3720501
--- /dev/null
@@ -0,0 +1,15 @@
+<!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 shape = "inset(10px)";
+            PerfTestRunner.measureTime(createShapeOutsideTest("200px", "200px", shape, 1000));
+        </script>
+    </body>
+</html>
diff --git a/PerformanceTests/Layout/Shapes/resources/shapes.js b/PerformanceTests/Layout/Shapes/resources/shapes.js
new file mode 100644 (file)
index 0000000..34fd2e9
--- /dev/null
@@ -0,0 +1,85 @@
+(function() {
+    var templateParagraph = null;
+    var templateFloatingNode = null;
+    var DEFAULT_SHAPE_OBJECT_COUNT = 100;
+
+    function createParagraphNode() {
+        if (!templateParagraph) {
+            templateParagraph = document.createElement("p");
+            templateParagraph.innerHTML = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam at turpis placerat sapien congue viverra nec sed felis.\
+                Aenean aliquam, justo eu condimentum pharetra, arcu eros blandit metus, nec lacinia nisi orci vitae nunc.\
+                Proin orci libero, accumsan non dignissim at, sodales in sapien. Curabitur dui nibh, venenatis vel tempus vel, accumsan nec velit.\
+                Nam sit amet tempor lacus. Sed mollis dolor nibh, non tempus leo. Donec magna odio, commodo id porta in, aliquam mollis eros.\
+                Pellentesque vulputate gravida ligula in elementum. Fusce lacinia massa justo, at porttitor orci.\
+                Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec odio quam, pulvinar ut porttitor ac, tempor vitae ligula.\
+                Cras aliquet sapien id sapien mollis nec pulvinar mauris adipiscing. Praesent porttitor consequat augue, sit amet mollis justo condimentum eu.\
+                Etiam ut erat pellentesque orci congue interdum. Nulla eu eros mi.\
+                Curabitur rutrum, lorem ac malesuada pellentesque, sapien risus consequat massa, eget pellentesque nunc nulla vel sem.";
+                templateParagraph.className = "contentParagraph";
+        }
+
+        var paragraph = templateParagraph.cloneNode(true);
+        return paragraph;
+    }
+
+    function createFloatingNode(width, height, shape) {
+        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;
+        return float;
+    }
+
+    function addArticles(floatingObjects, paragraphCount) {
+        for (var i = 0; i < paragraphCount; ++i) {
+            floatingObjects.appendChild(createParagraphNode());
+        }
+    }
+
+    function createFloatingObjects(width, height, shape, floatingObjectCount) {
+        var testBox = document.createElement("div");
+        for (var i = 0; i < floatingObjectCount; ++i) {
+            testBox.appendChild(createFloatingNode(width, height, shape));
+            testBox.appendChild(createParagraphNode())
+        }
+        testBox.className = "testBox";
+        return testBox;
+    }
+
+    function applyFloating() {
+        var floatingObjects = document.getElementsByClassName('floatingObject');
+        for (i = 0; i < floatingObjects.length; ++i) {
+            floatingObjects[i].style.cssFloat = 'left';
+        }
+    }
+
+    function createShapeOutsideTest(width, height, shape, shapeObjectCount) {
+        shapeObjectCount = shapeObjectCount || DEFAULT_SHAPE_OBJECT_COUNT;
+
+        var floatingObjects = createFloatingObjects(width, height, shape, shapeObjectCount);
+        document.body.appendChild(floatingObjects);
+        return {
+            description: "Testing shapes with " + shape +" using " + shapeObjectCount + " shapes.",
+            run: function() {
+                applyFloating();
+                document.body.offsetTop;
+            },
+            setup: function() {
+                PerfTestRunner.resetRandomSeed();
+                document.body.offsetTop;
+            },
+            done: function() {
+                document.body.removeChild(floatingObjects);
+                templateParagraph = null;
+            }
+        };
+    }
+
+    window.createShapeOutsideTest = createShapeOutsideTest;
+
+})();