<!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>[198509] 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/198509">198509</a></dd>
<dt>Author</dt> <dd>jonlee@apple.com</dd>
<dt>Date</dt> <dd>2016-03-21 17:30:44 -0700 (Mon, 21 Mar 2016)</dd>
</dl>

<h3>Log Message</h3>
<pre>Update benchmark tests
https://bugs.webkit.org/show_bug.cgi?id=155723

Reviewed by Darin Adler.
Provisionally reviewed by Said Abou-Hallawa.

Add quadratic and bezier segments to the canvas path test.

* Animometer/resources/runner/tests.js: Some of the query strings are unnecessary.
Rename the test.
* Animometer/tests/master/resources/canvas-stage.js:
(tune): Update to be able to take an array of possible constructors. Choose one randomly.
* Animometer/tests/master/resources/canvas-tests.js:
(CanvasLinePoint.Utilities.createClass): Move the point selection out to a separate
function called randomPoint() for reuse. Move X_LOOPS, Y_LOOPS, and offsets into the
class definition.
(randomPoint): Scale the grid down a little bit so that the lines along the edge of the
canvas are not cut off when the stroke size is thick.
(CanvasQuadraticSegment): Added.
(CanvasBezierSegment): Added.
(SimpleCanvasStage): Pass in an array of the different segment types. Since line segments
are short compared to the curved ones, make it twice as likely to render a line segment.
(SimpleCanvasStage.animate): Update the drawing code so that we render all line segments.

Add a helper method that selects a random element from an array.

* Animometer/tests/resources/main.js:
(Stage.randomElementInArray): Select a random element from the provided array.

* Animometer/tests/bouncing-particles/resources/bouncing-tagged-images.js: Refactor.
* Animometer/tests/dom/resources/leaves.js: Ditto.
* Animometer/tests/master/resources/dom-particles.js: Ditto.
* Animometer/tests/master/resources/image-data.js: Ditto.
* Animometer/tests/master/resources/leaves.js: Ditto.
* Animometer/tests/simple/resources/simple-canvas-paths.js: Ditto.

Add canvas tests that includes all stroke and fill paths. This makes it possible to avoid having to
include the full simple canvas suite for perf testing.

* Animometer/resources/debug-runner/tests.js: Add new tests. Move the canvas test into the Canvas
suite.
* Animometer/tests/simple/resources/simple-canvas-paths.js: Add a CanvasStroke and CanvasFill particle
that random selects an object to render.

* Animometer/resources/debug-runner/tests.js: Move 3D suite before basic canvas suite.
When updating the perf bot script, we will include the suites up to this one, but exclude
the basic canvas suite.

Move compositing transforms test to HTML suite and remove the empty Miscellaneous suite.

* Animometer/resources/debug-runner/tests.js:
* Animometer/tests/dom/compositing-transforms.html: Renamed from PerformanceTests/Animometer/tests/misc/compositing-transforms.html.
* Animometer/tests/dom/resources/compositing-transforms.js: Renamed from PerformanceTests/Animometer/tests/misc/resources/compositing-transforms.js.

Clean up miscellaneous test suite. Add a canvas ellipse test, and remove the other
canvas tests.

* Animometer/resources/debug-runner/tests.js: Add ellipse tests to the simple suite.
* Animometer/tests/misc/canvas-electrons.html: Removed.
* Animometer/tests/misc/canvas-stars.html: Removed.
* Animometer/tests/misc/resources/canvas-electrons.js: Removed.
* Animometer/tests/misc/resources/canvas-stars.js: Removed.
* Animometer/tests/simple/resources/simple-canvas-paths.js: Add ellipse primitives.

Merge text tests together into one.

* Animometer/resources/runner/tests.js: Remove international.html.
* Animometer/tests/master/international.html: Removed.
* Animometer/tests/master/resources/text.js:
(animate): Update styling. Manually calculate gradients for the shadow particles.
Reduce the step size for y direction to avoid cutting text off at the margins. Increase
step for x since there will be a little more room.
* Animometer/tests/master/text.html: Add more translations and lay it out in a table.</pre>

<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkPerformanceTestsAnimometerresourcesdebugrunnertestsjs">trunk/PerformanceTests/Animometer/resources/debug-runner/tests.js</a></li>
<li><a href="#trunkPerformanceTestsAnimometerresourcesrunnertestsjs">trunk/PerformanceTests/Animometer/resources/runner/tests.js</a></li>
<li><a href="#trunkPerformanceTestsAnimometertestsbouncingparticlesresourcesbouncingtaggedimagesjs">trunk/PerformanceTests/Animometer/tests/bouncing-particles/resources/bouncing-tagged-images.js</a></li>
<li><a href="#trunkPerformanceTestsAnimometertestsdomresourcesleavesjs">trunk/PerformanceTests/Animometer/tests/dom/resources/leaves.js</a></li>
<li><a href="#trunkPerformanceTestsAnimometertestsmasterresourcescanvasstagejs">trunk/PerformanceTests/Animometer/tests/master/resources/canvas-stage.js</a></li>
<li><a href="#trunkPerformanceTestsAnimometertestsmasterresourcescanvastestsjs">trunk/PerformanceTests/Animometer/tests/master/resources/canvas-tests.js</a></li>
<li><a href="#trunkPerformanceTestsAnimometertestsmasterresourcesdomparticlesjs">trunk/PerformanceTests/Animometer/tests/master/resources/dom-particles.js</a></li>
<li><a href="#trunkPerformanceTestsAnimometertestsmasterresourcesimagedatajs">trunk/PerformanceTests/Animometer/tests/master/resources/image-data.js</a></li>
<li><a href="#trunkPerformanceTestsAnimometertestsmasterresourcesleavesjs">trunk/PerformanceTests/Animometer/tests/master/resources/leaves.js</a></li>
<li><a href="#trunkPerformanceTestsAnimometertestsmasterresourcestextjs">trunk/PerformanceTests/Animometer/tests/master/resources/text.js</a></li>
<li><a href="#trunkPerformanceTestsAnimometertestsmastertexthtml">trunk/PerformanceTests/Animometer/tests/master/text.html</a></li>
<li><a href="#trunkPerformanceTestsAnimometertestsresourcesmainjs">trunk/PerformanceTests/Animometer/tests/resources/main.js</a></li>
<li><a href="#trunkPerformanceTestsAnimometertestssimpleresourcessimplecanvaspathsjs">trunk/PerformanceTests/Animometer/tests/simple/resources/simple-canvas-paths.js</a></li>
<li><a href="#trunkPerformanceTestsChangeLog">trunk/PerformanceTests/ChangeLog</a></li>
</ul>

<h3>Added Paths</h3>
<ul>
<li><a href="#trunkPerformanceTestsAnimometertestsdomcompositingtransformshtml">trunk/PerformanceTests/Animometer/tests/dom/compositing-transforms.html</a></li>
<li><a href="#trunkPerformanceTestsAnimometertestsdomresourcescompositingtransformsjs">trunk/PerformanceTests/Animometer/tests/dom/resources/compositing-transforms.js</a></li>
</ul>

