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 c3bfbc7..e3233f5 100644 (file)
@@ -170,6 +170,10 @@ Suites.push(new Suite("HTML suite",
             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 b235249..e61622e 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"
         },
     ]
 ));
@@ -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>
@@ -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 f6febb0..1de3e78 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 5888257..b5ad86e 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