Add a new image test
authorjonlee@apple.com <jonlee@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 10 Mar 2016 01:35:18 +0000 (01:35 +0000)
committerjonlee@apple.com <jonlee@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 10 Mar 2016 01:35:18 +0000 (01:35 +0000)
https://bugs.webkit.org/show_bug.cgi?id=155232

Reviewed by Dean Jackson.
Provisionally reviewed by Said Abou-Hallawa.

The image test renders PNGs and moves them with translate and rotate
transforms. Each particle has a lifetime, and when the lifetime ends or
the particle goes offscreen, it resets itself somewhere on the stage.

* Animometer/resources/debug-runner/tests.js: Remove the CSS bouncing PNG
images test, because this one tests the same technique.
* Animometer/resources/runner/tests.js: Added here as "Leaves".
* Animometer/tests/master/leaves.html: Added.
* Animometer/tests/master/resources/particles.js: Refactor out the parts
specific to the DOM particles test. Consequently make velocity a public
member.
(initialize): The options parameter is never used, so remove it.
(animate): Remove unused local variable.
* Animometer/tests/master/resources/leaves.js: Maintains a focal point that
moves back and forth across the canvas. That point affects the velocity
of the particles. When the focal point is on the leftmost side, it is
between [-6, -2], and set in reset(). When the focal point is on the rightmost
side, it will be from [2, 6].
* Animometer/tests/master/resources/dom-particles.js: Move JS specific to
this test here from particles.js.

New images.
* Animometer/tests/master/resources/compass100.png: Added.
* Animometer/tests/master/resources/console100.png: Added.
* Animometer/tests/master/resources/contribute100.png: Added.
* Animometer/tests/master/resources/debugger100.png: Added.
* Animometer/tests/master/resources/inspector100.png: Added.
* Animometer/tests/master/resources/layout100.png: Added.
* Animometer/tests/master/resources/performance100.png: Added.
* Animometer/tests/master/resources/script100.png: Added.
* Animometer/tests/master/resources/shortcuts100.png: Added.
* Animometer/tests/master/resources/standards100.png: Added.
* Animometer/tests/master/resources/storage100.png: Added.
* Animometer/tests/master/resources/styles100.png: Added.
* Animometer/tests/master/resources/timeline100.png: Added.

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

20 files changed:
PerformanceTests/Animometer/resources/debug-runner/tests.js
PerformanceTests/Animometer/resources/runner/tests.js
PerformanceTests/Animometer/tests/master/leaves.html [new file with mode: 0644]
PerformanceTests/Animometer/tests/master/resources/compass100.png [new file with mode: 0644]
PerformanceTests/Animometer/tests/master/resources/console100.png [new file with mode: 0644]
PerformanceTests/Animometer/tests/master/resources/contribute100.png [new file with mode: 0644]
PerformanceTests/Animometer/tests/master/resources/debugger100.png [new file with mode: 0644]
PerformanceTests/Animometer/tests/master/resources/dom-particles.js
PerformanceTests/Animometer/tests/master/resources/inspector100.png [new file with mode: 0644]
PerformanceTests/Animometer/tests/master/resources/layout100.png [new file with mode: 0644]
PerformanceTests/Animometer/tests/master/resources/leaves.js [new file with mode: 0644]
PerformanceTests/Animometer/tests/master/resources/particles.js
PerformanceTests/Animometer/tests/master/resources/performance100.png [new file with mode: 0644]
PerformanceTests/Animometer/tests/master/resources/script100.png [new file with mode: 0644]
PerformanceTests/Animometer/tests/master/resources/shortcuts100.png [new file with mode: 0644]
PerformanceTests/Animometer/tests/master/resources/standards100.png [new file with mode: 0644]
PerformanceTests/Animometer/tests/master/resources/storage100.png [new file with mode: 0644]
PerformanceTests/Animometer/tests/master/resources/styles100.png [new file with mode: 0644]
PerformanceTests/Animometer/tests/master/resources/timeline100.png [new file with mode: 0644]
PerformanceTests/ChangeLog

