Update focus test
authorjonlee@apple.com <jonlee@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Wed, 29 Jun 2016 01:52:14 +0000 (01:52 +0000)
committerjonlee@apple.com <jonlee@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Wed, 29 Jun 2016 01:52:14 +0000 (01:52 +0000)
https://bugs.webkit.org/show_bug.cgi?id=159242
rdar://problem/27070007

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

Move previous test to dom suite, and update the test for better reporting of frame rate, although
it uses a different rendering path.

* Animometer/resources/debug-runner/tests.js: Add to dom suite.
* Animometer/tests/dom/focus.html: Copied from PerformanceTests/Animometer/tests/master/focus.html.
* Animometer/tests/dom/resources/focus.js: Copied from PerformanceTests/Animometer/tests/master/resources/focus.js.
* Animometer/tests/master/focus.html: Remove center element.
* Animometer/tests/master/resources/focus.js: Use narrower size range with smaller particles. Remove the
container elements. Inline getBlurValue and getOpacityValue since they are only called once.

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

PerformanceTests/Animometer/resources/debug-runner/tests.js
PerformanceTests/Animometer/tests/dom/focus.html [new file with mode: 0644]
PerformanceTests/Animometer/tests/dom/resources/focus.js [new file with mode: 0644]
PerformanceTests/Animometer/tests/master/focus.html
PerformanceTests/Animometer/tests/master/resources/focus.js
PerformanceTests/ChangeLog

