[CSS Regions] Add performance tests
authorabucur@adobe.com <abucur@adobe.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Fri, 29 Mar 2013 14:14:23 +0000 (14:14 +0000)
committerabucur@adobe.com <abucur@adobe.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Fri, 29 Mar 2013 14:14:23 +0000 (14:14 +0000)
https://bugs.webkit.org/show_bug.cgi?id=113303

Reviewed by Antti Koivisto.

Add simple performance tests for regions, without nested named flows: a region chain and a flow article.
The regions.js script is used to generate the tests and can set the following parameters: the number of regions,
the number of paragraphs, the regions width, height, max-height and the propability of a forced break after a paragraph.

The tests are skipped for now. They should be enabled once the regions performance is stable enough to create a baseline.

* Layout/RegionsAuto.html: Added. A few regions with a short article. The regions have auto-height and some
paragraphs (80%) have forced breaks after. Stress test for the auto-height algorithm.
* Layout/RegionsAutoMaxHeight.html: Added. A lot of regions with auto-height and max-height. Tests the impact of
max-height on the auto-height algorithm.
* Layout/RegionsFixed.html: Added. A lot of regions with a long article. Some paragraphs (50%) have forced breaks after.
Stress test for the regions layout algorithm.
* Layout/RegionsFixedShort.html: Added. A lot of short regions with a long content. Tests the impact of unforced breaks
on the layout speed.
* Layout/resources/regions.css: Added.
(.articleInFlow):
(.articleNone):
(.region):
(.contentParagraph):
(.breakAfter):
(.regionContainer):
* Layout/resources/regions.js: Added.
(.):
* Skipped:

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

PerformanceTests/ChangeLog
PerformanceTests/Layout/RegionsAuto.html [new file with mode: 0644]
PerformanceTests/Layout/RegionsAutoMaxHeight.html [new file with mode: 0644]
PerformanceTests/Layout/RegionsFixed.html [new file with mode: 0644]
PerformanceTests/Layout/RegionsFixedShort.html [new file with mode: 0644]
PerformanceTests/Layout/resources/regions.css [new file with mode: 0644]
PerformanceTests/Layout/resources/regions.js [new file with mode: 0644]
PerformanceTests/Skipped

index 93c9e98..f27e670 100644 (file)
@@ -1,3 +1,35 @@
+2013-03-29  Andrei Bucur  <abucur@adobe.com>
+
+        [CSS Regions] Add performance tests
+        https://bugs.webkit.org/show_bug.cgi?id=113303
+
+        Reviewed by Antti Koivisto.
+
+        Add simple performance tests for regions, without nested named flows: a region chain and a flow article.
+        The regions.js script is used to generate the tests and can set the following parameters: the number of regions,
+        the number of paragraphs, the regions width, height, max-height and the propability of a forced break after a paragraph.
+
+        The tests are skipped for now. They should be enabled once the regions performance is stable enough to create a baseline.
+
+        * Layout/RegionsAuto.html: Added. A few regions with a short article. The regions have auto-height and some
+        paragraphs (80%) have forced breaks after. Stress test for the auto-height algorithm.
+        * Layout/RegionsAutoMaxHeight.html: Added. A lot of regions with auto-height and max-height. Tests the impact of
+        max-height on the auto-height algorithm.
+        * Layout/RegionsFixed.html: Added. A lot of regions with a long article. Some paragraphs (50%) have forced breaks after.
+        Stress test for the regions layout algorithm.
+        * Layout/RegionsFixedShort.html: Added. A lot of short regions with a long content. Tests the impact of unforced breaks
+        on the layout speed.
+        * Layout/resources/regions.css: Added.
+        (.articleInFlow):
+        (.articleNone):
+        (.region):
+        (.contentParagraph):
+        (.breakAfter):
+        (.regionContainer):
+        * Layout/resources/regions.js: Added.
+        (.):
+        * Skipped:
+
 2013-03-26  Ryosuke Niwa  <rniwa@webkit.org>
 
         Add a performance tests for selecting all content in a document
