<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[164078] trunk/PerformanceTests</title>
</head>
<body>
<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; }
#msg dl a { font-weight: bold}
#msg dl a:link { color:#fc3; }
#msg dl a:active { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta">
<dt>Revision</dt> <dd><a href="http://trac.webkit.org/projects/webkit/changeset/164078">164078</a></dd>
<dt>Author</dt> <dd>zoltan@webkit.org</dd>
<dt>Date</dt> <dd>2014-02-13 17:17:14 -0800 (Thu, 13 Feb 2014)</dd>
</dl>
<h3>Log Message</h3>
<pre>[CSS Shapes] Add performance test for complex polygon with shape-margin
https://bugs.webkit.org/show_bug.cgi?id=128769
Reviewed by Ryosuke Niwa.
This patch modifies the logic of createShapeOutsideTest to accept multiple
CSS properties from the test. The patch adds performance test for complex
polygon shape (self intersecting at multiple places) case, moreover we
apply shape-margin on the polygon also.
* Layout/Shapes/ShapeOutsideContentBox.html:
* Layout/Shapes/ShapeOutsideInset.html:
* Layout/Shapes/ShapeOutsidePolygonWithMargin.html: Added.
* Layout/Shapes/ShapeOutsideRaster.html:
* Layout/Shapes/ShapeOutsideSimplePolygon.html:
* Layout/Shapes/resources/shapes.js:</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkPerformanceTestsChangeLog">trunk/PerformanceTests/ChangeLog</a></li>
<li><a href="#trunkPerformanceTestsLayoutShapesShapeOutsideContentBoxhtml">trunk/PerformanceTests/Layout/Shapes/ShapeOutsideContentBox.html</a></li>
<li><a href="#trunkPerformanceTestsLayoutShapesShapeOutsideInsethtml">trunk/PerformanceTests/Layout/Shapes/ShapeOutsideInset.html</a></li>
<li><a href="#trunkPerformanceTestsLayoutShapesShapeOutsideRasterhtml">trunk/PerformanceTests/Layout/Shapes/ShapeOutsideRaster.html</a></li>
<li><a href="#trunkPerformanceTestsLayoutShapesShapeOutsideSimplePolygonhtml">trunk/PerformanceTests/Layout/Shapes/ShapeOutsideSimplePolygon.html</a></li>
<li><a href="#trunkPerformanceTestsLayoutShapesresourcesshapesjs">trunk/PerformanceTests/Layout/Shapes/resources/shapes.js</a></li>
</ul>
<h3>Added Paths</h3>
<ul>
<li><a href="#trunkPerformanceTestsLayoutShapesShapeOutsidePolygonWithMarginhtml">trunk/PerformanceTests/Layout/Shapes/ShapeOutsidePolygonWithMargin.html</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkPerformanceTestsChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/PerformanceTests/ChangeLog (164077 => 164078)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/PerformanceTests/ChangeLog 2014-02-14 01:06:53 UTC (rev 164077)
+++ trunk/PerformanceTests/ChangeLog 2014-02-14 01:17:14 UTC (rev 164078)
</span><span class="lines">@@ -1,5 +1,24 @@
</span><span class="cx"> 2014-02-13 Zoltan Horvath <zoltan@webkit.org>
</span><span class="cx">
</span><ins>+ [CSS Shapes] Add performance test for complex polygon with shape-margin
+ https://bugs.webkit.org/show_bug.cgi?id=128769
+
+ Reviewed by Ryosuke Niwa.
+
+ This patch modifies the logic of createShapeOutsideTest to accept multiple
+ CSS properties from the test. The patch adds performance test for complex
+ polygon shape (self intersecting at multiple places) case, moreover we
+ apply shape-margin on the polygon also.
+
+ * Layout/Shapes/ShapeOutsideContentBox.html:
+ * Layout/Shapes/ShapeOutsideInset.html:
+ * Layout/Shapes/ShapeOutsidePolygonWithMargin.html: Added.
+ * Layout/Shapes/ShapeOutsideRaster.html:
+ * Layout/Shapes/ShapeOutsideSimplePolygon.html:
+ * Layout/Shapes/resources/shapes.js:
+
+2014-02-13 Zoltan Horvath <zoltan@webkit.org>
+
</ins><span class="cx"> [CSS Shapes] Add performance test for raster shape
</span><span class="cx"> https://bugs.webkit.org/show_bug.cgi?id=128746
</span><span class="cx">
</span></span></pre></div>
<a id="trunkPerformanceTestsLayoutShapesShapeOutsideContentBoxhtml"></a>
<div class="modfile"><h4>Modified: trunk/PerformanceTests/Layout/Shapes/ShapeOutsideContentBox.html (164077 => 164078)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/PerformanceTests/Layout/Shapes/ShapeOutsideContentBox.html 2014-02-14 01:06:53 UTC (rev 164077)
+++ trunk/PerformanceTests/Layout/Shapes/ShapeOutsideContentBox.html 2014-02-14 01:17:14 UTC (rev 164078)
</span><span class="lines">@@ -8,8 +8,12 @@
</span><span class="cx"> <body>
</span><span class="cx"> <pre id="log"></pre>
</span><span class="cx"> <script>
</span><del>- var shape = "content-box";
- PerfTestRunner.measureTime(createShapeOutsideTest("200px", "200px", shape, 1000));
</del><ins>+ var properties = {
+ width: "200px",
+ height: "200px",
+ webkitShapeOutside: "content-box"
+ };
+ PerfTestRunner.measureTime(createShapeOutsideTest(properties, 1000));
</ins><span class="cx"> </script>
</span><span class="cx"> </body>
</span><span class="cx"> </html>
</span></span></pre></div>
<a id="trunkPerformanceTestsLayoutShapesShapeOutsideInsethtml"></a>
<div class="modfile"><h4>Modified: trunk/PerformanceTests/Layout/Shapes/ShapeOutsideInset.html (164077 => 164078)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/PerformanceTests/Layout/Shapes/ShapeOutsideInset.html 2014-02-14 01:06:53 UTC (rev 164077)
+++ trunk/PerformanceTests/Layout/Shapes/ShapeOutsideInset.html 2014-02-14 01:17:14 UTC (rev 164078)
</span><span class="lines">@@ -8,8 +8,12 @@
</span><span class="cx"> <body>
</span><span class="cx"> <pre id="log"></pre>
</span><span class="cx"> <script>
</span><del>- var shape = "inset(10px)";
- PerfTestRunner.measureTime(createShapeOutsideTest("200px", "200px", shape, 1000));
</del><ins>+ var properties = {
+ width: "200px",
+ height: "200px",
+ webkitShapeOutside: "inset(10px)"
+ };
+ PerfTestRunner.measureTime(createShapeOutsideTest(properties, 1000));
</ins><span class="cx"> </script>
</span><span class="cx"> </body>
</span><span class="cx"> </html>
</span></span></pre></div>
<a id="trunkPerformanceTestsLayoutShapesShapeOutsidePolygonWithMarginhtml"></a>
<div class="addfile"><h4>Added: trunk/PerformanceTests/Layout/Shapes/ShapeOutsidePolygonWithMargin.html (0 => 164078)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/PerformanceTests/Layout/Shapes/ShapeOutsidePolygonWithMargin.html (rev 0)
+++ trunk/PerformanceTests/Layout/Shapes/ShapeOutsidePolygonWithMargin.html 2014-02-14 01:17:14 UTC (rev 164078)
</span><span class="lines">@@ -0,0 +1,20 @@
</span><ins>+<!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>
</ins></span></pre></div>
<a id="trunkPerformanceTestsLayoutShapesShapeOutsideRasterhtml"></a>
<div class="modfile"><h4>Modified: trunk/PerformanceTests/Layout/Shapes/ShapeOutsideRaster.html (164077 => 164078)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/PerformanceTests/Layout/Shapes/ShapeOutsideRaster.html 2014-02-14 01:06:53 UTC (rev 164077)
+++ trunk/PerformanceTests/Layout/Shapes/ShapeOutsideRaster.html 2014-02-14 01:17:14 UTC (rev 164078)
</span><span class="lines">@@ -8,8 +8,12 @@
</span><span class="cx"> <body>
</span><span class="cx"> <pre id="log"></pre>
</span><span class="cx"> <script>
</span><del>- var shape = "url(resources/shape.gif)";
- PerfTestRunner.measureTime(createShapeOutsideTest("200px", "200px", shape, 1000));
</del><ins>+ var properties = {
+ width: "200px",
+ height: "200px",
+ webkitShapeOutside: "url(resources/shape.gif)"
+ };
+ PerfTestRunner.measureTime(createShapeOutsideTest(properties, 1000));
</ins><span class="cx"> </script>
</span><span class="cx"> </body>
</span><span class="cx"> </html>
</span></span></pre></div>
<a id="trunkPerformanceTestsLayoutShapesShapeOutsideSimplePolygonhtml"></a>
<div class="modfile"><h4>Modified: trunk/PerformanceTests/Layout/Shapes/ShapeOutsideSimplePolygon.html (164077 => 164078)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/PerformanceTests/Layout/Shapes/ShapeOutsideSimplePolygon.html 2014-02-14 01:06:53 UTC (rev 164077)
+++ trunk/PerformanceTests/Layout/Shapes/ShapeOutsideSimplePolygon.html 2014-02-14 01:17:14 UTC (rev 164078)
</span><span class="lines">@@ -8,8 +8,12 @@
</span><span class="cx"> <body>
</span><span class="cx"> <pre id="log"></pre>
</span><span class="cx"> <script>
</span><del>- var shape = "polygon(0 0, 200px 100px, 0px 200px)";
- PerfTestRunner.measureTime(createShapeOutsideTest("200px", "200px", shape, 1000));
</del><ins>+ var properties = {
+ width: "200px",
+ height: "200px",
+ webkitShapeOutside: "polygon(0 0, 200px 100px, 0px 200px)"
+ };
+ PerfTestRunner.measureTime(createShapeOutsideTest(properties, 1000));
</ins><span class="cx"> </script>
</span><span class="cx"> </body>
</span><span class="cx"> </html>
</span></span></pre></div>
<a id="trunkPerformanceTestsLayoutShapesresourcesshapesjs"></a>
<div class="modfile"><h4>Modified: trunk/PerformanceTests/Layout/Shapes/resources/shapes.js (164077 => 164078)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/PerformanceTests/Layout/Shapes/resources/shapes.js 2014-02-14 01:06:53 UTC (rev 164077)
+++ trunk/PerformanceTests/Layout/Shapes/resources/shapes.js 2014-02-14 01:17:14 UTC (rev 164078)
</span><span class="lines">@@ -22,16 +22,16 @@
</span><span class="cx"> return paragraph;
</span><span class="cx"> }
</span><span class="cx">
</span><del>- function createFloatingNode(width, height, shape) {
</del><ins>+ function createFloatingNode(properties) {
</ins><span class="cx"> if (!templateFloatingNode) {
</span><span class="cx"> templateFloatingNode = document.createElement("div");
</span><span class="cx"> templateFloatingNode.className = "floatingObject";
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> var float = templateFloatingNode.cloneNode(false);
</span><del>- float.style.width = width;
- float.style.height = height;
- float.style.webkitShapeOutside = shape;
</del><ins>+ for (prop in properties) {
+ float.style[prop] = properties[prop];
+ }
</ins><span class="cx"> return float;
</span><span class="cx"> }
</span><span class="cx">
</span><span class="lines">@@ -41,10 +41,10 @@
</span><span class="cx"> }
</span><span class="cx"> }
</span><span class="cx">
</span><del>- function createFloatingObjects(width, height, shape, floatingObjectCount) {
</del><ins>+ function createFloatingObjects(properties, floatingObjectCount) {
</ins><span class="cx"> var testBox = document.createElement("div");
</span><span class="cx"> for (var i = 0; i < floatingObjectCount; ++i) {
</span><del>- testBox.appendChild(createFloatingNode(width, height, shape));
</del><ins>+ testBox.appendChild(createFloatingNode(properties));
</ins><span class="cx"> testBox.appendChild(createParagraphNode())
</span><span class="cx"> }
</span><span class="cx"> testBox.className = "testBox";
</span><span class="lines">@@ -58,13 +58,13 @@
</span><span class="cx"> }
</span><span class="cx"> }
</span><span class="cx">
</span><del>- function createShapeOutsideTest(width, height, shape, shapeObjectCount) {
</del><ins>+ function createShapeOutsideTest(properties, shapeObjectCount) {
</ins><span class="cx"> shapeObjectCount = shapeObjectCount || DEFAULT_SHAPE_OBJECT_COUNT;
</span><span class="cx">
</span><del>- var floatingObjects = createFloatingObjects(width, height, shape, shapeObjectCount);
</del><ins>+ var floatingObjects = createFloatingObjects(properties, shapeObjectCount);
</ins><span class="cx"> document.body.appendChild(floatingObjects);
</span><span class="cx"> return {
</span><del>- description: "Testing shapes with " + shape +" using " + shapeObjectCount + " shapes.",
</del><ins>+ description: "Testing shapes with " + properties['webkitShapeOutside'] +" using " + shapeObjectCount + " shapes.",
</ins><span class="cx"> run: function() {
</span><span class="cx"> applyFloating();
</span><span class="cx"> document.body.offsetTop;
</span></span></pre>
</div>
</div>
</body>
</html>