Add a basic compositing Animometer test
authorsimon.fraser@apple.com <simon.fraser@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 3 Dec 2015 19:34:21 +0000 (19:34 +0000)
committersimon.fraser@apple.com <simon.fraser@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 3 Dec 2015 19:34:21 +0000 (19:34 +0000)
https://bugs.webkit.org/show_bug.cgi?id=151724

Reviewed by Dean Jackson.

Add a "bouncing particles" test that moves composited layers around, optionally with a filter.

This is added under a new "Miscellaneous" category.

Remove the test templates category from the UI.

* Animometer/runner/resources/tests.js:
* Animometer/tests/bouncing-particles/resources/bouncing-css-shapes.js:
(BouncingCssShape.prototype.animate):
* Animometer/tests/misc/compositing-transforms.html: Added.
* Animometer/tests/misc/resources/compositing-transforms.js: Added.
(BouncingCompositedImage):
(BouncingCompositedImage.prototype._move):
(BouncingCompositedImage.prototype.animate):
(CompositingTransformsStage):
(CompositingTransformsStage.prototype.createParticle):
(CompositingTransformsStage.prototype.particleWillBeRemoved):
(CompositedTransformsBenchmark):
(CompositedTransformsBenchmark.prototype.createStage):
(window.benchmarkClient.create):

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

PerformanceTests/Animometer/runner/resources/tests.js
PerformanceTests/Animometer/tests/bouncing-particles/resources/bouncing-css-shapes.js
PerformanceTests/Animometer/tests/misc/compositing-transforms.html [new file with mode: 0644]
PerformanceTests/Animometer/tests/misc/resources/compositing-transforms.js [new file with mode: 0644]
PerformanceTests/ChangeLog

index 084b1f2..e987f89 100644 (file)
@@ -236,19 +236,11 @@ Suites.push(new Suite("Complex examples",
     ]
 ));
 
