Diff
Modified: trunk/PerformanceTests/Animometer/resources/debug-runner/tests.js (202600 => 202601)
--- trunk/PerformanceTests/Animometer/resources/debug-runner/tests.js 2016-06-29 01:37:53 UTC (rev 202600)
+++ trunk/PerformanceTests/Animometer/resources/debug-runner/tests.js 2016-06-29 01:52:14 UTC (rev 202601)
@@ -170,6 +170,10 @@
name: "Leaves 2.0"
},
{
+ url: "dom/focus.html",
+ name: "Focus 2.0"
+ },
+ {
url: "dom/particles.html",
name: "DOM particles, SVG masks"
},
Copied: trunk/PerformanceTests/Animometer/tests/dom/focus.html (from rev 202600, trunk/PerformanceTests/Animometer/tests/master/focus.html) (0 => 202601)
--- trunk/PerformanceTests/Animometer/tests/dom/focus.html (rev 0)
+++ trunk/PerformanceTests/Animometer/tests/dom/focus.html 2016-06-29 01:52:14 UTC (rev 202601)
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+ <link rel="stylesheet" type="text/css" href=""
+ <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=""
+ <script src=""
+ <script src=""
+ <script src=""
+ <script src=""
+ <script src=""
+</body>
+</html>
Copied: trunk/PerformanceTests/Animometer/tests/dom/resources/focus.js (from rev 202600, trunk/PerformanceTests/Animometer/tests/master/resources/focus.js) (0 => 202601)
--- trunk/PerformanceTests/Animometer/tests/dom/resources/focus.js (rev 0)
+++ trunk/PerformanceTests/Animometer/tests/dom/resources/focus.js 2016-06-29 01:52:14 UTC (rev 202601)
@@ -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;
+
+}());
Modified: trunk/PerformanceTests/Animometer/tests/master/focus.html (202600 => 202601)
--- trunk/PerformanceTests/Animometer/tests/master/focus.html 2016-06-29 01:37:53 UTC (rev 202600)
+++ trunk/PerformanceTests/Animometer/tests/master/focus.html 2016-06-29 01:52:14 UTC (rev 202601)
@@ -7,40 +7,18 @@
#stage {
background-color: #201A1F;
- z-index: -10000;
}
- #stage > div {
+ #stage div {
position: absolute;
- overflow: hidden;
- }
- #stage div 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=""
<script src=""
<script src=""
Modified: trunk/PerformanceTests/Animometer/tests/master/resources/focus.js (202600 => 202601)
--- trunk/PerformanceTests/Animometer/tests/master/resources/focus.js 2016-06-29 01:37:53 UTC (rev 202600)
+++ trunk/PerformanceTests/Animometer/tests/master/resources/focus.js 2016-06-29 01:52:14 UTC (rev 202601)
@@ -1,12 +1,15 @@
(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)
@@ -13,40 +16,36 @@
{
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;
+ var top = Stage.random(0, stage.size.height - size);
+ var left = Stage.random(0, stage.size.width - size);
- 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 = 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)
@@ -53,9 +52,12 @@
{
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 @@
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 @@
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 @@
animate: function()
{
var time = this._benchmark.timestamp;
- var sinFactor = Math.sin(time / this.movementDuration);
- var cosFactor = Math.cos(time / this.movementDuration);
+ var sinFactor = Math.sin(time / movementDuration);
+ var cosFactor = Math.cos(time / movementDuration);
- var focusProgress = 0.5 + 0.5 * Math.sin(time / this.focusDuration);
- this._focalPoint = focusProgress;
+ this.focalPoint = 0.5 + 0.5 * Math.sin(time / focusDuration);
- // update center element before loop
- 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,
Modified: trunk/PerformanceTests/ChangeLog (202600 => 202601)
--- trunk/PerformanceTests/ChangeLog 2016-06-29 01:37:53 UTC (rev 202600)
+++ trunk/PerformanceTests/ChangeLog 2016-06-29 01:52:14 UTC (rev 202601)
@@ -1,3 +1,22 @@
+2016-06-28 Jon Lee <[email protected]>
+
+ 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 <[email protected]>
Move Air.js and Basic into ES6SampleBench
