Commit 83840792 authored by rob.buis@samsung.com's avatar rob.buis@samsung.com

[CSS Shapes] Add performance tests

Add various performance tests for CSS Shapes taken from
https://bugs.webkit.org/show_bug.cgi?id=128188.

BUG=349093
NOTRY=true

Review URL: https://codereview.chromium.org/186783003

git-svn-id: svn://svn.chromium.org/blink/trunk@168525 bbb929c8-8fbe-4397-9dbb-9b2b20218538
parent 0d349705
<!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: "content-box"
};
PerfTestRunner.measureTime(createShapeOutsideTest(properties, 1000));
</script>
</body>
</html>
<!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: "inset(10px)"
};
PerfTestRunner.measureTime(createShapeOutsideTest(properties, 1000));
</script>
</body>
</html>
<!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>
<!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: "url(resources/shape.gif)"
};
PerfTestRunner.measureTime(createShapeOutsideTest(properties, 1000));
</script>
</body>
</html>
<!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: "url(resources/shape.gif)",
webkitShapeMargin: "5px"
};
PerfTestRunner.measureTime(createShapeOutsideTest(properties, 1000));
</script>
</body>
</html>
<!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 100px, 0px 200px)"
};
PerfTestRunner.measureTime(createShapeOutsideTest(properties, 1000));
</script>
</body>
</html>
<!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: "100px",
height: "1000px",
webkitShapeOutside: "polygon(0 0, 100px 1000px, 0 1000px)"
};
PerfTestRunner.measureTime(createShapeOutsideTest(properties, 1000));
</script>
</body>
</html>
.testBox {
width: 800px;
}
.floatingObject {
border: 1px solid black;
}
(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(properties) {
if (!templateFloatingNode) {
templateFloatingNode = document.createElement("div");
templateFloatingNode.className = "floatingObject";
}
var float = templateFloatingNode.cloneNode(false);
for (prop in properties) {
float.style[prop] = properties[prop];
}
return float;
}
function addArticles(floatingObjects, paragraphCount) {
for (var i = 0; i < paragraphCount; ++i) {
floatingObjects.appendChild(createParagraphNode());
}
}
function createFloatingObjects(properties, floatingObjectCount) {
var testBox = document.createElement("div");
for (var i = 0; i < floatingObjectCount; ++i) {
testBox.appendChild(createFloatingNode(properties));
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(properties, shapeObjectCount) {
shapeObjectCount = shapeObjectCount || DEFAULT_SHAPE_OBJECT_COUNT;
var floatingObjects = createFloatingObjects(properties, shapeObjectCount);
document.body.appendChild(floatingObjects);
return {
description: "Testing shapes with " + properties['webkitShapeOutside'] +" 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;
})();
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