[CSS Shapes] Add initial performance test for shape-outside: content-box
authorzoltan@webkit.org <zoltan@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Wed, 5 Feb 2014 04:10:43 +0000 (04:10 +0000)
committerzoltan@webkit.org <zoltan@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Wed, 5 Feb 2014 04:10:43 +0000 (04:10 +0000)
https://bugs.webkit.org/show_bug.cgi?id=128190

Reviewed by Ryosuke Niwa.

I've introduced Shapes subdirectory in Layout, every CSS Shapes related performance tests should
go there in the future. The initial performance tests uses 'shape-outside: content-box' in order
to tests the code paths of the Shapes implementation. I also introduced shapes.js, which allows us
to easily add new, simple performance tests for shape-outside.

The entire progress is tracked under #128188 meta bug.

* Layout/Shapes/ShapeOutsideContentBox.html: Added.
* Layout/Shapes/resources/shapes.css: Added.
* Layout/Shapes/resources/shapes.js: Added.
* Skipped: We skip running the tests by default for now.

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

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

index 7229d16..08f7233 100644 (file)
@@ -1,3 +1,22 @@
+2014-02-04  Zoltan Horvath  <zoltan@webkit.org>
+
+        [CSS Shapes] Add initial performance test for shape-outside: content-box
+        https://bugs.webkit.org/show_bug.cgi?id=128190
+
+        Reviewed by Ryosuke Niwa.
+
+        I've introduced Shapes subdirectory in Layout, every CSS Shapes related performance tests should
+        go there in the future. The initial performance tests uses 'shape-outside: content-box' in order
+        to tests the code paths of the Shapes implementation. I also introduced shapes.js, which allows us
+        to easily add new, simple performance tests for shape-outside.
+
+        The entire progress is tracked under #128188 meta bug.
+
+        * Layout/Shapes/ShapeOutsideContentBox.html: Added.
+        * Layout/Shapes/resources/shapes.css: Added.
+        * Layout/Shapes/resources/shapes.js: Added.
+        * Skipped: We skip running the tests by default for now.
+
 2014-01-17  Manuel Rego Casasnovas  <rego@igalia.com>
 
         [CSS Regions] Minor fixes in regions performance tests
diff --git a/PerformanceTests/Layout/Shapes/ShapeOutsideContentBox.html b/PerformanceTests/Layout/Shapes/ShapeOutsideContentBox.html
new file mode 100644 (file)
index 0000000..d677d0e
--- /dev/null
@@ -0,0 +1,96 @@
+<!DOCTYPE html>
+<html>
+    <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>
+    </head>
+    <body>
+        <pre id="log"></pre>
+        <script>
+            var shape = "content-box";
+            PerfTestRunner.measureTime(createShapeOutsideTest("200px", "200px", shape, 1000));
+        </script>
+    </body>
+</html>
diff --git a/PerformanceTests/Layout/Shapes/resources/shapes.css b/PerformanceTests/Layout/Shapes/resources/shapes.css
new file mode 100644 (file)
index 0000000..bdee4c5
--- /dev/null
@@ -0,0 +1,7 @@
+.testBox {
+    width: 800px;
+}
+
+.floatingObject {
+    border: 1px solid black;
+}
index 12e8497..86a303b 100644 (file)
@@ -91,3 +91,6 @@ Layout/LineLayoutJapanese.html
 
 # Don't run the interactive runner. We run Full.html
 DoYouEvenBench/InteractiveRunner.html
+
+# We skip Shapes tests for now: https://bugs.webkit.org/show_bug.cgi?id=128188
+Layout/Shapes