index 11bb242..accaa3c 100644 (file)
@@ -170,6 +170,10 @@ Suites.push(new Suite("HTML suite",
             name: "Leaves 2.0"
         },
         {
+            url: "dom/focus.html",
+            name: "Focus 2.0"
+        },
+        {
             url: "dom/particles.html",
             name: "DOM particles, SVG masks"
         },
diff --git a/PerformanceTests/Animometer/tests/dom/focus.html b/PerformanceTests/Animometer/tests/dom/focus.html
new file mode 100644 (file)
index 0000000..02264d7
--- /dev/null
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" type="text/css" href="../resources/stage.css">
+    <style type="text/css">
+
+    #stage {
+        background-color: #201A1F;
+        z-index: -10000;
+    }
+
+    #stage > div {
+        position: absolute;
+        overflow: hidden;
+    }
+    #stage div div {
+        position: absolute;
+        background-color: #DEDADD;
+        border-radius: 50%;
+    }
+
+    #center-text {
+        font-size: 90%;
+        transform: translate3d(-50%, -50%, 0);
+    }
+
+    #center-text span {
+        position: absolute;
+        color: #201A1F;
+        font-weight: 400;
+        font-size: 2em;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+    }
+
+    </style>
+</head>
+<body>
+    <div id="stage">
+        <div id="center-text"><div><span>focus</span></div></div>
+    </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/focus.js"></script>
+</body>
+</html>
diff --git a/PerformanceTests/Animometer/tests/dom/resources/focus.js b/PerformanceTests/Animometer/tests/dom/resources/focus.js
new file mode 100644 (file)
index 0000000..d7722cd
--- /dev/null
@@ -0,0 +1,166 @@
+(function() {
+
+var maxVerticalOffset = 50;
+var minimumDiameter = 30;
+var centerDiameter = 90;
+var sizeVariance = 60;
+var travelDistance = 50;
+
+var opacityMultiplier = 30;
+
+var FocusElement = Utilities.createClass(
+    function(stage)
+    {
+        var size = minimumDiameter + sizeVariance;
+
+        // Size and blurring are a function of depth.
+        this._depth = Pseudo.random();
+        var distance = Utilities.lerp(this._depth, 0, sizeVariance);
+        size -= distance;
+
+        var top = Stage.random(0, stage.size.height - size) - stage.maxBlurValue * 3;
+        var left = Stage.random(0, stage.size.width - size) - stage.maxBlurValue * 3;
+
+        this.container = document.createElement('div');
+        this.container.style.width = (size + stage.maxBlurValue * 6) + "px";
+        this.container.style.height = (size + stage.maxBlurValue * 6) + "px";
+        this.container.style.top = top + "px";
+        this.container.style.left = left + "px";
+        this.container.style.zIndex = Math.round((1 - this._depth) * 10);
+
+        this.particle = Utilities.createElement("div", {}, this.container);
+        this.particle.style.width = size + "px";
+        this.particle.style.height = size + "px";
+        this.particle.style.top = (stage.maxBlurValue * 3) + "px";
+        this.particle.style.left = (stage.maxBlurValue * 3) + "px";
+
+        var depthMultiplier = Utilities.lerp(1 - this._depth, 0.8, 1);
+        this._sinMultiplier = Pseudo.random() * Stage.randomSign() * depthMultiplier * travelDistance;
+        this._cosMultiplier = Pseudo.random() * Stage.randomSign() * depthMultiplier * travelDistance;
+    }, {
+
+    hide: function()
+    {
+        this.container.style.display = "none";
+    },
+
+    show: function()
+    {
+        this.container.style.display = "block";
+    },
+
+    animate: function(stage, sinFactor, cosFactor)
+    {
+        var top = sinFactor * this._sinMultiplier;
+        var left = cosFactor * this._cosMultiplier;
+
+        Utilities.setElementPrefixedProperty(this.container, "filter", "blur(" + stage.getBlurValue(this._depth) + "px) opacity(" + stage.getOpacityValue(this._depth) + "%)");
+        this.container.style.transform = "translate3d(" + left + "%, " + top + "%, 0)";
+    }
+});
+
+var FocusStage = Utilities.createSubclass(Stage,
+    function()
+    {
+        Stage.call(this);
+    }, {
+
+    movementDuration: 2500,
+    focusDuration: 1000,
+
+    centerObjectDepth: 0.0,
+
+    minBlurValue: 1.5,
+    maxBlurValue: 15,
+    maxCenterObjectBlurValue: 5,
+
+    initialize: function(benchmark, options)
+    {
+        Stage.prototype.initialize.call(this, benchmark, options);
+
+        this._testElements = [];
+        this._focalPoint = 0.5;
+        this._offsetIndex = 0;
+
+        this._centerElement = document.getElementById("center-text");
+        this._centerElement.style.width = (centerDiameter + this.maxCenterObjectBlurValue * 6) + "px";
+        this._centerElement.style.height = (centerDiameter + this.maxCenterObjectBlurValue * 6) + "px";
+        this._centerElement.style.zIndex = Math.round(10 * this.centerObjectDepth);
+
+        var particle = document.querySelector("#center-text div");
+        particle.style.width = centerDiameter + "px";
+        particle.style.height = centerDiameter + "px";
+        particle.style.top = (this.maxCenterObjectBlurValue * 3) + "px";
+        particle.style.left = (this.maxCenterObjectBlurValue * 3) + "px";
+
+        var blur = this.getBlurValue(this.centerObjectDepth, true);
+        Utilities.setElementPrefixedProperty(this._centerElement, "filter", "blur(" + blur + "px)");
+    },
+
+    complexity: function()
+    {
+        return 1 + this._offsetIndex;
+    },
+
+    tune: function(count)
+    {
+        if (count == 0)
+            return;
+
+        if (count < 0) {
+            this._offsetIndex = Math.max(0, this._offsetIndex + count);
+            for (var i = this._offsetIndex; i < this._testElements.length; ++i)
+                this._testElements[i].hide();
+            return;
+        }
+
+        var newIndex = this._offsetIndex + count;
+        for (var i = this._testElements.length; i < newIndex; ++i) {
+            var obj = new FocusElement(this);
+            this._testElements.push(obj);
+            this.element.appendChild(obj.container);
+        }
+        for (var i = this._offsetIndex; i < newIndex; ++i)
+            this._testElements[i].show();
+        this._offsetIndex = newIndex;
+    },
+
+    animate: function()
+    {
+        var time = this._benchmark.timestamp;
+        var sinFactor = Math.sin(time / this.movementDuration);
+        var cosFactor = Math.cos(time / this.movementDuration);
+
+        var focusProgress = 0.5 + 0.5 * Math.sin(time / this.focusDuration);
+        this._focalPoint = focusProgress;
+
+        Utilities.setElementPrefixedProperty(this._centerElement, "filter", "blur(" + this.getBlurValue(this.centerObjectDepth, true) + "px)");
+
+        for (var i = 0; i < this._offsetIndex; ++i)
+            this._testElements[i].animate(this, sinFactor, cosFactor);
+    },
+
+    getBlurValue: function(depth, isCenter)
+    {
+        if (isCenter)
+            return 1 + Math.abs(depth - this._focalPoint) * (this.maxCenterObjectBlurValue - 1);
+
+        return Utilities.lerp(Math.abs(depth - this._focalPoint), this.minBlurValue, this.maxBlurValue);
+    },
+
+    getOpacityValue: function(depth)
+    {
+        return Math.max(1, opacityMultiplier * (1 - Math.abs(depth - this._focalPoint)));
+    },
+});
+
+var FocusBenchmark = Utilities.createSubclass(Benchmark,
+    function(options)
+    {
+        Benchmark.call(this, new FocusStage(), options);
+    }
+);
+
+window.benchmarkClass = FocusBenchmark;
+
+}());
index 02264d7..e97a7cd 100644 (file)
@@ -7,40 +7,18 @@
 
     #stage {
         background-color: #201A1F;