index 6f1c815..5848eac 100644 (file)
@@ -162,10 +162,6 @@ Suites.push(new Suite("HTML suite",
             name: "CSS bouncing SVG images"
         },
         {
-            url: "bouncing-particles/bouncing-css-images.html?particleWidth=80&particleHeight=80&imageSrc=../resources/yin-yang.png",
-            name: "CSS bouncing PNG images"
-        },
-        {
             url: "text/layering-text.html",
             name: "CSS layering text"
         },
index cc85b9a..af324fb 100644 (file)
@@ -21,6 +21,10 @@ Suites.push(new Suite("Animometer",
             name: "Canvas arcs"
         },
         {
+            url: "master/leaves.html",
+            name: "Leaves"
+        },
+        {
             url: "master/canvas-stage.html?pathType=linePath&lineJoin=round&lineCap=round",
             name: "Canvas line path, round join"
         },
diff --git a/PerformanceTests/Animometer/tests/master/leaves.html b/PerformanceTests/Animometer/tests/master/leaves.html
new file mode 100644 (file)
index 0000000..0ba8467
--- /dev/null
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" type="text/css" href="resources/stage.css">
+    <style>
+        #stage {
+            background-color: #23282B;
+        }
+        #stage img {
+            position: absolute;
+        }
+    </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/leaves.js"></script>
+</body>
+</html>
diff --git a/PerformanceTests/Animometer/tests/master/resources/compass100.png b/PerformanceTests/Animometer/tests/master/resources/compass100.png
new file mode 100644 (file)
index 0000000..e513ce1
Binary files /dev/null and b/PerformanceTests/Animometer/tests/master/resources/compass100.png differ
diff --git a/PerformanceTests/Animometer/tests/master/resources/console100.png b/PerformanceTests/Animometer/tests/master/resources/console100.png
new file mode 100644 (file)
index 0000000..81f9c16
Binary files /dev/null and b/PerformanceTests/Animometer/tests/master/resources/console100.png differ
diff --git a/PerformanceTests/Animometer/tests/master/resources/contribute100.png b/PerformanceTests/Animometer/tests/master/resources/contribute100.png
new file mode 100644 (file)
index 0000000..790e3dc
Binary files /dev/null and b/PerformanceTests/Animometer/tests/master/resources/contribute100.png differ
diff --git a/PerformanceTests/Animometer/tests/master/resources/debugger100.png b/PerformanceTests/Animometer/tests/master/resources/debugger100.png
new file mode 100644 (file)
index 0000000..e265209
Binary files /dev/null and b/PerformanceTests/Animometer/tests/master/resources/debugger100.png differ
index c126e14..b04e4dd 100644 (file)
@@ -12,6 +12,14 @@ DOMParticle = Utilities.createSubclass(Particle,
     reset: function()
     {
         Particle.prototype.reset.call(this);
+
+        var emitLocation = this.stage.emitLocation[Stage.randomInt(0, this.stage.emitLocation.length - 1)];
+        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.element.style.backgroundColor = Stage.rotatingColor(2000, .7, .45);
diff --git a/PerformanceTests/Animometer/tests/master/resources/inspector100.png b/PerformanceTests/Animometer/tests/master/resources/inspector100.png
new file mode 100644 (file)
index 0000000..26d1a7d
Binary files /dev/null and b/PerformanceTests/Animometer/tests/master/resources/inspector100.png differ
diff --git a/PerformanceTests/Animometer/tests/master/resources/layout100.png b/PerformanceTests/Animometer/tests/master/resources/layout100.png
new file mode 100644 (file)
index 0000000..5b1ec28
Binary files /dev/null and b/PerformanceTests/Animometer/tests/master/resources/layout100.png differ
diff --git a/PerformanceTests/Animometer/tests/master/resources/leaves.js b/PerformanceTests/Animometer/tests/master/resources/leaves.js
new file mode 100644 (file)
index 0000000..52d4811
--- /dev/null
@@ -0,0 +1,139 @@
+(function() {
+
+Leaf = Utilities.createSubclass(Particle,
+    function(stage)
+    {
+        this.element = document.createElement("img");
+        this.element.setAttribute("src", stage.images[Stage.randomInt(0, stage.images.length - 1)].src);
+        var sizeString = this.sizeMinimum + "px";
+        this.element.style.width = sizeString;
+        this.element.style.height = sizeString;
+        stage.element.appendChild(this.element);
+
+        Particle.call(this, stage);
+    }, {
+
+    sizeMinimum: 25,
+    sizeRange: 0,
+
+    reset: function()
+    {
+        Particle.prototype.reset.call(this);
+        this._life = Stage.randomInt(20, 100);
+        this._position = new Point(Stage.random(-this.size.width, this.maxPosition.x), Stage.random(-this.size.height, this.maxPosition.y));
+        this._velocity = new Point(Stage.random(-6, -2), .1 * this.size.y + Stage.random(-1, 1));
+    },
+
+    animate: function(timeDelta)
+    {
+        this.rotater.next(timeDelta);
+
+        this._position.x += this._velocity.x + 8 * this.stage.focusX;
+        this._position.y += this._velocity.y;
+
+        this._life--;
+        if (!this._life || this._position.y > this.stage.size.y)
+            this.reset();
+
+        if (this._position.x < -this.size.width || this._position.x > this.maxPosition.x)
+            this._position.x = (this._position.x + this.maxPosition.x) % this.maxPosition.x;
+        this.move();
+    },
+
+    move: function()
+    {
+        this.element.style.transform = "translate(" + this._position.x + "px, " + this._position.y + "px)" + this.rotater.rotateZ();
+    }
+});
+
+Utilities.extendObject(ParticlesStage.prototype, {
+
+    imageSrcs: [
+        "compass",
+        "console",
+        "contribute",
+        "debugger",
+        "inspector",
+        "layout",
+        "performance",
+        "script",
+        "shortcuts",
+        "standards",
+        "storage",
+        "styles",
+        "timeline"
+    ],
+    images: [],
+
+    initialize: function(benchmark)
+    {
+        Stage.prototype.initialize.call(this, benchmark);
+
+        var lastPromise;
+        var images = this.images;
+        this.imageSrcs.forEach(function(imageSrc) {
+            var promise = this._loadImage("resources/" + imageSrc + "100.png");
+            if (!lastPromise)
+                lastPromise = promise;
+            else {
+                lastPromise = lastPromise.then(function(img) {
+                    images.push(img);
+                    return promise;
+                });
+            }
+        }, this);
+
+        lastPromise.then(function(img) {
+            images.push(img);
+            benchmark.readyPromise.resolve();
+        });
+    },
+
+    _loadImage: function(src) {
+        var img = new Image;
+        var promise = new SimplePromise;
+
+        img.onload = function(e) {
+            promise.resolve(e.target);
+        };
+
+        img.src = src;
+        return promise;
+    },
+
+    animate: function(timeDelta)
+    {
+        this.focusX = 0.5 + 0.5 * Math.sin(Stage.dateFractionalValue(10000) * Math.PI * 2);
+        timeDelta /= 4;
+        this.particles.forEach(function(particle) {
+            particle.animate(timeDelta);
+        });
+    },
+
+    createParticle: function()
+    {
+        return new Leaf(this);
+    },
+
+    willRemoveParticle: function(particle)
+    {
+        particle.element.remove();
+    }
+});
+
+LeavesBenchmark = Utilities.createSubclass(Benchmark,
+    function(options)
+    {
+        Benchmark.call(this, new ParticlesStage(), options);
+    }, {
+
+    waitUntilReady: function() {
+        this.readyPromise = new SimplePromise;
+        return this.readyPromise;
+    }
+
+});
+
+window.benchmarkClass = LeavesBenchmark;
+
+})();
index 2f49d80..49556f3 100644 (file)
@@ -8,59 +8,55 @@ function Particle(stage)
 
 Particle.prototype =
 {
+    sizeMinimum: 40,
+    sizeRange: 10,
+
     reset: function()
     {
-        var randSize = Math.pow(Pseudo.random(), 4) * 10 + 40;
+        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);
-
-        var emitLocation = this.stage.emitLocation[Stage.randomInt(0, this.stage.emitLocation.length - 1)];
-        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));
     },
 
     animate: function(timeDelta)
     {
         this.rotater.next(timeDelta);
 
-        this.position = this.position.add(this._velocity.multiply(timeDelta));
-        this._velocity.y += 0.03;
+        this.position = this.position.add(this.velocity.multiply(timeDelta));
+        this.velocity.y += 0.03;
 
         // If particle is going to move off right side
         if (this.position.x > this.maxPosition.x) {
-            if (this._velocity.x > 0)
-                this._velocity.x *= -1;
+            if (this.velocity.x > 0)
+                this.velocity.x *= -1;
             this.position.x = this.maxPosition.x;
         } else if (this.position.x < 0) {
             // If particle is going to move off left side
-            if (this._velocity.x < 0)
-                this._velocity.x *= -1;
+            if (this.velocity.x < 0)
+                this.velocity.x *= -1;
             this.position.x = 0;
         }
 
         // If particle is going to move off bottom side
         if (this.position.y > this.maxPosition.y) {
             // Adjust direction but maintain magnitude
-            var magnitude = this._velocity.length();
-            this._velocity.x *= 1.5 + .005 * this.size.x;
-            this._velocity = this._velocity.normalize().multiply(magnitude);
-            if (Math.abs(this._velocity.y) < 0.7)
+            var magnitude = this.velocity.length();
+            this.velocity.x *= 1.5 + .005 * this.size.x;
+            this.velocity = this.velocity.normalize().multiply(magnitude);
+            if (Math.abs(this.velocity.y) < 0.7)
                 this.reset();
             else {
-                if (this._velocity.y > 0)
-                    this._velocity.y *= -0.999;
+                if (this.velocity.y > 0)
+                    this.velocity.y *= -0.999;
                 this.position.y = this.maxPosition.y;
             }
         } else if (this.position.y < 0) {
             // 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;
+            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;
         }
 
@@ -79,9 +75,9 @@ ParticlesStage = Utilities.createSubclass(Stage,
         this.particles = [];
     }, {
 
-    initialize: function(benchmark, options)
+    initialize: function(benchmark)
     {
-        Stage.prototype.initialize.call(this, benchmark, options);
+        Stage.prototype.initialize.call(this, benchmark);
         this.emissionSpin = Stage.random(0, 3);
         this.emitSteps = Stage.randomInt(4, 6);
         this.emitLocation = [
@@ -93,7 +89,6 @@ ParticlesStage = Utilities.createSubclass(Stage,
 
     animate: function(timeDelta)
     {
-        var offset = Stage.dateFractionalValue();
         timeDelta /= 4;
         this.particles.forEach(function(particle) {
             particle.animate(timeDelta);
diff --git a/PerformanceTests/Animometer/tests/master/resources/performance100.png b/PerformanceTests/Animometer/tests/master/resources/performance100.png
new file mode 100644 (file)
index 0000000..3f8a187
Binary files /dev/null and b/PerformanceTests/Animometer/tests/master/resources/performance100.png differ
diff --git a/PerformanceTests/Animometer/tests/master/resources/script100.png b/PerformanceTests/Animometer/tests/master/resources/script100.png
new file mode 100644 (file)
index 0000000..c2ea55e
Binary files /dev/null and b/PerformanceTests/Animometer/tests/master/resources/script100.png differ
diff --git a/PerformanceTests/Animometer/tests/master/resources/shortcuts100.png b/PerformanceTests/Animometer/tests/master/resources/shortcuts100.png
new file mode 100644 (file)
index 0000000..aeb23e0
Binary files /dev/null and b/PerformanceTests/Animometer/tests/master/resources/shortcuts100.png differ
diff --git a/PerformanceTests/Animometer/tests/master/resources/standards100.png b/PerformanceTests/Animometer/tests/master/resources/standards100.png
new file mode 100644 (file)
index 0000000..ff386ff
Binary files /dev/null and b/PerformanceTests/Animometer/tests/master/resources/standards100.png differ
diff --git a/PerformanceTests/Animometer/tests/master/resources/storage100.png b/PerformanceTests/Animometer/tests/master/resources/storage100.png
new file mode 100644 (file)
index 0000000..bc59d92
Binary files /dev/null and b/PerformanceTests/Animometer/tests/master/resources/storage100.png differ
diff --git a/PerformanceTests/Animometer/tests/master/resources/styles100.png b/PerformanceTests/Animometer/tests/master/resources/styles100.png
new file mode 100644 (file)
index 0000000..7bc9fff
Binary files /dev/null and b/PerformanceTests/Animometer/tests/master/resources/styles100.png differ
diff --git a/PerformanceTests/Animometer/tests/master/resources/timeline100.png b/PerformanceTests/Animometer/tests/master/resources/timeline100.png
new file mode 100644 (file)
index 0000000..b9839f8
Binary files /dev/null and b/PerformanceTests/Animometer/tests/master/resources/timeline100.png differ
index b42683f..5be89f3 100644 (file)
@@ -1,3 +1,47 @@
+2016-03-09  Jon Lee  <jonlee@apple.com>
+
+        Add a new image test
+        https://bugs.webkit.org/show_bug.cgi?id=155232
+
+        Reviewed by Dean Jackson.
+        Provisionally reviewed by Said Abou-Hallawa.
+
+        The image test renders PNGs and moves them with translate and rotate
+        transforms. Each particle has a lifetime, and when the lifetime ends or
+        the particle goes offscreen, it resets itself somewhere on the stage.
+
+        * Animometer/resources/debug-runner/tests.js: Remove the CSS bouncing PNG
+        images test, because this one tests the same technique.
+        * Animometer/resources/runner/tests.js: Added here as "Leaves".
+        * Animometer/tests/master/leaves.html: Added.
+        * Animometer/tests/master/resources/particles.js: Refactor out the parts
+        specific to the DOM particles test. Consequently make velocity a public
+        member.
+        (initialize): The options parameter is never used, so remove it.
+        (animate): Remove unused local variable.
+        * Animometer/tests/master/resources/leaves.js: Maintains a focal point that
+        moves back and forth across the canvas. That point affects the velocity
+        of the particles. When the focal point is on the leftmost side, it is
+        between [-6, -2], and set in reset(). When the focal point is on the rightmost
+        side, it will be from [2, 6].
+        * Animometer/tests/master/resources/dom-particles.js: Move JS specific to
+        this test here from particles.js.
+
+        New images.
+        * Animometer/tests/master/resources/compass100.png: Added.
+        * Animometer/tests/master/resources/console100.png: Added.
+        * Animometer/tests/master/resources/contribute100.png: Added.
+        * Animometer/tests/master/resources/debugger100.png: Added.
+        * Animometer/tests/master/resources/inspector100.png: Added.
+        * Animometer/tests/master/resources/layout100.png: Added.
+        * Animometer/tests/master/resources/performance100.png: Added.
+        * Animometer/tests/master/resources/script100.png: Added.
+        * Animometer/tests/master/resources/shortcuts100.png: Added.
+        * Animometer/tests/master/resources/standards100.png: Added.
+        * Animometer/tests/master/resources/storage100.png: Added.
+        * Animometer/tests/master/resources/styles100.png: Added.
+        * Animometer/tests/master/resources/timeline100.png: Added.
+
 2016-03-03  Jon Lee  <jonlee@apple.com>
 
         Add ability to retrieve raw data from release harness