<!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>[199134] 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/199134">199134</a></dd>
<dt>Author</dt> <dd>jonlee@apple.com</dd>
<dt>Date</dt> <dd>2016-04-06 18:47:53 -0700 (Wed, 06 Apr 2016)</dd>
</dl>
<h3>Log Message</h3>
<pre>Update master benchmark with SVG test
https://bugs.webkit.org/show_bug.cgi?id=156273
Reviewed by Dean Jackson.
Provisionally reviewed by Said Abou-Hallawa.
Switch masks tests for SVG path test.
* Animometer/resources/debug-runner/tests.js: Move mask test here.
* Animometer/resources/runner/tests.js: Add SVG test here.
* Animometer/tests/dom/particles.html: Renamed from PerformanceTests/Animometer/tests/master/particles.html.
* Animometer/tests/dom/resources/dom-particles.js: Renamed from PerformanceTests/Animometer/tests/master/resources/dom-particles.js.
* Animometer/tests/master/resources/particles.js: Add minPosition for bounds checking. Prevents particle from being
partially obscured.
* Animometer/tests/master/resources/svg-particles.js: Added.
(Particle): The particle is either a path object or a rect using a path as a clip. The
same path is used either way. For each particle create a linear gradient with a random
rotation.
(SVGParticlesStage): Look in #shapes to see how many different kinds of paths are available.
This makes the test more generic in case other shapes need to be tested.
* Animometer/tests/master/svg-particles.html: Added. Have two defs, one that houses each
particle's gradient, and one that holds the shape templates.</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="#trunkPerformanceTestsAnimometertestsmasterresourcesparticlesjs">trunk/PerformanceTests/Animometer/tests/master/resources/particles.js</a></li>
<li><a href="#trunkPerformanceTestsChangeLog">trunk/PerformanceTests/ChangeLog</a></li>
</ul>
<h3>Added Paths</h3>
<ul>
<li><a href="#trunkPerformanceTestsAnimometertestsdomparticleshtml">trunk/PerformanceTests/Animometer/tests/dom/particles.html</a></li>
<li><a href="#trunkPerformanceTestsAnimometertestsdomresourcesdomparticlesjs">trunk/PerformanceTests/Animometer/tests/dom/resources/dom-particles.js</a></li>
<li><a href="#trunkPerformanceTestsAnimometertestsmasterresourcessvgparticlesjs">trunk/PerformanceTests/Animometer/tests/master/resources/svg-particles.js</a></li>
<li><a href="#trunkPerformanceTestsAnimometertestsmastersvgparticleshtml">trunk/PerformanceTests/Animometer/tests/master/svg-particles.html</a></li>
</ul>
<h3>Removed Paths</h3>
<ul>
<li><a href="#trunkPerformanceTestsAnimometertestsmasterparticleshtml">trunk/PerformanceTests/Animometer/tests/master/particles.html</a></li>
<li><a href="#trunkPerformanceTestsAnimometertestsmasterresourcesdomparticlesjs">trunk/PerformanceTests/Animometer/tests/master/resources/dom-particles.js</a></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 (199133 => 199134)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/PerformanceTests/Animometer/resources/debug-runner/tests.js 2016-04-07 01:46:53 UTC (rev 199133)
+++ trunk/PerformanceTests/Animometer/resources/debug-runner/tests.js 2016-04-07 01:47:53 UTC (rev 199134)
</span><span class="lines">@@ -170,6 +170,10 @@
</span><span class="cx"> name: "Leaves 2.0"
</span><span class="cx"> },
</span><span class="cx"> {
</span><ins>+ url: "dom/particles.html",
+ name: "DOM particles, SVG masks"
+ },
+ {
</ins><span class="cx"> url: "dom/compositing-transforms.html?particleWidth=50&particleHeight=50&filters=yes&imageSrc=../resources/yin-yang.svg",
</span><span class="cx"> name: "Composited Transforms"
</span><span class="cx"> }
</span></span></pre></div>
<a id="trunkPerformanceTestsAnimometerresourcesrunnertestsjs"></a>
<div class="modfile"><h4>Modified: trunk/PerformanceTests/Animometer/resources/runner/tests.js (199133 => 199134)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/PerformanceTests/Animometer/resources/runner/tests.js 2016-04-07 01:46:53 UTC (rev 199133)
+++ trunk/PerformanceTests/Animometer/resources/runner/tests.js 2016-04-07 01:47:53 UTC (rev 199134)
</span><span class="lines">@@ -45,8 +45,8 @@
</span><span class="cx"> name: "Design"
</span><span class="cx"> },
</span><span class="cx"> {
</span><del>- url: "master/particles.html",
- name: "DOM particles, SVG masks"
</del><ins>+ url: "master/svg-particles.html",
+ name: "Suits"
</ins><span class="cx"> },
</span><span class="cx"> ]
</span><span class="cx"> ));
</span></span></pre></div>
<a id="trunkPerformanceTestsAnimometertestsdomparticleshtmlfromrev199130trunkPerformanceTestsAnimometertestsmasterparticleshtml"></a>
<div class="copfile"><h4>Copied: trunk/PerformanceTests/Animometer/tests/dom/particles.html (from rev 199130, trunk/PerformanceTests/Animometer/tests/master/particles.html) (0 => 199134)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/PerformanceTests/Animometer/tests/dom/particles.html (rev 0)
+++ trunk/PerformanceTests/Animometer/tests/dom/particles.html 2016-04-07 01:47:53 UTC (rev 199134)
</span><span class="lines">@@ -0,0 +1,24 @@
</span><ins>+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+ <link rel="stylesheet" type="text/css" href="../resources/stage.css">
+ <style>
+ #stage div {
+ position: absolute;
+ -webkit-mask-image: url(../resources/star.svg);
+ mask: url(../resources/star.svg#star-mask);
+ }
+ </style>
+</head>
+<body>
+ <div id="stage"></div>
+ <script src="../../resources/strings.js"></script>
+ <script src="../../resources/extensions.js"></script>
+ <script src="../../resources/statistics.js"></script>
+ <script src="../resources/math.js"></script>
+ <script src="../resources/main.js"></script>
+ <script src="../master/resources/particles.js"></script>
+ <script src="resources/dom-particles.js"></script>
+</body>
+</html>
</ins></span></pre></div>
<a id="trunkPerformanceTestsAnimometertestsdomresourcesdomparticlesjsfromrev199130trunkPerformanceTestsAnimometertestsmasterresourcesdomparticlesjs"></a>
<div class="copfile"><h4>Copied: trunk/PerformanceTests/Animometer/tests/dom/resources/dom-particles.js (from rev 199130, trunk/PerformanceTests/Animometer/tests/master/resources/dom-particles.js) (0 => 199134)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/PerformanceTests/Animometer/tests/dom/resources/dom-particles.js (rev 0)
+++ trunk/PerformanceTests/Animometer/tests/dom/resources/dom-particles.js 2016-04-07 01:47:53 UTC (rev 199134)
</span><span class="lines">@@ -0,0 +1,73 @@
</span><ins>+(function() {
+
+DOMParticle = Utilities.createSubclass(Particle,
+ function(stage)
+ {
+ this.element = document.createElement("div");
+ stage.element.appendChild(this.element);
+
+ Particle.call(this, stage);
+ }, {
+
+ reset: function()
+ {
+ Particle.prototype.reset.call(this);
+
+ this.position = Stage.randomElementInArray(this.stage.emitLocation);
+
+ var angle = Stage.randomInt(0, this.stage.emitSteps) / this.stage.emitSteps * Math.PI * 2 + Stage.dateCounterValue(100) * this.stage.emissionSpin;
+ this.velocity = new Point(Math.sin(angle), Math.cos(angle))
+ .multiply(Stage.random(.5, 2.5));
+
+ this.element.style.width = this.size.x + "px";
+ this.element.style.height = this.size.y + "px";
+ this.stage.colorOffset = (this.stage.colorOffset + 1) % 360;
+ this.element.style.backgroundColor = "hsl(" + this.stage.colorOffset + ", 70%, 45%)";
+ },
+
+ move: function()
+ {
+ this.element.style.transform = "translate(" + this.position.x + "px, " + this.position.y + "px)" + this.rotater.rotateZ();
+ }
+});
+
+DOMParticleStage = Utilities.createSubclass(ParticlesStage,
+ function()
+ {
+ ParticlesStage.call(this);
+ }, {
+
+ initialize: function(benchmark)
+ {
+ ParticlesStage.prototype.initialize.call(this, benchmark);
+ this.emissionSpin = Stage.random(0, 3);
+ this.emitSteps = Stage.randomInt(4, 6);
+ this.emitLocation = [
+ new Point(this.size.x * .25, this.size.y * .333),
+ new Point(this.size.x * .5, this.size.y * .25),
+ new Point(this.size.x * .75, this.size.y * .333)
+ ];
+ this.colorOffset = Stage.randomInt(0, 359);
+ },
+
+ createParticle: function()
+ {
+ return new DOMParticle(this);
+ },
+
+ willRemoveParticle: function(particle)
+ {
+ particle.element.remove();
+ }
+});
+
+DOMParticleBenchmark = Utilities.createSubclass(Benchmark,
+ function(options)
+ {
+ Benchmark.call(this, new DOMParticleStage(), options);
+ }
+);
+
+window.benchmarkClass = DOMParticleBenchmark;
+
+})();
</ins></span></pre></div>
<a id="trunkPerformanceTestsAnimometertestsmasterparticleshtml"></a>
<div class="delfile"><h4>Deleted: trunk/PerformanceTests/Animometer/tests/master/particles.html (199133 => 199134)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/PerformanceTests/Animometer/tests/master/particles.html 2016-04-07 01:46:53 UTC (rev 199133)
+++ trunk/PerformanceTests/Animometer/tests/master/particles.html 2016-04-07 01:47:53 UTC (rev 199134)
</span><span class="lines">@@ -1,24 +0,0 @@
</span><del>-<!DOCTYPE html>
-<html>
-<head>
- <meta charset="utf-8">
- <link rel="stylesheet" type="text/css" href="../resources/stage.css">
- <style>
- #stage div {
- position: absolute;
- -webkit-mask-image: url(../resources/star.svg);
- mask: url(../resources/star.svg#star-mask);
- }
- </style>
-</head>
-<body>
- <div id="stage"></div>
- <script src="../../resources/strings.js"></script>
- <script src="../../resources/extensions.js"></script>
- <script src="../../resources/statistics.js"></script>
- <script src="../resources/math.js"></script>
- <script src="../resources/main.js"></script>
- <script src="resources/particles.js"></script>
- <script src="resources/dom-particles.js"></script>
-</body>
-</html>
</del></span></pre></div>
<a id="trunkPerformanceTestsAnimometertestsmasterresourcesdomparticlesjs"></a>
<div class="delfile"><h4>Deleted: trunk/PerformanceTests/Animometer/tests/master/resources/dom-particles.js (199133 => 199134)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/PerformanceTests/Animometer/tests/master/resources/dom-particles.js 2016-04-07 01:46:53 UTC (rev 199133)
+++ trunk/PerformanceTests/Animometer/tests/master/resources/dom-particles.js 2016-04-07 01:47:53 UTC (rev 199134)
</span><span class="lines">@@ -1,74 +0,0 @@
</span><del>-(function() {
-
-DOMParticle = Utilities.createSubclass(Particle,
- function(stage)
- {
- this.element = document.createElement("div");
- stage.element.appendChild(this.element);
-
- Particle.call(this, stage);
- }, {
-
- reset: function()
- {
- Particle.prototype.reset.call(this);
-
- var emitLocation = Stage.randomElementInArray(this.stage.emitLocation);
- this.position = new Point(emitLocation.x, emitLocation.y);
-
- var angle = Stage.randomInt(0, this.stage.emitSteps) / this.stage.emitSteps * Math.PI * 2 + Stage.dateCounterValue(100) * this.stage.emissionSpin;
- this.velocity = new Point(Math.sin(angle), Math.cos(angle))
- .multiply(Stage.random(.5, 2.5));
-
- this.element.style.width = this.size.x + "px";
- this.element.style.height = this.size.y + "px";
- this.stage.colorOffset = (this.stage.colorOffset + 1) % 360;
- this.element.style.backgroundColor = "hsl(" + this.stage.colorOffset + ", 70%, 45%)";
- },
-
- move: function()
- {
- this.element.style.transform = "translate(" + this.position.x + "px, " + this.position.y + "px)" + this.rotater.rotateZ();
- }
-});
-
-DOMParticleStage = Utilities.createSubclass(ParticlesStage,
- function()
- {
- ParticlesStage.call(this);
- }, {
-
- initialize: function(benchmark)
- {
- ParticlesStage.prototype.initialize.call(this, benchmark);
- this.emissionSpin = Stage.random(0, 3);
- this.emitSteps = Stage.randomInt(4, 6);
- this.emitLocation = [
- new Point(this.size.x * .25, this.size.y * .333),
- new Point(this.size.x * .5, this.size.y * .25),
- new Point(this.size.x * .75, this.size.y * .333)
- ];
- this.colorOffset = Stage.randomInt(0, 359);
- },
-
- createParticle: function()
- {
- return new DOMParticle(this);
- },
-
- willRemoveParticle: function(particle)
- {
- particle.element.remove();
- }
-});
-
-DOMParticleBenchmark = Utilities.createSubclass(Benchmark,
- function(options)
- {
- Benchmark.call(this, new DOMParticleStage(), options);
- }
-);
-
-window.benchmarkClass = DOMParticleBenchmark;
-
-})();
</del></span></pre></div>
<a id="trunkPerformanceTestsAnimometertestsmasterresourcesparticlesjs"></a>
<div class="modfile"><h4>Modified: trunk/PerformanceTests/Animometer/tests/master/resources/particles.js (199133 => 199134)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/PerformanceTests/Animometer/tests/master/resources/particles.js 2016-04-07 01:46:53 UTC (rev 199133)
+++ trunk/PerformanceTests/Animometer/tests/master/resources/particles.js 2016-04-07 01:47:53 UTC (rev 199134)
</span><span class="lines">@@ -15,7 +15,8 @@
</span><span class="cx"> {
</span><span class="cx"> var randSize = Math.round(Math.pow(Pseudo.random(), 4) * this.sizeRange + this.sizeMinimum);
</span><span class="cx"> this.size = new Point(randSize, randSize);
</span><del>- this.maxPosition = this.stage.size.subtract(this.size);
</del><ins>+ this.minPosition = this.size.multiply(.5);
+ this.maxPosition = this.stage.size.subtract(this.minPosition);
</ins><span class="cx"> },
</span><span class="cx">
</span><span class="cx"> animate: function(timeDelta)
</span><span class="lines">@@ -30,11 +31,11 @@
</span><span class="cx"> if (this.velocity.x > 0)
</span><span class="cx"> this.velocity.x *= -1;
</span><span class="cx"> this.position.x = this.maxPosition.x;
</span><del>- } else if (this.position.x < 0) {
</del><ins>+ } else if (this.position.x < this.minPosition.x) {
</ins><span class="cx"> // If particle is going to move off left side
</span><span class="cx"> if (this.velocity.x < 0)
</span><span class="cx"> this.velocity.x *= -1;
</span><del>- this.position.x = 0;
</del><ins>+ this.position.x = this.minPosition.x;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> // If particle is going to move off bottom side
</span><span class="lines">@@ -50,14 +51,14 @@
</span><span class="cx"> this.velocity.y *= -0.999;
</span><span class="cx"> this.position.y = this.maxPosition.y;
</span><span class="cx"> }
</span><del>- } else if (this.position.y < 0) {
</del><ins>+ } else if (this.position.y < this.minPosition.y) {
</ins><span class="cx"> // If particle is going to move off top side
</span><span class="cx"> var magnitude = this.velocity.length();
</span><span class="cx"> this.velocity.x *= 1.5 + .005 * this.size.x;
</span><span class="cx"> this.velocity = this.velocity.normalize().multiply(magnitude);
</span><span class="cx"> if (this.velocity.y < 0)
</span><span class="cx"> this.velocity.y *= -0.998;
</span><del>- this.position.y = 0;
</del><ins>+ this.position.y = this.minPosition.y;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> this.move();
</span></span></pre></div>
<a id="trunkPerformanceTestsAnimometertestsmasterresourcessvgparticlesjs"></a>
<div class="addfile"><h4>Added: trunk/PerformanceTests/Animometer/tests/master/resources/svg-particles.js (0 => 199134)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/PerformanceTests/Animometer/tests/master/resources/svg-particles.js (rev 0)
+++ trunk/PerformanceTests/Animometer/tests/master/resources/svg-particles.js 2016-04-07 01:47:53 UTC (rev 199134)
</span><span class="lines">@@ -0,0 +1,111 @@
</span><ins>+(function() {
+
+SVGParticle = Utilities.createSubclass(Particle,
+ function(stage)
+ {
+ var shapeId = "#shape-" + Stage.randomInt(1, stage.particleTypeCount);
+ this.isClipPath = Stage.randomBool();
+ if (this.isClipPath) {
+ this.element = Utilities.createSVGElement("rect", {
+ x: 0,
+ y: 0,
+ "clip-path": "url(" + shapeId + ")"
+ }, {}, stage.element);
+ } else {
+ var shapePath = document.querySelector(shapeId + " path");
+ this.element = shapePath.cloneNode();
+ stage.element.appendChild(this.element);
+ }
+
+ this.gradient = document.getElementById("default-gradient").cloneNode(true);
+ this.gradient.id = "gradient-" + stage.gradientsCounter++;
+ stage.gradientsDefs.appendChild(this.gradient);
+ this.element.setAttribute("fill", "url(#" + this.gradient.id + ")");
+
+ Particle.call(this, stage);
+ }, {
+
+ sizeMinimum: 30,
+ sizeRange: 40,
+
+ reset: function()
+ {
+ Particle.prototype.reset.call(this);
+
+ this.position = Stage.randomElementInArray(this.stage.emitLocation);
+
+ var velocityMagnitude = Stage.random(.5, 2.5);
+ var angle = Stage.randomInt(0, this.stage.emitSteps) / this.stage.emitSteps * Math.PI * 2 + Stage.dateCounterValue(1000) * this.stage.emissionSpin + velocityMagnitude;
+ this.velocity = new Point(Math.sin(angle), Math.cos(angle))
+ .multiply(velocityMagnitude);
+
+ if (this.isClipPath) {
+ this.element.setAttribute("width", this.size.x);
+ this.element.setAttribute("height", this.size.y);
+ this.transformSuffix = "translate(-" + (this.size.x >> 1) + "px,-" + (this.size.y >> 1) + "px)";
+ } else
+ this.transformSuffix = "scale(" + this.size.x + ")translate(-.5px,-.5px)";
+
+ this.stage.colorOffset = (this.stage.colorOffset + .5) % 360;
+
+ var transform = this.stage.element.createSVGTransform();
+ transform.setRotate(Stage.randomInt(0, 359), 0, 0);
+ this.gradient.gradientTransform.baseVal.initialize(transform);
+
+ var stops = this.gradient.querySelectorAll("stop");
+ stops[0].setAttribute("stop-color", "hsl(" + this.stage.colorOffset + ", 70%, 45%)");
+ stops[1].setAttribute("stop-color", "hsl(" + ((this.stage.colorOffset + Stage.randomInt(50,100)) % 360) + ", 70%, 65%)");
+ },
+
+ move: function()
+ {
+ this.element.style.transform = "translate(" + this.position.x + "px," + this.position.y + "px)" + this.rotater.rotateZ() + this.transformSuffix;
+ }
+});
+
+SVGParticleStage = Utilities.createSubclass(ParticlesStage,
+ function()
+ {
+ ParticlesStage.call(this);
+ }, {
+
+ initialize: function(benchmark)
+ {
+ ParticlesStage.prototype.initialize.call(this, benchmark);
+ this.emissionSpin = Stage.random(0, 3);
+ this.emitSteps = Stage.randomInt(4, 6);
+ this.emitLocation = [
+ new Point(this.size.x * .25, this.size.y * .333),
+ new Point(this.size.x * .5, this.size.y * .25),
+ new Point(this.size.x * .75, this.size.y * .333)
+ ];
+ this.colorOffset = Stage.randomInt(0, 359);
+
+ this.particleTypeCount = document.querySelectorAll(".shape").length;
+ this.gradientsDefs = document.getElementById("gradients");
+ this.gradientsCounter = 0;
+ },
+
+ createParticle: function()
+ {
+ return new SVGParticle(this);
+ },
+
+ willRemoveParticle: function(particle)
+ {
+ particle.element.remove();
+ if (particle.gradient)
+ particle.gradient.remove();
+ }
+});
+
+SVGParticleBenchmark = Utilities.createSubclass(Benchmark,
+ function(options)
+ {
+ Benchmark.call(this, new SVGParticleStage(), options);
+ }
+);
+
+window.benchmarkClass = SVGParticleBenchmark;
+
+})();
</ins></span></pre></div>
<a id="trunkPerformanceTestsAnimometertestsmastersvgparticleshtml"></a>
<div class="addfile"><h4>Added: trunk/PerformanceTests/Animometer/tests/master/svg-particles.html (0 => 199134)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/PerformanceTests/Animometer/tests/master/svg-particles.html (rev 0)
+++ trunk/PerformanceTests/Animometer/tests/master/svg-particles.html 2016-04-07 01:47:53 UTC (rev 199134)
</span><span class="lines">@@ -0,0 +1,38 @@
</span><ins>+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+ <link rel="stylesheet" type="text/css" href="../resources/stage.css">
+</head>
+<body>
+ <svg id="stage">
+ <defs id="gradients">
+ <linearGradient id="default-gradient">
+ <stop offset="0%"/>
+ <stop offset="100%"/>
+ </linearGradient>
+ </defs>
+ <defs id="shapes">
+ <clipPath id="shape-1" class="shape heart" clipPathUnits="objectBoundingBox">
+ <path d="M0.5,0.214 C0.466,0.164 0.369,0.09 0.267,0.092 C0.137,0.093 -0,0.186 -0,0.345 C-0,0.659 0.395,0.655 0.5,0.938 C0.605,0.655 1,0.659 1,0.345 C1,0.186 0.863,0.093 0.733,0.092 C0.631,0.09 0.534,0.164 0.5,0.214 z"/>
+ </clipPath>
+ <clipPath id="shape-2" class="shape club" clipPathUnits="objectBoundingBox">
+ <path d="M0.5,0.018 C0.62,0.018 0.718,0.115 0.718,0.235 C0.718,0.31 0.679,0.377 0.618,0.418 C0.657,0.393 0.703,0.382 0.749,0.381 C0.869,0.381 0.967,0.468 0.967,0.588 C0.967,0.709 0.869,0.806 0.749,0.806 C0.664,0.805 0.578,0.756 0.542,0.677 C0.538,0.799 0.605,0.918 0.708,0.982 C0.593,0.941 0.407,0.941 0.292,0.982 C0.397,0.917 0.461,0.799 0.459,0.676 C0.422,0.756 0.337,0.804 0.251,0.806 C0.131,0.806 0.033,0.709 0.033,0.588 C0.033,0.468 0.131,0.381 0.251,0.381 C0.298,0.38 0.342,0.395 0.382,0.418 C0.319,0.378 0.284,0.309 0.282,0.235 C0.282,0.115 0.38,0.018 0.5,0.018 z"/>
+ </clipPath>
+ <clipPath id="shape-3" class="shape spade" clipPathUnits="objectBoundingBox">
+ <path d="M0.301,0.982 C0.374,0.941 0.469,0.804 0.469,0.72 C0.374,0.857 0.039,0.825 0.049,0.563 C0.059,0.28 0.406,0.269 0.5,0.018 C0.594,0.269 0.941,0.28 0.951,0.563 C0.961,0.825 0.626,0.857 0.531,0.72 C0.531,0.804 0.626,0.941 0.699,0.982 C0.584,0.941 0.416,0.941 0.301,0.982"/>
+ </clipPath>
+ <clipPath id="shape-4" class="shape diamond" clipPathUnits="objectBoundingBox">
+ <path d="M0.495,0 C0.424,0.153 0.199,0.439 0.128,0.5 C0.199,0.561 0.424,0.847 0.495,1 C0.566,0.847 0.791,0.561 0.862,0.5 C0.791,0.439 0.566,0.153 0.495,0 z"/>
+ </clipPath>
+ </defs>
+ </svg>
+ <script src="../../resources/strings.js"></script>
+ <script src="../../resources/extensions.js"></script>
+ <script src="../../resources/statistics.js"></script>
+ <script src="../resources/math.js"></script>
+ <script src="../resources/main.js"></script>
+ <script src="resources/particles.js"></script>
+ <script src="resources/svg-particles.js"></script>
+</body>
+</html>
</ins></span></pre></div>
<a id="trunkPerformanceTestsChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/PerformanceTests/ChangeLog (199133 => 199134)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/PerformanceTests/ChangeLog 2016-04-07 01:46:53 UTC (rev 199133)
+++ trunk/PerformanceTests/ChangeLog 2016-04-07 01:47:53 UTC (rev 199134)
</span><span class="lines">@@ -1,3 +1,29 @@
</span><ins>+2016-04-06 Jon Lee <jonlee@apple.com>
+
+ Update master benchmark with SVG test
+ https://bugs.webkit.org/show_bug.cgi?id=156273
+
+ Reviewed by Dean Jackson.
+ Provisionally reviewed by Said Abou-Hallawa.
+
+ Switch masks tests for SVG path test.
+
+ * Animometer/resources/debug-runner/tests.js: Move mask test here.
+ * Animometer/resources/runner/tests.js: Add SVG test here.
+ * Animometer/tests/dom/particles.html: Renamed from PerformanceTests/Animometer/tests/master/particles.html.
+ * Animometer/tests/dom/resources/dom-particles.js: Renamed from PerformanceTests/Animometer/tests/master/resources/dom-particles.js.
+
+ * Animometer/tests/master/resources/particles.js: Add minPosition for bounds checking. Prevents particle from being
+ partially obscured.
+ * Animometer/tests/master/resources/svg-particles.js: Added.
+ (Particle): The particle is either a path object or a rect using a path as a clip. The
+ same path is used either way. For each particle create a linear gradient with a random
+ rotation.
+ (SVGParticlesStage): Look in #shapes to see how many different kinds of paths are available.
+ This makes the test more generic in case other shapes need to be tested.
+ * Animometer/tests/master/svg-particles.html: Added. Have two defs, one that houses each
+ particle's gradient, and one that holds the shape templates.
+
</ins><span class="cx"> 2016-03-27 Hunseop Jeong <hs85.jeong@samsung.com>
</span><span class="cx">
</span><span class="cx"> [EFL] REGRESSION(r188793): It made 200 layout tests and Bindings/event-target-wrapper.html performance test fail
</span></span></pre>
</div>
</div>
</body>
</html>