<h3>Removed Paths</h3>
<ul>
<li><a href="#trunkPerformanceTestsAnimometertestsmasterinternationalhtml">trunk/PerformanceTests/Animometer/tests/master/international.html</a></li>
<li>trunk/PerformanceTests/Animometer/tests/misc/</li>
</ul>

</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkPerformanceTestsAnimometerresourcesdebugrunnertestsjs"></a>
<div class="modfile"><h4>Modified: trunk/PerformanceTests/Animometer/resources/debug-runner/tests.js (198508 => 198509)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/PerformanceTests/Animometer/resources/debug-runner/tests.js        2016-03-22 00:22:14 UTC (rev 198508)
+++ trunk/PerformanceTests/Animometer/resources/debug-runner/tests.js        2016-03-22 00:30:44 UTC (rev 198509)
</span><span class="lines">@@ -168,6 +168,10 @@
</span><span class="cx">         {
</span><span class="cx">             url: &quot;dom/leaves.html&quot;,
</span><span class="cx">             name: &quot;Leaves 2.0&quot;
</span><ins>+        },
+        {
+            url: &quot;dom/compositing-transforms.html?particleWidth=50&amp;particleHeight=50&amp;filters=yes&amp;imageSrc=../resources/yin-yang.svg&quot;,
+            name: &quot;Composited Transforms&quot;
</ins><span class="cx">         }
</span><span class="cx">     ]
</span><span class="cx"> ));
</span><span class="lines">@@ -175,10 +179,6 @@
</span><span class="cx"> Suites.push(new Suite(&quot;Canvas suite&quot;,
</span><span class="cx">     [
</span><span class="cx">         {
</span><del>-            url: &quot;bouncing-particles/bouncing-canvas-shapes.html?particleWidth=12&amp;particleHeight=12&amp;shape=circle&quot;,
-            name: &quot;canvas bouncing circles&quot;
-        },
-        {
</del><span class="cx">             url: &quot;bouncing-particles/bouncing-canvas-shapes.html?particleWidth=40&amp;particleHeight=40&amp;shape=rect&amp;clip=star&quot;,
</span><span class="cx">             name: &quot;canvas bouncing clipped rects&quot;
</span><span class="cx">         },
</span><span class="lines">@@ -194,6 +194,18 @@
</span><span class="cx">             url: &quot;bouncing-particles/bouncing-canvas-images.html?particleWidth=80&amp;particleHeight=80&amp;imageSrc=../resources/yin-yang.png&quot;,
</span><span class="cx">             name: &quot;canvas bouncing PNG images&quot;
</span><span class="cx">         },
</span><ins>+        {
+            url: &quot;simple/simple-canvas-paths.html?pathType=strokes&quot;,
+            name: &quot;Stroke shapes&quot;
+        },
+        {
+            url: &quot;simple/simple-canvas-paths.html?pathType=fills&quot;,
+            name: &quot;Fill shapes&quot;
+        },
+        {
+            url: &quot;simple/tiled-canvas-image.html&quot;,
+            name: &quot;Canvas put/get image data&quot;
+        },
</ins><span class="cx">     ]
</span><span class="cx"> ));
</span><span class="cx"> 
</span><span class="lines">@@ -222,6 +234,15 @@
</span><span class="cx">     ]
</span><span class="cx"> ));
</span><span class="cx"> 
</span><ins>+Suites.push(new Suite(&quot;3D Graphics&quot;,
+    [
+        {
+            url: &quot;3d/webgl.html&quot;,
+            name: &quot;WebGL&quot;
+        },
+    ]
+));
+
</ins><span class="cx"> Suites.push(new Suite(&quot;Basic canvas path suite&quot;,
</span><span class="cx">     [
</span><span class="cx">         {
</span><span class="lines">@@ -281,6 +302,10 @@
</span><span class="cx">             name: &quot;Canvas rects&quot;
</span><span class="cx">         },
</span><span class="cx">         {
</span><ins>+            url: &quot;simple/simple-canvas-paths.html?pathType=ellipse&quot;,
+            name: &quot;Canvas ellipses&quot;
+        },
+        {
</ins><span class="cx">             url: &quot;simple/simple-canvas-paths.html?pathType=lineFill&quot;,
</span><span class="cx">             name: &quot;Canvas line path, fill&quot;
</span><span class="cx">         },
</span><span class="lines">@@ -305,34 +330,8 @@
</span><span class="cx">             name: &quot;Canvas rects, fill&quot;
</span><span class="cx">         },
</span><span class="cx">         {
</span><del>-            url: &quot;simple/tiled-canvas-image.html&quot;,
-            name: &quot;Canvas put/get image data&quot;
-        },
</del><ins>+            url: &quot;simple/simple-canvas-paths.html?pathType=ellipseFill&quot;,
+            name: &quot;Canvas ellipses, fill&quot;
+        }
</ins><span class="cx">     ]
</span><span class="cx"> ));
</span><del>-
-Suites.push(new Suite(&quot;3D Graphics&quot;,
-    [
-        {
-            url: &quot;3d/webgl.html&quot;,
-            name: &quot;WebGL&quot;
-        },
-    ]
-));
-
-Suites.push(new Suite(&quot;Miscellaneous Tests&quot;,
-    [
-        {
-            url: &quot;misc/compositing-transforms.html?particleWidth=50&amp;particleHeight=50&amp;filters=yes&amp;imageSrc=../resources/yin-yang.svg&quot;,
-            name: &quot;Composited Transforms&quot;
-        },
-        {
-            url: &quot;misc/canvas-electrons.html&quot;,
-            name: &quot;Canvas electrons&quot;
-        },
-        {
-            url: &quot;misc/canvas-stars.html&quot;,
-            name: &quot;Canvas stars&quot;
-        },
-    ]
-));
</del></span></pre></div>
<a id="trunkPerformanceTestsAnimometerresourcesrunnertestsjs"></a>
<div class="modfile"><h4>Modified: trunk/PerformanceTests/Animometer/resources/runner/tests.js (198508 => 198509)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/PerformanceTests/Animometer/resources/runner/tests.js        2016-03-22 00:22:14 UTC (rev 198508)
+++ trunk/PerformanceTests/Animometer/resources/runner/tests.js        2016-03-22 00:30:44 UTC (rev 198509)
</span><span class="lines">@@ -25,18 +25,14 @@
</span><span class="cx">             name: &quot;Leaves&quot;
</span><span class="cx">         },
</span><span class="cx">         {
</span><del>-            url: &quot;master/canvas-stage.html?pathType=linePath&amp;lineJoin=round&amp;lineCap=round&quot;,
-            name: &quot;Canvas line path, round join&quot;
</del><ins>+            url: &quot;master/canvas-stage.html?pathType=linePath&quot;,
+            name: &quot;Paths&quot;
</ins><span class="cx">         },
</span><span class="cx">         {
</span><span class="cx">             url: &quot;master/canvas-stage.html?pathType=line&amp;lineCap=square&quot;,
</span><span class="cx">             name: &quot;Canvas line segments&quot;
</span><span class="cx">         },
</span><span class="cx">         {
</span><del>-            url: &quot;master/text.html&quot;,
-            name: &quot;A to Z&quot;
-        },
-        {
</del><span class="cx">             url: &quot;master/focus.html&quot;,
</span><span class="cx">             name: &quot;Focus&quot;
</span><span class="cx">         },
</span><span class="lines">@@ -45,7 +41,7 @@
</span><span class="cx">             name: &quot;Images&quot;
</span><span class="cx">         },
</span><span class="cx">         {
</span><del>-            url: &quot;master/international.html&quot;,
</del><ins>+            url: &quot;master/text.html&quot;,
</ins><span class="cx">             name: &quot;Design&quot;
</span><span class="cx">         },
</span><span class="cx">         {
</span></span></pre></div>
<a id="trunkPerformanceTestsAnimometertestsbouncingparticlesresourcesbouncingtaggedimagesjs"></a>
<div class="modfile"><h4>Modified: trunk/PerformanceTests/Animometer/tests/bouncing-particles/resources/bouncing-tagged-images.js (198508 => 198509)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/PerformanceTests/Animometer/tests/bouncing-particles/resources/bouncing-tagged-images.js        2016-03-22 00:22:14 UTC (rev 198508)
+++ trunk/PerformanceTests/Animometer/tests/bouncing-particles/resources/bouncing-tagged-images.js        2016-03-22 00:30:44 UTC (rev 198509)
</span><span class="lines">@@ -8,7 +8,7 @@
</span><span class="cx">         this.element = document.createElement(&quot;img&quot;);
</span><span class="cx">         this.element.style.width = this.size.x + &quot;px&quot;;
</span><span class="cx">         this.element.style.height = this.size.y + &quot;px&quot;;
</span><del>-        this.element.setAttribute(&quot;src&quot;, stage.images[Stage.randomInt(0, stage.images.length - 1)].src);
</del><ins>+        this.element.setAttribute(&quot;src&quot;, Stage.randomElementInArray(stage.images).src);
</ins><span class="cx"> 
</span><span class="cx">         stage.element.appendChild(this.element);
</span><span class="cx">         this._move();
</span></span></pre></div>
<a id="trunkPerformanceTestsAnimometertestsdomcompositingtransformshtmlfromrev198494trunkPerformanceTestsAnimometertestsmisccompositingtransformshtml"></a>
<div class="copfile"><h4>Copied: trunk/PerformanceTests/Animometer/tests/dom/compositing-transforms.html (from rev 198494, trunk/PerformanceTests/Animometer/tests/misc/compositing-transforms.html) (0 => 198509)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/PerformanceTests/Animometer/tests/dom/compositing-transforms.html                                (rev 0)
+++ trunk/PerformanceTests/Animometer/tests/dom/compositing-transforms.html        2016-03-22 00:30:44 UTC (rev 198509)
</span><span class="lines">@@ -0,0 +1,24 @@
</span><ins>+&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+    &lt;meta charset=&quot;utf-8&quot;&gt;
+    &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;../resources/stage.css&quot;&gt;
+    &lt;style&gt;
+        img {
+            position: absolute;
+            width: 80px;
+            height: 80px;
+        }
+    &lt;/style&gt;
+&lt;/head&gt;
+&lt;body&gt;
+    &lt;div id=&quot;stage&quot;&gt;&lt;/div&gt;
+    &lt;script src=&quot;../../resources/strings.js&quot;&gt;&lt;/script&gt;
+    &lt;script src=&quot;../../resources/extensions.js&quot;&gt;&lt;/script&gt;
+    &lt;script src=&quot;../../resources/statistics.js&quot;&gt;&lt;/script&gt;
+    &lt;script src=&quot;../resources/math.js&quot;&gt;&lt;/script&gt;
+    &lt;script src=&quot;../resources/main.js&quot;&gt;&lt;/script&gt;
+    &lt;script src=&quot;../bouncing-particles/resources/bouncing-particles.js&quot;&gt;&lt;/script&gt;
+    &lt;script src=&quot;resources/compositing-transforms.js&quot;&gt;&lt;/script&gt;
+&lt;/body&gt;
+&lt;/html&gt;
</ins></span></pre></div>
<a id="trunkPerformanceTestsAnimometertestsdomresourcescompositingtransformsjsfromrev198494trunkPerformanceTestsAnimometertestsmiscresourcescompositingtransformsjs"></a>
<div class="copfile"><h4>Copied: trunk/PerformanceTests/Animometer/tests/dom/resources/compositing-transforms.js (from rev 198494, trunk/PerformanceTests/Animometer/tests/misc/resources/compositing-transforms.js) (0 => 198509)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/PerformanceTests/Animometer/tests/dom/resources/compositing-transforms.js                                (rev 0)
+++ trunk/PerformanceTests/Animometer/tests/dom/resources/compositing-transforms.js        2016-03-22 00:30:44 UTC (rev 198509)
</span><span class="lines">@@ -0,0 +1,66 @@
</span><ins>+(function() {
+
+BouncingCompositedImage = Utilities.createSubclass(BouncingParticle,
+    function(stage)
+    {
+        BouncingParticle.call(this, stage);
+
+        this.element = document.createElement(&quot;img&quot;);
+        this.element.style.width = this.size.x + &quot;px&quot;;
+        this.element.style.height = this.size.y + &quot;px&quot;;
+        this.element.setAttribute(&quot;src&quot;, stage.imageSrc);
+
+        if (stage.useFilters)
+            this.element.style.filter = &quot;hue-rotate(&quot; + Stage.randomAngle() + &quot;rad)&quot;;
+
+        stage.element.appendChild(this.element);
+        this._move();
+    }, {
+
+    _move: function()
+    {
+        this.element.style.transform = &quot;translate3d(&quot; + this.position.x + &quot;px,&quot; + this.position.y + &quot;px, 0) &quot; + this.rotater.rotateZ();
+    },
+
+    animate: function(timeDelta)
+    {
+        BouncingParticle.prototype.animate.call(this, timeDelta);
+        this._move();
+    }
+});
+
+CompositingTransformsStage = Utilities.createSubclass(BouncingParticlesStage,
+    function()
+    {
+        BouncingParticlesStage.call(this);
+    }, {
+
+    initialize: function(benchmark, options)
+    {
+        BouncingParticlesStage.prototype.initialize.call(this, benchmark, options);
+
+        this.imageSrc = options[&quot;imageSrc&quot;] || &quot;../resources/yin-yang.svg&quot;;
+        this.useFilters = options[&quot;filters&quot;] == &quot;yes&quot;;
+    },
+
+    createParticle: function()
+    {
+        return new BouncingCompositedImage(this);
+    },
+
+    particleWillBeRemoved: function(particle)
+    {
+        particle.element.remove();
+    }
+});
+
+CompositedTransformsBenchmark = Utilities.createSubclass(Benchmark,
+    function(options)
+    {
+        Benchmark.call(this, new CompositingTransformsStage(), options);
+    }
+);
+
+window.benchmarkClass = CompositedTransformsBenchmark;
+
+})();
</ins></span></pre></div>
<a id="trunkPerformanceTestsAnimometertestsdomresourcesleavesjs"></a>
<div class="modfile"><h4>Modified: trunk/PerformanceTests/Animometer/tests/dom/resources/leaves.js (198508 => 198509)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/PerformanceTests/Animometer/tests/dom/resources/leaves.js        2016-03-22 00:22:14 UTC (rev 198508)
+++ trunk/PerformanceTests/Animometer/tests/dom/resources/leaves.js        2016-03-22 00:30:44 UTC (rev 198509)
</span><span class="lines">@@ -2,7 +2,7 @@
</span><span class="cx">     function(stage)
</span><span class="cx">     {
</span><span class="cx">         this.element = document.createElement(&quot;img&quot;);
</span><del>-        this.element.setAttribute(&quot;src&quot;, stage.images[Stage.randomInt(0, stage.images.length - 1)].src);
</del><ins>+        this.element.setAttribute(&quot;src&quot;, Stage.randomElementInArray(stage.images).src);
</ins><span class="cx">         stage.element.appendChild(this.element);
</span><span class="cx"> 
</span><span class="cx">         Particle.call(this, stage);
</span></span></pre></div>
<a id="trunkPerformanceTestsAnimometertestsmasterinternationalhtml"></a>
<div class="delfile"><h4>Deleted: trunk/PerformanceTests/Animometer/tests/master/international.html (198508 => 198509)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/PerformanceTests/Animometer/tests/master/international.html        2016-03-22 00:22:14 UTC (rev 198508)
+++ trunk/PerformanceTests/Animometer/tests/master/international.html        2016-03-22 00:30:44 UTC (rev 198509)
</span><span class="lines">@@ -1,40 +0,0 @@
</span><del>-&lt;!DOCTYPE html&gt;
-&lt;html&gt;
-&lt;head&gt;
-    &lt;meta charset=&quot;utf-8&quot;&gt;
-    &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;resources/stage.css&quot;&gt;
-    &lt;style type=&quot;text/css&quot;&gt;
-
-        #stage {
-            font-family: Helvetica;
-            font-size: 48px;
-        }
-        #stage div {
-            width: 60%;
-            position: absolute;
-            text-align: center;
-        }
-        #template {
-            color: #111;
-        }
-    &lt;/style&gt;
-&lt;/head&gt;
-&lt;body&gt;
-    &lt;div id=&quot;stage&quot;&gt;
-        &lt;div id=&quot;template&quot;&gt;
-            &lt;p&gt;设计&lt;/p&gt;
-            &lt;p class=&quot;rtl&quot;&gt;تصميم&lt;/p&gt;
-            &lt;p&gt;дизайн&lt;/p&gt;
-            &lt;p&gt;デザイン&lt;/p&gt;
-            &lt;p class=&quot;rtl&quot;&gt;עיצוב&lt;/p&gt;
-            &lt;p&gt;디자인&lt;/p&gt;
-        &lt;/div&gt;
-    &lt;/div&gt;
-    &lt;script src=&quot;../../resources/strings.js&quot;&gt;&lt;/script&gt;
-    &lt;script src=&quot;../../resources/extensions.js&quot;&gt;&lt;/script&gt;
-    &lt;script src=&quot;../../resources/statistics.js&quot;&gt;&lt;/script&gt;
-    &lt;script src=&quot;../resources/math.js&quot;&gt;&lt;/script&gt;
-    &lt;script src=&quot;../resources/main.js&quot;&gt;&lt;/script&gt;
-    &lt;script src=&quot;resources/text.js&quot;&gt;&lt;/script&gt;
-&lt;/body&gt;
-&lt;/html&gt;
</del></span></pre></div>
<a id="trunkPerformanceTestsAnimometertestsmasterresourcescanvasstagejs"></a>
<div class="modfile"><h4>Modified: trunk/PerformanceTests/Animometer/tests/master/resources/canvas-stage.js (198508 => 198509)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/PerformanceTests/Animometer/tests/master/resources/canvas-stage.js        2016-03-22 00:22:14 UTC (rev 198508)
+++ trunk/PerformanceTests/Animometer/tests/master/resources/canvas-stage.js        2016-03-22 00:30:44 UTC (rev 198509)
</span><span class="lines">@@ -27,8 +27,12 @@
</span><span class="cx">         if (newIndex &lt; 0) {
</span><span class="cx">             this.offsetIndex = 0;
</span><span class="cx">             newIndex = -newIndex;
</span><del>-            for (var i = 0; i &lt; newIndex; ++i)
-                this.objects.push(new this._canvasObject(this));
</del><ins>+            for (var i = 0; i &lt; newIndex; ++i) {
+                if (this._canvasObject.constructor === Array)
+                    this.objects.push(new (Stage.randomElementInArray(this._canvasObject))(this));
+                else
+                    this.objects.push(new this._canvasObject(this));
+            }
</ins><span class="cx">         } else
</span><span class="cx">             this.offsetIndex = newIndex;
</span><span class="cx">     },
</span></span></pre></div>
<a id="trunkPerformanceTestsAnimometertestsmasterresourcescanvastestsjs"></a>
<div class="modfile"><h4>Modified: trunk/PerformanceTests/Animometer/tests/master/resources/canvas-tests.js (198508 => 198509)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/PerformanceTests/Animometer/tests/master/resources/canvas-tests.js        2016-03-22 00:22:14 UTC (rev 198508)
+++ trunk/PerformanceTests/Animometer/tests/master/resources/canvas-tests.js        2016-03-22 00:30:44 UTC (rev 198509)
</span><span class="lines">@@ -81,44 +81,96 @@
</span><span class="cx"> // CanvasLinePoint contains no draw() method since it is either moveTo or
</span><span class="cx"> // lineTo depending on its index.
</span><span class="cx"> CanvasLinePoint = Utilities.createClass(
</span><del>-    function(stage, coordinateMaximum)
</del><ins>+    function(stage)
</ins><span class="cx">     {
</span><del>-        var X_LOOPS = 40;
-        var Y_LOOPS = 20;
</del><ins>+        var colors = [&quot;#101010&quot;, &quot;#808080&quot;, &quot;#c0c0c0&quot;, &quot;#101010&quot;, &quot;#808080&quot;, &quot;#c0c0c0&quot;, &quot;#e01040&quot;];
+        this.color = Stage.randomElementInArray(colors);
+        this.width = Math.pow(Pseudo.random(), 5) * 20 + 1;
+        this.isSplit = Pseudo.random() &gt; 0.95;
</ins><span class="cx"> 
</span><del>-        var offsets = [[-2, -1], [2, 1], [-1, 0], [1, 0], [-1, 2], [1, -2]];
-        var offset = offsets[Math.floor(Pseudo.random() * offsets.length)];
</del><ins>+        var nextPoint;
+        if (stage.objects.length)
+            nextPoint = this.randomPoint(stage, stage.objects[stage.objects.length - 1].coordinate);
+        else
+            nextPoint = this.randomPoint(stage, this.gridSize.center);
+        this.point = nextPoint.point;
+        this.coordinate = nextPoint.coordinate;
+    }, {
</ins><span class="cx"> 
</span><del>-        this.coordinate = new Point(X_LOOPS/2, Y_LOOPS/2);
</del><ins>+    gridSize: new Point(80, 40),
+    offsets: [
+        new Point(-4, 0),
+        new Point(2, 0),
+        new Point(1, -2),
+        new Point(1, 2),
+    ],
+
+    randomPoint: function(stage, startCoordinate)
+    {
+        var coordinate = startCoordinate;
</ins><span class="cx">         if (stage.objects.length) {
</span><del>-            var head = stage.objects[stage.objects.length - 1].coordinate;
-            this.coordinate.x = head.x;
-            this.coordinate.y = head.y;
</del><ins>+            var offset = Stage.randomElementInArray(this.offsets);
+
+            coordinate = coordinate.add(offset);
+            if (coordinate.x &lt; 0 || coordinate.x &gt; this.gridSize.width)
+                coordinate.x -= offset.x * 2;
+            if (coordinate.y &lt; 0 || coordinate.y &gt; this.gridSize.height)
+                coordinate.y -= offset.y * 2;
</ins><span class="cx">         }
</span><span class="cx"> 
</span><del>-        var nextCoordinate = this.coordinate.x + offset[0];
-        if (nextCoordinate &lt; 0 || nextCoordinate &gt; X_LOOPS)
-            this.coordinate.x -= offset[0];
-        else
-            this.coordinate.x = nextCoordinate;
-        nextCoordinate = this.coordinate.y + offset[1];
-        if (nextCoordinate &lt; 0 || nextCoordinate &gt; Y_LOOPS)
-            this.coordinate.y -= offset[1];
-        else
-            this.coordinate.y = nextCoordinate;
</del><ins>+        var x = (coordinate.x + .5) * stage.size.x / (this.gridSize.width + 1);
+        var y = (coordinate.y + .5) * stage.size.y / (this.gridSize.height + 1);
+        return {
+            point: new Point(x, y),
+            coordinate: coordinate
+        };
+    },
</ins><span class="cx"> 
</span><del>-        var xOff = .25 * (this.coordinate.y % 2);
-        var randX = (xOff + this.coordinate.x) * stage.size.x / X_LOOPS;
-        var randY = this.coordinate.y * stage.size.y / Y_LOOPS;
-        var colors = [&quot;#101010&quot;, &quot;#808080&quot;, &quot;#c0c0c0&quot;, &quot;#101010&quot;, &quot;#808080&quot;, &quot;#c0c0c0&quot;, &quot;#e01040&quot;];
-        this.color = colors[Math.floor(Pseudo.random() * colors.length)];
</del><ins>+    draw: function(context)
+    {
+        context.lineTo(this.point.x, this.point.y);
+    }
+});
</ins><span class="cx"> 
</span><del>-        this.width = Math.pow(Pseudo.random(), 5) * 20 + 1;
-        this.isSplit = Pseudo.random() &gt; 0.9;
-        this.point = new Point(randX, randY);
</del><ins>+CanvasQuadraticSegment = Utilities.createSubclass(CanvasLinePoint,
+    function(stage)
+    {
+        CanvasLinePoint.call(this, stage);
+        // The chosen point is instead the control point.
+        this._point2 = this.point;
+
+        // Get another random point for the actual end point of the segment.
+        var nextPoint = this.randomPoint(stage, this.coordinate);
+        this.point = nextPoint.point;
+        this.coordinate = nextPoint.coordinate;
+    }, {
+
+    draw: function(context)
+    {
+        context.quadraticCurveTo(this._point2.x, this._point2.y, this.point.x, this.point.y);
</ins><span class="cx">     }
</span><del>-);
</del><ins>+});
</ins><span class="cx"> 
</span><ins>+CanvasBezierSegment = Utilities.createSubclass(CanvasLinePoint,
+    function(stage)
+    {
+        CanvasLinePoint.call(this, stage);
+        // The chosen point is instead the first control point.
+        this._point2 = this.point;
+        var nextPoint = this.randomPoint(stage, this.coordinate);
+        this._point3 = nextPoint.point;
+
+        nextPoint = this.randomPoint(stage, nextPoint.coordinate);
+        this.point = nextPoint.point;
+        this.coordinate = nextPoint.coordinate;
+    }, {
+
+    draw: function(context, off)
+    {
+        context.bezierCurveTo(this._point2.x, this._point2.y, this._point3.x, this._point3.y, this.point.x, this.point.y);
+    }
+});
+
</ins><span class="cx"> // === STAGES ===
</span><span class="cx"> 
</span><span class="cx"> CanvasLineSegmentStage = Utilities.createSubclass(SimpleCanvasStage,
</span><span class="lines">@@ -190,7 +242,7 @@
</span><span class="cx"> CanvasLinePathStage = Utilities.createSubclass(SimpleCanvasStage,
</span><span class="cx">     function()
</span><span class="cx">     {
</span><del>-        SimpleCanvasStage.call(this, CanvasLinePoint);
</del><ins>+        SimpleCanvasStage.call(this, [CanvasLinePoint, CanvasLinePoint, CanvasQuadraticSegment, CanvasBezierSegment]);
</ins><span class="cx">     }, {
</span><span class="cx"> 
</span><span class="cx">     initialize: function(benchmark, options)
</span><span class="lines">@@ -210,19 +262,21 @@
</span><span class="cx">             if (i == this.offsetIndex) {
</span><span class="cx">                 context.lineWidth = object.width;
</span><span class="cx">                 context.strokeStyle = object.color;
</span><ins>+                context.beginPath();
</ins><span class="cx">                 context.moveTo(object.point.x, object.point.y);
</span><span class="cx">             } else {
</span><ins>+                object.draw(context);
+
</ins><span class="cx">                 if (object.isSplit) {
</span><span class="cx">                     context.stroke();
</span><span class="cx"> 
</span><span class="cx">                     context.lineWidth = object.width;
</span><span class="cx">                     context.strokeStyle = object.color;
</span><span class="cx">                     context.beginPath();
</span><ins>+                    context.moveTo(object.point.x, object.point.y);
</ins><span class="cx">                 }
</span><span class="cx"> 
</span><del>-                context.lineTo(object.point.x, object.point.y);
-
-                if (Pseudo.random() &gt; 0.999)
</del><ins>+                if (Pseudo.random() &gt; 0.995)
</ins><span class="cx">                     object.isSplit = !object.isSplit;
</span><span class="cx">             }
</span><span class="cx">         }
</span></span></pre></div>
<a id="trunkPerformanceTestsAnimometertestsmasterresourcesdomparticlesjs"></a>
<div class="modfile"><h4>Modified: trunk/PerformanceTests/Animometer/tests/master/resources/dom-particles.js (198508 => 198509)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/PerformanceTests/Animometer/tests/master/resources/dom-particles.js        2016-03-22 00:22:14 UTC (rev 198508)
+++ trunk/PerformanceTests/Animometer/tests/master/resources/dom-particles.js        2016-03-22 00:30:44 UTC (rev 198509)
</span><span class="lines">@@ -13,7 +13,7 @@
</span><span class="cx">     {
</span><span class="cx">         Particle.prototype.reset.call(this);
</span><span class="cx"> 
</span><del>-        var emitLocation = this.stage.emitLocation[Stage.randomInt(0, this.stage.emitLocation.length - 1)];
</del><ins>+        var emitLocation = Stage.randomElementInArray(this.stage.emitLocation);
</ins><span class="cx">         this.position = new Point(emitLocation.x, emitLocation.y);
</span><span class="cx"> 
</span><span class="cx">         var angle = Stage.randomInt(0, this.stage.emitSteps) / this.stage.emitSteps * Math.PI * 2 + Stage.dateCounterValue(100) * this.stage.emissionSpin;
</span></span></pre></div>
<a id="trunkPerformanceTestsAnimometertestsmasterresourcesimagedatajs"></a>
<div class="modfile"><h4>Modified: trunk/PerformanceTests/Animometer/tests/master/resources/image-data.js (198508 => 198509)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/PerformanceTests/Animometer/tests/master/resources/image-data.js        2016-03-22 00:22:14 UTC (rev 198508)
+++ trunk/PerformanceTests/Animometer/tests/master/resources/image-data.js        2016-03-22 00:30:44 UTC (rev 198509)
</span><span class="lines">@@ -146,7 +146,7 @@
</span><span class="cx">                 context.putImageData(imageData, 0, 0);
</span><span class="cx">             else {
</span><span class="cx">                 this._refreshElement(element);
</span><del>-                element.getContext(&quot;2d&quot;).drawImage(this.images[Stage.randomInt(0, this.images.length - 1)], 0, 0, this.imageWidth, this.imageHeight);
</del><ins>+                element.getContext(&quot;2d&quot;).drawImage(Stage.randomElementInArray(this.images), 0, 0, this.imageWidth, this.imageHeight);
</ins><span class="cx">             }
</span><span class="cx">         }
</span><span class="cx">     },
</span></span></pre></div>
<a id="trunkPerformanceTestsAnimometertestsmasterresourcesleavesjs"></a>
<div class="modfile"><h4>Modified: trunk/PerformanceTests/Animometer/tests/master/resources/leaves.js (198508 => 198509)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/PerformanceTests/Animometer/tests/master/resources/leaves.js        2016-03-22 00:22:14 UTC (rev 198508)
+++ trunk/PerformanceTests/Animometer/tests/master/resources/leaves.js        2016-03-22 00:30:44 UTC (rev 198509)
</span><span class="lines">@@ -2,7 +2,7 @@
</span><span class="cx">     function(stage)
</span><span class="cx">     {
</span><span class="cx">         this.element = document.createElement(&quot;img&quot;);
</span><del>-        this.element.setAttribute(&quot;src&quot;, stage.images[Stage.randomInt(0, stage.images.length - 1)].src);
</del><ins>+        this.element.setAttribute(&quot;src&quot;, Stage.randomElementInArray(stage.images).src);
</ins><span class="cx">         var sizeString = this.sizeMinimum + &quot;px&quot;;
</span><span class="cx">         this.element.style.width = sizeString;
</span><span class="cx">         this.element.style.height = sizeString;
</span></span></pre></div>
<a id="trunkPerformanceTestsAnimometertestsmasterresourcestextjs"></a>
<div class="modfile"><h4>Modified: trunk/PerformanceTests/Animometer/tests/master/resources/text.js (198508 => 198509)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/PerformanceTests/Animometer/tests/master/resources/text.js        2016-03-22 00:22:14 UTC (rev 198508)
+++ trunk/PerformanceTests/Animometer/tests/master/resources/text.js        2016-03-22 00:30:44 UTC (rev 198509)
</span><span class="lines">@@ -10,12 +10,20 @@
</span><span class="cx">     }, {
</span><span class="cx"> 
</span><span class="cx">     shadowFalloff: new UnitBezier(new Point(0.015, 0.750), new Point(0.755, 0.235)),
</span><del>-    shimmerAverage: 0.4,
</del><ins>+    shimmerAverage: 0,
</ins><span class="cx">     shimmerMax: 0.5,
</span><span class="cx">     millisecondsPerRotation: 1000 / (.26 * Math.PI * 2),
</span><del>-    particleDistance: 1,
</del><ins>+    particleDistanceX: 1.5,
+    particleDistanceY: .5,
</ins><span class="cx">     lightnessMin: 13,
</span><span class="cx">     lightnessMax: 94,
</span><ins>+    gradients: [
+        [10, 176, 176, 209, 148, 140],
+        [171, 120, 154, 245, 196, 154],
+        [224, 99, 99, 71, 134, 148],
+        [101, 100, 117, 80, 230, 175],
+        [232, 165, 30, 69, 186, 172]
+    ],
</ins><span class="cx"> 
</span><span class="cx">     initialize: function(benchmark)
</span><span class="cx">     {
</span><span class="lines">@@ -66,21 +74,24 @@
</span><span class="cx">         var x = 0;
</span><span class="cx">         var y = 0;
</span><span class="cx">         var progress = 0;
</span><del>-        var stepX = Math.sin(angle) * this.particleDistance;
-        var stepY = Math.cos(angle) * this.particleDistance;
</del><ins>+        var stepX = Math.sin(angle) * this.particleDistanceX;
+        var stepY = Math.cos(angle) * this.particleDistanceY;
+        var gradient = this.gradients[Math.floor(angle/(Math.PI * 2)) % this.gradients.length];
+        var offset = Stage.dateCounterValue(200);
</ins><span class="cx">         for (var i = 0; i &lt; this._offsetIndex; ++i) {
</span><del>-            x += stepX;
-            y += stepY;
-
</del><span class="cx">             var element = this.testElements[i];
</span><span class="cx"> 
</span><span class="cx">             var colorProgress = this.shadowFalloff.solve(progress);
</span><del>-            var shimmer = Math.sin(Stage.dateCounterValue(100) - colorProgress);
-            colorProgress += Utilities.lerp(shimmer, this.shimmerAverage, this.shimmerMax);
-            var interpolatedLightness = Math.round(Utilities.lerp(Math.max(Math.min(colorProgress, 1), 0), this.lightnessMin, this.lightnessMax));
</del><ins>+            var shimmer = Math.sin(offset - colorProgress);
+            colorProgress = Math.max(Math.min(colorProgress + Utilities.lerp(shimmer, this.shimmerAverage, this.shimmerMax), 1), 0);
+            var r = Math.round(Utilities.lerp(colorProgress, gradient[0], gradient[3]));
+            var g = Math.round(Utilities.lerp(colorProgress, gradient[1], gradient[4]));
+            var b = Math.round(Utilities.lerp(colorProgress, gradient[2], gradient[5]));
+            element.style.color = &quot;rgb(&quot; + r + &quot;,&quot; + g + &quot;,&quot; + b + &quot;)&quot;;
</ins><span class="cx"> 
</span><del>-            element.style.color = &quot;hsl(0,0%,&quot; + interpolatedLightness + &quot;%)&quot;;
-            element.style.transform = &quot;translateX(&quot; + Math.floor(y) + &quot;px) translateY(&quot; + Math.floor(x) + &quot;px)&quot;;
</del><ins>+            x += stepX;
+            y += stepY;
+            element.style.transform = &quot;translateX(&quot; + Math.floor(x) + &quot;px) translateY(&quot; + Math.floor(y) + &quot;px)&quot;;
</ins><span class="cx"> 
</span><span class="cx">             progress += this._stepProgress;
</span><span class="cx">         }
</span></span></pre></div>
<a id="trunkPerformanceTestsAnimometertestsmastertexthtml"></a>
<div class="modfile"><h4>Modified: trunk/PerformanceTests/Animometer/tests/master/text.html (198508 => 198509)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/PerformanceTests/Animometer/tests/master/text.html        2016-03-22 00:22:14 UTC (rev 198508)
+++ trunk/PerformanceTests/Animometer/tests/master/text.html        2016-03-22 00:30:44 UTC (rev 198509)
</span><span class="lines">@@ -8,20 +8,57 @@
</span><span class="cx">         #stage {
</span><span class="cx">             font-family: Helvetica;
</span><span class="cx">             font-size: 48px;
</span><ins>+            background-color: #313534;/* #d1948c;*/
</ins><span class="cx">         }
</span><span class="cx">         #stage div {
</span><del>-            width: 21em;
</del><ins>+            width: 80%;
+            height: 90%;
</ins><span class="cx">             position: absolute;
</span><ins>+            text-align: center;
</ins><span class="cx">         }
</span><span class="cx">         #template {
</span><del>-            color: #111;
</del><ins>+            color: #FCFCFC;
</ins><span class="cx">         }
</span><ins>+        table {
+            position: relative;
+            width: 100%;
+            height: 100%;
+        }
+        td {
+            width: 33%;
+        }
+        tr {
+            height: 20%;
+        }
</ins><span class="cx">     &lt;/style&gt;
</span><span class="cx"> &lt;/head&gt;
</span><span class="cx"> &lt;body&gt;
</span><span class="cx">     &lt;div id=&quot;stage&quot;&gt;
</span><span class="cx">         &lt;div id=&quot;template&quot;&gt;
</span><del>-            Whenever the black fox jumped the squirrel gazed suspiciously. Amazingly few discotheques provide jukeboxes.
</del><ins>+            &lt;table&gt;
+                &lt;tbody&gt;
+                    &lt;tr&gt;
+                        &lt;td&gt;σχέδιο&lt;/td&gt;
+                        &lt;td&gt;设计&lt;/td&gt;
+                        &lt;td&gt;suunnittelu&lt;/td&gt;
+                    &lt;/tr&gt;
+                    &lt;tr&gt;
+                        &lt;td&gt;design&lt;/td&gt;
+                        &lt;td&gt;дизайн&lt;/td&gt;
+                        &lt;td class=&quot;rtl&quot;&gt;تصميم&lt;/td&gt;
+                    &lt;/tr&gt;
+                    &lt;tr&gt;
+                        &lt;td&gt;디자인&lt;/td&gt;
+                        &lt;td&gt;conception&lt;/td&gt;
+                        &lt;td&gt;デザイン&lt;/td&gt;
+                    &lt;/tr&gt;
+                    &lt;tr&gt;
+                        &lt;td&gt;konstruktion&lt;/td&gt;
+                        &lt;td class=&quot;rtl&quot;&gt;עיצוב&lt;/td&gt;
+                        &lt;td&gt;diseño&lt;/td&gt;
+                    &lt;/tr&gt;
+                &lt;/tbody&gt;
+            &lt;/table&gt;
</ins><span class="cx">         &lt;/div&gt;
</span><span class="cx">     &lt;/div&gt;
</span><span class="cx">     &lt;script src=&quot;../../resources/strings.js&quot;&gt;&lt;/script&gt;
</span></span></pre></div>
<a id="trunkPerformanceTestsAnimometertestsresourcesmainjs"></a>
<div class="modfile"><h4>Modified: trunk/PerformanceTests/Animometer/tests/resources/main.js (198508 => 198509)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/PerformanceTests/Animometer/tests/resources/main.js        2016-03-22 00:22:14 UTC (rev 198508)
+++ trunk/PerformanceTests/Animometer/tests/resources/main.js        2016-03-22 00:30:44 UTC (rev 198509)
</span><span class="lines">@@ -720,6 +720,11 @@
</span><span class="cx">         return filterList[this.randomInt(0, filterList.length)];
</span><span class="cx">     },
</span><span class="cx"> 
</span><ins>+    randomElementInArray: function(array)
+    {
+        return array[Stage.randomInt(0, array.length - 1)];
+    },
+
</ins><span class="cx">     rotatingColor: function(cycleLengthMs, saturation, lightness)
</span><span class="cx">     {
</span><span class="cx">         return &quot;hsl(&quot;
</span></span></pre></div>
<a id="trunkPerformanceTestsAnimometertestssimpleresourcessimplecanvaspathsjs"></a>
<div class="modfile"><h4>Modified: trunk/PerformanceTests/Animometer/tests/simple/resources/simple-canvas-paths.js (198508 => 198509)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/PerformanceTests/Animometer/tests/simple/resources/simple-canvas-paths.js        2016-03-22 00:22:14 UTC (rev 198508)
+++ trunk/PerformanceTests/Animometer/tests/simple/resources/simple-canvas-paths.js        2016-03-22 00:30:44 UTC (rev 198509)
</span><span class="lines">@@ -209,6 +209,78 @@
</span><span class="cx">     }
</span><span class="cx"> });
</span><span class="cx"> 
</span><ins>+CanvasEllipse = Utilities.createClass(
+    function(stage) {
+        this._radius = new Point(Stage.randomInt(20, 200), Stage.randomInt(20, 200));
+        var toCenter = Stage.randomPosition(stage.size).subtract(this._radius.multiply(.5));
+
+        this._center = Stage.randomPosition(this._radius).add(toCenter);
+        this._rotation = Stage.randomAngle();
+        this._startAngle = Stage.randomAngle();
+        this._endAngle = Stage.randomAngle();
+        this._anticlockwise = Stage.randomBool();
+        this._color = Stage.randomColor();
+        this._lineWidth = Stage.randomInt(1, 20);
+    }, {
+
+    draw: function(context) {
+        context.strokeStyle = this._color;
+        context.lineWidth = this._lineWidth;
+        context.beginPath();
+        context.ellipse(this._center.x, this._center.y, this._radius.width, this._radius.height, this._rotation, this._startAngle, this._endAngle, this._anticlockwise);
+        context.stroke();
+    }
+});
+
+CanvasEllipseFill = Utilities.createClass(
+    function(stage) {
+        CanvasEllipse.call(this, stage);
+    }, {
+
+    draw: function(context) {
+        context.fillStyle = this._color;
+        context.beginPath();
+        context.ellipse(this._center.x, this._center.y, this._radius.width, this._radius.height, this._rotation, this._startAngle, this._endAngle, this._anticlockwise);
+        context.fill();
+    }
+});
+
+CanvasStroke = Utilities.createClass(
+    function (stage) {
+        this._object = new (Stage.randomElementInArray(this.objectTypes))(stage);
+    }, {
+
+    objectTypes: [
+        CanvasQuadraticSegment,
+        CanvasBezierSegment,
+        CanvasArcToSegment,
+        CanvasArcSegment,
+        CanvasRect,
+        CanvasEllipse
+    ],
+
+    draw: function(context) {
+        this._object.draw(context);
+    }
+});
+
+CanvasFill = Utilities.createClass(
+    function (stage) {
+        this._object = new (Stage.randomElementInArray(this.objectTypes))(stage);
+    }, {
+
+    objectTypes: [
+        CanvasArcToSegmentFill,
+        CanvasArcSegmentFill,
+        CanvasRectFill,
+        CanvasEllipseFill
+    ],
+
+    draw: function(context) {
+        this._object.draw(context);
+    }
+});
+
</ins><span class="cx"> // === STAGES ===
</span><span class="cx"> 
</span><span class="cx"> SimpleCanvasPathStrokeStage = Utilities.createSubclass(SimpleCanvasStage,
</span><span class="lines">@@ -340,6 +412,9 @@
</span><span class="cx">         case &quot;rect&quot;:
</span><span class="cx">             stage = new SimpleCanvasStage(CanvasRect);
</span><span class="cx">             break;
</span><ins>+        case &quot;ellipse&quot;:
+            stage = new SimpleCanvasStage(CanvasEllipse);
+            break;
</ins><span class="cx">         case &quot;lineFill&quot;:
</span><span class="cx">             stage = new SimpleCanvasPathFillStage(CanvasLinePoint);
</span><span class="cx">             break;
</span><span class="lines">@@ -358,6 +433,15 @@
</span><span class="cx">         case &quot;rectFill&quot;:
</span><span class="cx">             stage = new SimpleCanvasStage(CanvasRectFill);
</span><span class="cx">             break;
</span><ins>+        case &quot;ellipseFill&quot;:
+            stage = new SimpleCanvasStage(CanvasEllipseFill);
+            break;
+        case &quot;strokes&quot;:
+            stage = new SimpleCanvasStage(CanvasStroke);
+            break;
+        case &quot;fills&quot;:
+            stage = new SimpleCanvasStage(CanvasFill);
+            break;
</ins><span class="cx">         }
</span><span class="cx"> 
</span><span class="cx">         Benchmark.call(this, stage, options);
</span></span></pre></div>
<a id="trunkPerformanceTestsChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/PerformanceTests/ChangeLog (198508 => 198509)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/PerformanceTests/ChangeLog        2016-03-22 00:22:14 UTC (rev 198508)
+++ trunk/PerformanceTests/ChangeLog        2016-03-22 00:30:44 UTC (rev 198509)
</span><span class="lines">@@ -1,3 +1,79 @@
</span><ins>+2016-03-21  Jon Lee  &lt;jonlee@apple.com&gt;
+
+        Update benchmark tests
+        https://bugs.webkit.org/show_bug.cgi?id=155723
+
+        Reviewed by Darin Adler.
+        Provisionally reviewed by Said Abou-Hallawa.
+
+        Add quadratic and bezier segments to the canvas path test.
+
+        * Animometer/resources/runner/tests.js: Some of the query strings are unnecessary.
+        Rename the test.
+        * Animometer/tests/master/resources/canvas-stage.js:
+        (tune): Update to be able to take an array of possible constructors. Choose one randomly.
+        * Animometer/tests/master/resources/canvas-tests.js:
+        (CanvasLinePoint.Utilities.createClass): Move the point selection out to a separate
+        function called randomPoint() for reuse. Move X_LOOPS, Y_LOOPS, and offsets into the
+        class definition.
+        (randomPoint): Scale the grid down a little bit so that the lines along the edge of the
+        canvas are not cut off when the stroke size is thick.
+        (CanvasQuadraticSegment): Added.
+        (CanvasBezierSegment): Added.
+        (SimpleCanvasStage): Pass in an array of the different segment types. Since line segments
+        are short compared to the curved ones, make it twice as likely to render a line segment.
+        (SimpleCanvasStage.animate): Update the drawing code so that we render all line segments.
+
+        Add a helper method that selects a random element from an array.
+
+        * Animometer/tests/resources/main.js:
+        (Stage.randomElementInArray): Select a random element from the provided array.
+
+        * Animometer/tests/bouncing-particles/resources/bouncing-tagged-images.js: Refactor.
+        * Animometer/tests/dom/resources/leaves.js: Ditto.
+        * Animometer/tests/master/resources/dom-particles.js: Ditto.
+        * Animometer/tests/master/resources/image-data.js: Ditto.
+        * Animometer/tests/master/resources/leaves.js: Ditto.
+        * Animometer/tests/simple/resources/simple-canvas-paths.js: Ditto.
+
+        Add canvas tests that includes all stroke and fill paths. This makes it possible to avoid having to
+        include the full simple canvas suite for perf testing.
+
+        * Animometer/resources/debug-runner/tests.js: Add new tests. Move the canvas test into the Canvas
+        suite.
+        * Animometer/tests/simple/resources/simple-canvas-paths.js: Add a CanvasStroke and CanvasFill particle
+        that random selects an object to render.
+
+        * Animometer/resources/debug-runner/tests.js: Move 3D suite before basic canvas suite.
+        When updating the perf bot script, we will include the suites up to this one, but exclude
+        the basic canvas suite.
+
+        Move compositing transforms test to HTML suite and remove the empty Miscellaneous suite.
+
+        * Animometer/resources/debug-runner/tests.js:
+        * Animometer/tests/dom/compositing-transforms.html: Renamed from PerformanceTests/Animometer/tests/misc/compositing-transforms.html.
+        * Animometer/tests/dom/resources/compositing-transforms.js: Renamed from PerformanceTests/Animometer/tests/misc/resources/compositing-transforms.js.
+
+        Clean up miscellaneous test suite. Add a canvas ellipse test, and remove the other
+        canvas tests.
+
+        * Animometer/resources/debug-runner/tests.js: Add ellipse tests to the simple suite.
+        * Animometer/tests/misc/canvas-electrons.html: Removed.
+        * Animometer/tests/misc/canvas-stars.html: Removed.
+        * Animometer/tests/misc/resources/canvas-electrons.js: Removed.
+        * Animometer/tests/misc/resources/canvas-stars.js: Removed.
+        * Animometer/tests/simple/resources/simple-canvas-paths.js: Add ellipse primitives.
+
+        Merge text tests together into one.
+
+        * Animometer/resources/runner/tests.js: Remove international.html.
+        * Animometer/tests/master/international.html: Removed.
+        * Animometer/tests/master/resources/text.js:
+        (animate): Update styling. Manually calculate gradients for the shadow particles.
+        Reduce the step size for y direction to avoid cutting text off at the margins. Increase
+        step for x since there will be a little more room.
+        * Animometer/tests/master/text.html: Add more translations and lay it out in a table.
+
</ins><span class="cx"> 2016-03-20  Jon Lee  &lt;jonlee@apple.com&gt;
</span><span class="cx"> 
</span><span class="cx">         Add a link to show debug data
</span></span></pre>
</div>
</div>

</body>
</html>