Skip to content
Permalink
Browse files
[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.
(.):


Canonical link: https://commits.webkit.org/146450@main
git-svn-id: https://svn.webkit.org/repository/webkit/trunk@163682 268f45cc-cd09-0410-ab3c-d52691b4dbfc
  • Loading branch information
zhorvath committed Feb 8, 2014
1 parent 4c74159 commit 8f229b58b837fbe315c94e31de61eb3d5d8f068a
@@ -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.
@@ -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>
@@ -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>
@@ -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;

})();

0 comments on commit 8f229b5

Please sign in to comment.