-Suites.push(new Suite("Test Templates",
+Suites.push(new Suite("Miscellaneous Tests",
     [
         {
-            url: "template/template-css.html",
-            name: "CSS template"
-        },
-        {
-            url: "template/template-canvas.html",
-            name: "canvas template"
-        },
-        {
-            url: "template/template-svg.html",
-            name: "SVG template"
+            url: "misc/compositing-transforms.html?particleWidth=50&particleHeight=50&filters=yes&imageSrc=../resources/yin-yang.svg",
+            name: "Composited Transforms"
         },
     ]
 ));
index 9dffe65..6edaed8 100644 (file)
@@ -39,7 +39,7 @@ BouncingCssShape.prototype._move = function()
 BouncingCssShape.prototype.animate = function(timeDelta)
 {
     BouncingParticle.prototype.animate.call(this, timeDelta);
-    this._rotater.next(timeDelta);    
+    this._rotater.next(timeDelta);
     this._move();
 }
 
diff --git a/PerformanceTests/Animometer/tests/misc/compositing-transforms.html b/PerformanceTests/Animometer/tests/misc/compositing-transforms.html
new file mode 100644 (file)
index 0000000..d0fff52
--- /dev/null
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <style>
+        img {
+            position: absolute;
+            width: 80px;
+            height: 80px;
+        }
+    </style>
+    <link rel="stylesheet" type="text/css" href="../resources/stage.css">
+    <script src="../../resources/algorithm.js"></script>
+    <script src="../../resources/strings.js"></script>
+    <script src="../../resources/sampler.js"></script>
+    <script src="../../resources/extensions.js"></script>
+    <script src="../resources/math.js"></script>
+    <script src="../resources/utilities.js"></script>    
+    <script src="../resources/main.js"></script>
+    <script src="../resources/stage.js"></script>  
+    <script src="../bouncing-particles/resources/bouncing-particles.js"></script>
+    <script src="resources/compositing-transforms.js"></script>
+</head>
+<body>
+    <div id="stage"></div>
+</body>
+</html>
diff --git a/PerformanceTests/Animometer/tests/misc/resources/compositing-transforms.js b/PerformanceTests/Animometer/tests/misc/resources/compositing-transforms.js
new file mode 100644 (file)
index 0000000..9be99ec
--- /dev/null
@@ -0,0 +1,67 @@
+function BouncingCompositedImage(stage)
+{
+    BouncingParticle.call(this, stage);
+
+    this.element = document.createElement("img");
+    this.element.style.width = this._size.x + "px";
+    this.element.style.height = this._size.y + "px";
+    this.element.setAttribute("src", stage.imageSrc);
+    
+    if (stage.useFilters)
+        this.element.style.filter = "hue-rotate(" + stage.randomAngle() + "rad)";
+    
+    stage.element.appendChild(this.element);
+    this._move();
+}
+
+BouncingCompositedImage.prototype = Object.create(BouncingParticle.prototype);
+BouncingCompositedImage.prototype.constructor = BouncingCompositedImage;
+
+BouncingCompositedImage.prototype._move = function()
+{
+    this.element.style.transform = "translate3d(" + this._position.x + "px," + this._position.y + "px, 0) " + this._rotater.rotateZ();
+}
+    
+BouncingCompositedImage.prototype.animate = function(timeDelta)
+{
+    BouncingParticle.prototype.animate.call(this, timeDelta);
+    this._move();
+}
+
+function CompositingTransformsStage(element, options)
+{
+    BouncingParticlesStage.call(this, element, options);
+    this.imageSrc = options["imageSrc"] || "../resources/yin-yang.svg";
+    this.useFilters = options["filters"] == "yes";
+}
+
+CompositingTransformsStage.prototype = Object.create(BouncingParticlesStage.prototype);
+CompositingTransformsStage.prototype.constructor = CompositingTransformsStage;
+
+CompositingTransformsStage.prototype.createParticle = function()
+{
+    return new BouncingCompositedImage(this);
+}
+
+CompositingTransformsStage.prototype.particleWillBeRemoved = function(particle)
+{
+    particle.element.remove();
+}
+
+function CompositedTransformsBenchmark(suite, test, options, recordTable, progressBar)
+{
+    BouncingParticlesBenchmark.call(this, suite, test, options, recordTable, progressBar);
+}
+
+CompositedTransformsBenchmark.prototype = Object.create(BouncingParticlesBenchmark.prototype);
+CompositedTransformsBenchmark.prototype.constructor = CompositedTransformsBenchmark;
+
+CompositedTransformsBenchmark.prototype.createStage = function(element)
+{
+    return new CompositingTransformsStage(element, this._options);
+}
+
+window.benchmarkClient.create = function(suite, test, options, recordTable, progressBar)
+{
+    return new CompositedTransformsBenchmark(suite, test, options, recordTable, progressBar);
+}
index 8aa1fab..276dfe7 100644 (file)
@@ -1,3 +1,31 @@
+2015-12-01  Simon Fraser  <simon.fraser@apple.com>
+
+        Add a basic compositing Animometer test
+        https://bugs.webkit.org/show_bug.cgi?id=151724
+
+        Reviewed by Dean Jackson.
+        
+        Add a "bouncing particles" test that moves composited layers around, optionally with a filter.
+        
+        This is added under a new "Miscellaneous" category.
+        
+        Remove the test templates category from the UI.
+
+        * Animometer/runner/resources/tests.js:
+        * Animometer/tests/bouncing-particles/resources/bouncing-css-shapes.js:
+        (BouncingCssShape.prototype.animate):
+        * Animometer/tests/misc/compositing-transforms.html: Added.
+        * Animometer/tests/misc/resources/compositing-transforms.js: Added.
+        (BouncingCompositedImage):
+        (BouncingCompositedImage.prototype._move):
+        (BouncingCompositedImage.prototype.animate):
+        (CompositingTransformsStage):
+        (CompositingTransformsStage.prototype.createParticle):
+        (CompositingTransformsStage.prototype.particleWillBeRemoved):
+        (CompositedTransformsBenchmark):
+        (CompositedTransformsBenchmark.prototype.createStage):
+        (window.benchmarkClient.create):
+
 2015-11-30  Said Abou-Hallawa  <sabouhallawa@apple.com>
 
         Fix the graphics benchmark complexity bounds adjustment