-        z-index: -10000;
     }
 
-    #stage > div {
-        position: absolute;
-        overflow: hidden;
-    }
-    #stage div div {
+    #stage div {
         position: absolute;
         background-color: #DEDADD;
         border-radius: 50%;
+        display: none;
     }
-
-    #center-text {
-        font-size: 90%;
-        transform: translate3d(-50%, -50%, 0);
-    }
-
-    #center-text span {
-        position: absolute;
-        color: #201A1F;
-        font-weight: 400;
-        font-size: 2em;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-    }
-
     </style>
 </head>
 <body>
-    <div id="stage">
-        <div id="center-text"><div><span>focus</span></div></div>
-    </div>
+    <div id="stage"></div>
     <script src="../../resources/strings.js"></script>
     <script src="../../resources/extensions.js"></script>
     <script src="../../resources/statistics.js"></script>
index 26c2465..04842e7 100644 (file)
@@ -1,61 +1,63 @@
 (function() {
 
-var maxVerticalOffset = 50;
 var minimumDiameter = 30;
-var centerDiameter = 90;
-var sizeVariance = 60;
+var sizeVariance = 20;
 var travelDistance = 50;
 
+var minBlurValue = 1;
+var maxBlurValue = 10;
+
 var opacityMultiplier = 30;
+var focusDuration = 1000;
+var movementDuration = 2500;
 
 var FocusElement = Utilities.createClass(
     function(stage)
     {
         var size = minimumDiameter + sizeVariance;
 
-        // size and blurring are a function of depth
+        // Size and blurring are a function of depth.
         this._depth = Pseudo.random();
         var distance = Utilities.lerp(this._depth, 0, sizeVariance);
         size -= distance;
 
-        var top = Stage.random(0, stage.size.height - size) - stage.maxBlurValue * 3;
-        var left = Stage.random(0, stage.size.width - size) - stage.maxBlurValue * 3;
-
-        this.container = document.createElement('div');
-        this.container.style.width = (size + stage.maxBlurValue * 6) + "px";
-        this.container.style.height = (size + stage.maxBlurValue * 6) + "px";
-        this.container.style.top = top + "px";
-        this.container.style.left = left + "px";
-        this.container.style.zIndex = Math.round((1 - this._depth) * 10);
+        var top = Stage.random(0, stage.size.height - size);
+        var left = Stage.random(0, stage.size.width - size);
 
-        this.particle = Utilities.createElement("div", {}, this.container);
+        this.particle = document.createElement("div");
         this.particle.style.width = size + "px";
         this.particle.style.height = size + "px";
-        this.particle.style.top = (stage.maxBlurValue * 3) + "px";
-        this.particle.style.left = (stage.maxBlurValue * 3) + "px";
+        this.particle.style.top = top + "px";
+        this.particle.style.left = left + "px";
+        this.particle.style.zIndex = Math.round((1 - this._depth) * 10);
 
         var depthMultiplier = Utilities.lerp(1 - this._depth, 0.8, 1);
         this._sinMultiplier = Pseudo.random() * Stage.randomSign() * depthMultiplier * travelDistance;
         this._cosMultiplier = Pseudo.random() * Stage.randomSign() * depthMultiplier * travelDistance;
+
+        this.animate(stage, 0, 0);
     }, {
 
     hide: function()
     {
-        this.container.style.display = "none";
+        this.particle.style.display = "none";
     },
 
     show: function()
     {
-        this.container.style.display = "block";
+        this.particle.style.display = "block";
     },
 
     animate: function(stage, sinFactor, cosFactor)
     {
         var top = sinFactor * this._sinMultiplier;
         var left = cosFactor * this._cosMultiplier;
+        var distance = Math.abs(this._depth - stage.focalPoint);
+        var blur = Utilities.lerp(distance, minBlurValue, maxBlurValue);
+        var opacity = Math.max(5, opacityMultiplier * (1 - distance));
 
-        Utilities.setElementPrefixedProperty(this.container, "filter", "blur(" + stage.getBlurValue(this._depth) + "px) opacity(" + stage.getOpacityValue(this._depth) + "%)");
-        this.container.style.transform = "translate3d(" + left + "%, " + top + "%, 0)";
+        Utilities.setElementPrefixedProperty(this.particle, "filter", "blur(" + blur + "px) opacity(" + opacity + "%)");
+        this.particle.style.transform = "translate3d(" + left + "%, " + top + "%, 0)";
     }
 });
 
@@ -65,41 +67,18 @@ var FocusStage = Utilities.createSubclass(Stage,
         Stage.call(this);
     }, {
 
-    movementDuration: 2500,
-    focusDuration: 1000,
-
-    centerObjectDepth: 0.0,
-
-    minBlurValue: 1.5,
-    maxBlurValue: 15,
-    maxCenterObjectBlurValue: 5,
-
     initialize: function(benchmark, options)
     {
         Stage.prototype.initialize.call(this, benchmark, options);
 
         this._testElements = [];
-        this._focalPoint = 0.5;
         this._offsetIndex = 0;
-
-        this._centerElement = document.getElementById("center-text");
-        this._centerElement.style.width = (centerDiameter + this.maxCenterObjectBlurValue * 6) + "px";
-        this._centerElement.style.height = (centerDiameter + this.maxCenterObjectBlurValue * 6) + "px";
-        this._centerElement.style.zIndex = Math.round(10 * this.centerObjectDepth);
-
-        var particle = document.querySelector("#center-text div");
-        particle.style.width = centerDiameter + "px";
-        particle.style.height = centerDiameter + "px";
-        particle.style.top = (this.maxCenterObjectBlurValue * 3) + "px";
-        particle.style.left = (this.maxCenterObjectBlurValue * 3) + "px";
-
-        var blur = this.getBlurValue(this.centerObjectDepth, true);
-        Utilities.setElementPrefixedProperty(this._centerElement, "filter", "blur(" + blur + "px)");
+        this.focalPoint = 0.5;
     },
 
     complexity: function()
     {
-        return 1 + this._offsetIndex;
+        return this._offsetIndex;
     },
 
     tune: function(count)
@@ -118,7 +97,7 @@ var FocusStage = Utilities.createSubclass(Stage,
         for (var i = this._testElements.length; i < newIndex; ++i) {
             var obj = new FocusElement(this);
             this._testElements.push(obj);
-            this.element.appendChild(obj.container);
+            this.element.appendChild(obj.particle);
         }
         for (var i = this._offsetIndex; i < newIndex; ++i)
             this._testElements[i].show();
@@ -128,31 +107,14 @@ var FocusStage = Utilities.createSubclass(Stage,
     animate: function()
     {
         var time = this._benchmark.timestamp;
-        var sinFactor = Math.sin(time / this.movementDuration);
-        var cosFactor = Math.cos(time / this.movementDuration);
-
-        var focusProgress = 0.5 + 0.5 * Math.sin(time / this.focusDuration);
-        this._focalPoint = focusProgress;
+        var sinFactor = Math.sin(time / movementDuration);
+        var cosFactor = Math.cos(time / movementDuration);
 
-        // update center element before loop
-        Utilities.setElementPrefixedProperty(this._centerElement, "filter", "blur(" + this.getBlurValue(this.centerObjectDepth, true) + "px)");
+        this.focalPoint = 0.5 + 0.5 * Math.sin(time / focusDuration);
 
         for (var i = 0; i < this._offsetIndex; ++i)
             this._testElements[i].animate(this, sinFactor, cosFactor);
-    },
-
-    getBlurValue: function(depth, isCenter)
-    {
-        if (isCenter)
-            return 1 + Math.abs(depth - this._focalPoint) * (this.maxCenterObjectBlurValue - 1);
-
-        return Utilities.lerp(Math.abs(depth - this._focalPoint), this.minBlurValue, this.maxBlurValue);
-    },
-
-    getOpacityValue: function(depth)
-    {
-        return Math.max(1, opacityMultiplier * (1 - Math.abs(depth - this._focalPoint)));
-    },
+    }
 });
 
 var FocusBenchmark = Utilities.createSubclass(Benchmark,
index cf6eaef..8c66c87 100644 (file)
@@ -1,3 +1,22 @@
+2016-06-28  Jon Lee  <jonlee@apple.com>
+
+        Update focus test
+        https://bugs.webkit.org/show_bug.cgi?id=159242
+        rdar://problem/27070007
+
+        Reviewed by Dean Jackson.
+        Provisionally reviewed by Said Abou-Hallawa.
+
+        Move previous test to dom suite, and update the test for better reporting of frame rate, although
+        it uses a different rendering path.
+
+        * Animometer/resources/debug-runner/tests.js: Add to dom suite.
+        * Animometer/tests/dom/focus.html: Copied from PerformanceTests/Animometer/tests/master/focus.html.
+        * Animometer/tests/dom/resources/focus.js: Copied from PerformanceTests/Animometer/tests/master/resources/focus.js.
+        * Animometer/tests/master/focus.html: Remove center element.
+        * Animometer/tests/master/resources/focus.js: Use narrower size range with smaller particles. Remove the
+        container elements. Inline getBlurValue and getOpacityValue since they are only called once.
+
 2016-06-28  Filip Pizlo  <fpizlo@apple.com>
 
         Move Air.js and Basic into ES6SampleBench