diff --git a/PerformanceTests/Layout/RegionsAuto.html b/PerformanceTests/Layout/RegionsAuto.html
new file mode 100644 (file)
index 0000000..67a41f0
--- /dev/null
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <link rel="stylesheet" href="resources/regions.css" TYPE="text/css"></link>
+        <script src="../resources/runner.js"></script>
+        <script src="resources/regions.js"></script>
+        <style type="text/css">
+        #log {
+            position: fixed;
+        }
+        </style>
+    </head>
+    <body>
+        <pre id="log"></pre>
+        <script>
+            PerfTestRunner.measureTime(createRegionsTest("300px", "auto", 400, 400, "auto", 0.8));
+        </script>
+    </body>
+</html>
diff --git a/PerformanceTests/Layout/RegionsAutoMaxHeight.html b/PerformanceTests/Layout/RegionsAutoMaxHeight.html
new file mode 100644 (file)
index 0000000..f138d71
--- /dev/null
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <link rel="stylesheet" href="resources/regions.css" TYPE="text/css"></link>
+        <script src="../resources/runner.js"></script>
+        <script src="resources/regions.js"></script>
+        <style type="text/css">
+        #log {
+            position: fixed;
+        }
+        </style>
+    </head>
+    <body>
+        <pre id="log"></pre>
+        <script>
+            PerfTestRunner.measureTime(createRegionsTest("300px", "auto", 1200, 400, "200px", 0.5));
+        </script>
+    </body>
+</html>
diff --git a/PerformanceTests/Layout/RegionsFixed.html b/PerformanceTests/Layout/RegionsFixed.html
new file mode 100644 (file)
index 0000000..50d6093
--- /dev/null
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <link rel="stylesheet" href="resources/regions.css" TYPE="text/css"></link>
+        <script src="../resources/runner.js"></script>
+        <script src="resources/regions.js"></script>
+        <style type="text/css">
+        #log {
+            position: fixed;
+        }
+        </style>
+    </head>
+    <body>
+        <pre id="log"></pre>
+        <script>
+            PerfTestRunner.measureTime(createRegionsTest("300px", "200px", 1200, 400, "auto", 0.9));
+        </script>
+    </body>
+</html>
diff --git a/PerformanceTests/Layout/RegionsFixedShort.html b/PerformanceTests/Layout/RegionsFixedShort.html
new file mode 100644 (file)
index 0000000..209c6a5
--- /dev/null
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <link rel="stylesheet" href="resources/regions.css" TYPE="text/css"></link>
+        <script src="../resources/runner.js"></script>
+        <script src="resources/regions.js"></script>
+        <style type="text/css">
+        #log {
+            position: fixed;
+        }
+        </style>
+    </head>
+    <body>
+        <pre id="log"></pre>
+        <script>
+            PerfTestRunner.measureTime(createRegionsTest("300px", "100px", 1200, 300, "auto", 0));
+        </script>
+    </body>
+</html>
diff --git a/PerformanceTests/Layout/resources/regions.css b/PerformanceTests/Layout/resources/regions.css
new file mode 100644 (file)
index 0000000..6364a64
--- /dev/null
@@ -0,0 +1,25 @@
+.articleInFlow {
+    -webkit-flow-into: flow;
+}
+
+.articleNone {
+    display: none;
+}
+
+.region {
+    -webkit-flow-from: flow;
+    border: 1px solid black;
+    -webkit-region-overflow: break;
+}
+
+.contentParagraph {
+    font-size: 16px;
+}
+
+.breakAfter {
+    -webkit-region-break-after: always;
+}
+
+.regionContainer {
+
+}
diff --git a/PerformanceTests/Layout/resources/regions.js b/PerformanceTests/Layout/resources/regions.js
new file mode 100644 (file)
index 0000000..b89e2d7
--- /dev/null
@@ -0,0 +1,92 @@
+(function() {
+    var templateParagraph = null;
+    var templateRegion = null;
+    var DEFAULT_PARAGRAPH_COUNT = 100;
+    var DEFAULT_REGION_COUNT = 100;
+
+    function createParagraphNode(breakChance) {
+        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);
+        var randomNumber = PerfTestRunner.random();
+        if (randomNumber < breakChance)
+            paragraph.className = paragraph.className + " breakAfter";
+        return paragraph;
+    }
+
+    function createRegionNode(regionWidth, regionHeight, regionMaxHeight) {
+        if (!templateRegion) {
+            templateRegion = document.createElement("div");
+            templateRegion.className = "region";
+        }
+
+        var region = templateRegion.cloneNode(false);
+        region.style.width = regionWidth;
+        region.style.height = regionHeight;
+        region.style.maxHeight = regionMaxHeight;
+        return region;
+    }
+
+    function createArticle(paragraphCount, breakChance) {
+        var article = document.createElement("div");
+        for (var i = 0 ; i < paragraphCount; ++i) {
+            article.appendChild(createParagraphNode(breakChance));
+        }
+        article.className = "articleNone";
+        return article;
+    }
+
+    function createRegions(regionWidth, regionHeight, regionCount, regionMaxHeight) {
+        var regionContainer = document.createElement("div");
+        for (var i = 0; i < regionCount; ++i) {
+            regionContainer.appendChild(createRegionNode(regionWidth, regionHeight, regionMaxHeight));
+        }
+        regionContainer.className = "regionContainer";
+        return regionContainer;
+    }
+
+    function createRegionsTest(regionWidth, regionHeight, regionCount, paragraphCount, regionMaxHeight, breakChance) {
+        paragraphCount = paragraphCount || DEFAULT_PARAGRAPH_COUNT;
+        regionCount = regionCount || DEFAULT_REGION_COUNT;
+        regionMaxHeight = regionMaxHeight || "auto";
+        breakChance = breakChance || 0;
+
+        var article = createArticle(paragraphCount, breakChance);
+        var regions = createRegions(regionWidth, regionHeight, regionCount, regionMaxHeight);
+        document.body.appendChild(article);
+        document.body.appendChild(regions);
+        return {
+            description: "Testing regions with " + regionCount + " regions @{width: " + regionWidth + ", height: " + regionHeight + 
+            ", maxHeight: " + regionMaxHeight + "} and " + paragraphCount + " paragraphs",
+            run: function() {
+                article.className = "articleInFlow";
+                document.body.offsetTop;
+            },
+            setup: function() {
+                PerfTestRunner.resetRandomSeed();
+                article.className = "articleNone";
+                document.body.offsetTop;
+            },
+            done: function() {
+                document.body.removeChild(article);
+                document.body.removeChild(regions);
+                templateParagraph = null;
+                templateRegion = null;
+            }
+        };
+    }
+
+    window.createRegionsTest = createRegionsTest;
+})();
index 6870c72..e8d0c0b 100644 (file)
@@ -76,3 +76,9 @@ Canvas/drawimage.html
 # necessary due to https://bugs.webkit.org/show_bug.cgi?id=107236
 # but is still useful for testing the threaded parser.
 Parser/html-parser-threaded.html
+
+# Skip the regions performance tests for now.
+Layout/RegionsAuto.html
+Layout/RegionsAutoMaxHeight.html
+Layout/RegionsFixed.html
+Layout/RegionsFixedShort.html