Commit bfe3d62b authored by abucur@adobe.com's avatar 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:


git-svn-id: http://svn.webkit.org/repository/webkit/trunk@147214 268f45cc-cd09-0410-ab3c-d52691b4dbfc
parent d3d3e993
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
......
<!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>
<!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>
<!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>
<!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>
.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 {
}
(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;
})();
......@@ -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
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment