Diff
Modified: trunk/PerformanceTests/Animometer/resources/debug-runner/tests.js (199133 => 199134)
--- 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)
@@ -170,6 +170,10 @@
name: "Leaves 2.0"
},
{
+ url: "dom/particles.html",
+ name: "DOM particles, SVG masks"
+ },
+ {
url: "dom/compositing-transforms.html?particleWidth=50&particleHeight=50&filters=yes&imageSrc=../resources/yin-yang.svg",
name: "Composited Transforms"
}
Modified: trunk/PerformanceTests/Animometer/resources/runner/tests.js (199133 => 199134)
--- 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)
@@ -45,8 +45,8 @@
name: "Design"
},
{
- url: "master/particles.html",
- name: "DOM particles, SVG masks"
+ url: "master/svg-particles.html",
+ name: "Suits"
},
]
));
Copied: trunk/PerformanceTests/Animometer/tests/dom/particles.html (from rev 199130, trunk/PerformanceTests/Animometer/tests/master/particles.html) (0 => 199134)
--- 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)
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+ <link rel="stylesheet" type="text/css" href=""
+ <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=""
+ <script src=""
+ <script src=""
+ <script src=""
+ <script src=""
+ <script src=""
+ <script src=""
+</body>
+</html>
Copied: trunk/PerformanceTests/Animometer/tests/dom/resources/dom-particles.js (from rev 199130, trunk/PerformanceTests/Animometer/tests/master/resources/dom-particles.js) (0 => 199134)
--- 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)
@@ -0,0 +1,73 @@
+(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;
+
+})();
Deleted: trunk/PerformanceTests/Animometer/tests/master/particles.html (199133 => 199134)
--- 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)
@@ -1,24 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
- <meta charset="utf-8">
- <link rel="stylesheet" type="text/css" href=""
- <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=""
- <script src=""
- <script src=""
- <script src=""
- <script src=""
- <script src=""
- <script src=""
-</body>
-</html>
Deleted: trunk/PerformanceTests/Animometer/tests/master/resources/dom-particles.js (199133 => 199134)
--- 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)
@@ -1,74 +0,0 @@
-(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;
-
-})();
Modified: trunk/PerformanceTests/Animometer/tests/master/resources/particles.js (199133 => 199134)
--- 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)
@@ -15,7 +15,8 @@
{
var randSize = Math.round(Math.pow(Pseudo.random(), 4) * this.sizeRange + this.sizeMinimum);
this.size = new Point(randSize, randSize);
- this.maxPosition = this.stage.size.subtract(this.size);
+ this.minPosition = this.size.multiply(.5);
+ this.maxPosition = this.stage.size.subtract(this.minPosition);
},
animate: function(timeDelta)
@@ -30,11 +31,11 @@
if (this.velocity.x > 0)
this.velocity.x *= -1;
this.position.x = this.maxPosition.x;
- } else if (this.position.x < 0) {
+ } else if (this.position.x < this.minPosition.x) {
// If particle is going to move off left side
if (this.velocity.x < 0)
this.velocity.x *= -1;
- this.position.x = 0;
+ this.position.x = this.minPosition.x;
}
// If particle is going to move off bottom side
@@ -50,14 +51,14 @@
this.velocity.y *= -0.999;
this.position.y = this.maxPosition.y;
}
- } else if (this.position.y < 0) {
+ } else if (this.position.y < this.minPosition.y) {
// If particle is going to move off top side
var magnitude = this.velocity.length();
this.velocity.x *= 1.5 + .005 * this.size.x;
this.velocity = this.velocity.normalize().multiply(magnitude);
if (this.velocity.y < 0)
this.velocity.y *= -0.998;
- this.position.y = 0;
+ this.position.y = this.minPosition.y;
}
this.move();
Added: trunk/PerformanceTests/Animometer/tests/master/resources/svg-particles.js (0 => 199134)
--- 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)
@@ -0,0 +1,111 @@
+(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;
+
+})();
Added: trunk/PerformanceTests/Animometer/tests/master/svg-particles.html (0 => 199134)
--- 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)
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+ <link rel="stylesheet" type="text/css" href=""
+</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=""
+ <script src=""
+ <script src=""
+ <script src=""
+ <script src=""
+ <script src=""
+ <script src=""
+</body>
+</html>
Modified: trunk/PerformanceTests/ChangeLog (199133 => 199134)
--- trunk/PerformanceTests/ChangeLog 2016-04-07 01:46:53 UTC (rev 199133)
+++ trunk/PerformanceTests/ChangeLog 2016-04-07 01:47:53 UTC (rev 199134)
@@ -1,3 +1,29 @@
+2016-04-06 Jon Lee <[email protected]>
+
+ 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.
+
2016-03-27 Hunseop Jeong <[email protected]>
[EFL] REGRESSION(r188793): It made 200 layout tests and Bindings/event-target-wrapper.html performance test fail