Update master benchmark with SVG test
authorjonlee@apple.com <jonlee@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 7 Apr 2016 01:47:53 +0000 (01:47 +0000)
committerjonlee@apple.com <jonlee@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 7 Apr 2016 01:47:53 +0000 (01:47 +0000)
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.

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@199134 268f45cc-cd09-0410-ab3c-d52691b4dbfc

PerformanceTests/Animometer/resources/debug-runner/tests.js
PerformanceTests/Animometer/resources/runner/tests.js
PerformanceTests/Animometer/tests/dom/particles.html [moved from PerformanceTests/Animometer/tests/master/particles.html with 92% similarity]
PerformanceTests/Animometer/tests/dom/resources/dom-particles.js [moved from PerformanceTests/Animometer/tests/master/resources/dom-particles.js with 93% similarity]
PerformanceTests/Animometer/tests/master/resources/particles.js
PerformanceTests/Animometer/tests/master/resources/svg-particles.js [new file with mode: 0644]
PerformanceTests/Animometer/tests/master/svg-particles.html [new file with mode: 0644]
PerformanceTests/ChangeLog

index c3bfbc77b0b5b9cefba26869c4efe3007b4ef149..e3233f56ac056f282a2860dd14fbb1cfd49ff57b 100644 (file)
@@ -169,6 +169,10 @@ Suites.push(new Suite("HTML suite",
             url: "dom/leaves.html",
             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"
index b2352491888b699c3aca9b9c1b837d6a6ef9ecd3..e61622e8125e3550ed63d9cffb9b626fa5806ce0 100644 (file)
@@ -45,8 +45,8 @@ Suites.push(new Suite("Animometer",
             name: "Design"
         },
         {
-            url: "master/particles.html",
-            name: "DOM particles, SVG masks"
+            url: "master/svg-particles.html",
+            name: "Suits"
         },
     ]
 ));
similarity index 92%
rename from PerformanceTests/Animometer/tests/master/particles.html
rename to PerformanceTests/Animometer/tests/dom/particles.html
index 94f28364c7bc3fd0f3c5b8791c36e6159ad4a0b1..fdc09399c947ca29679ed0bff97da46f0415da4d 100644 (file)
@@ -18,7 +18,7 @@
     <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="../master/resources/particles.js"></script>
     <script src="resources/dom-particles.js"></script>
 </body>
 </html>
similarity index 93%
rename from PerformanceTests/Animometer/tests/master/resources/dom-particles.js
rename to PerformanceTests/Animometer/tests/dom/resources/dom-particles.js
index c6512bd9675701f0464527a294f214464253a132..471444b2e7ece1bdf6a1d0b45775460782fe8516 100644 (file)
@@ -13,8 +13,7 @@ DOMParticle = Utilities.createSubclass(Particle,
     {
         Particle.prototype.reset.call(this);
 
-        var emitLocation = Stage.randomElementInArray(this.stage.emitLocation);
-        this.position = new Point(emitLocation.x, emitLocation.y);
+        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))
index f6febb0081915485b99a991960e6f554fb7543ee..1de3e78267c20e6be9dcdef06f2646907614ec93 100644 (file)
@@ -15,7 +15,8 @@ Particle.prototype =
     {
         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 @@ Particle.prototype =
             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 @@ Particle.prototype =
                     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();
diff --git a/PerformanceTests/Animometer/tests/master/resources/svg-particles.js b/PerformanceTests/Animometer/tests/master/resources/svg-particles.js
new file mode 100644 (file)
index 0000000..91ae8b7
--- /dev/null
@@ -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;
+
+})();
diff --git a/PerformanceTests/Animometer/tests/master/svg-particles.html b/PerformanceTests/Animometer/tests/master/svg-particles.html
new file mode 100644 (file)
index 0000000..46a1936
--- /dev/null
@@ -0,0 +1,38 @@
+<!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>
index 588825777fee1a21e2168d75e7102960f8065bd9..b5ad86e15fa2605567c986ae209d995caa5ebde0 100644 (file)
@@ -1,3 +1,29 @@
+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.
+
 2016-03-27  Hunseop Jeong  <hs85.jeong@samsung.com>
 
         [EFL] REGRESSION(r188793): It made 200 layout tests and Bindings/event-target-wrapper.html performance test fail