<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[202601] trunk/PerformanceTests</title>
</head>
<body>
<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; }
#msg dl a { font-weight: bold}
#msg dl a:link { color:#fc3; }
#msg dl a:active { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta">
<dt>Revision</dt> <dd><a href="http://trac.webkit.org/projects/webkit/changeset/202601">202601</a></dd>
<dt>Author</dt> <dd>jonlee@apple.com</dd>
<dt>Date</dt> <dd>2016-06-28 18:52:14 -0700 (Tue, 28 Jun 2016)</dd>
</dl>
<h3>Log Message</h3>
<pre>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.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkPerformanceTestsAnimometerresourcesdebugrunnertestsjs">trunk/PerformanceTests/Animometer/resources/debug-runner/tests.js</a></li>
<li><a href="#trunkPerformanceTestsAnimometertestsmasterfocushtml">trunk/PerformanceTests/Animometer/tests/master/focus.html</a></li>
<li><a href="#trunkPerformanceTestsAnimometertestsmasterresourcesfocusjs">trunk/PerformanceTests/Animometer/tests/master/resources/focus.js</a></li>
<li><a href="#trunkPerformanceTestsChangeLog">trunk/PerformanceTests/ChangeLog</a></li>
</ul>
<h3>Added Paths</h3>
<ul>
<li><a href="#trunkPerformanceTestsAnimometertestsdomfocushtml">trunk/PerformanceTests/Animometer/tests/dom/focus.html</a></li>
<li><a href="#trunkPerformanceTestsAnimometertestsdomresourcesfocusjs">trunk/PerformanceTests/Animometer/tests/dom/resources/focus.js</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkPerformanceTestsAnimometerresourcesdebugrunnertestsjs"></a>
<div class="modfile"><h4>Modified: trunk/PerformanceTests/Animometer/resources/debug-runner/tests.js (202600 => 202601)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -170,6 +170,10 @@
</span><span class="cx"> name: "Leaves 2.0"
</span><span class="cx"> },
</span><span class="cx"> {
</span><ins>+ url: "dom/focus.html",
+ name: "Focus 2.0"
+ },
+ {
</ins><span class="cx"> url: "dom/particles.html",
</span><span class="cx"> name: "DOM particles, SVG masks"
</span><span class="cx"> },
</span></span></pre></div>
<a id="trunkPerformanceTestsAnimometertestsdomfocushtmlfromrev202600trunkPerformanceTestsAnimometertestsmasterfocushtml"></a>
<div class="copfile"><h4>Copied: trunk/PerformanceTests/Animometer/tests/dom/focus.html (from rev 202600, trunk/PerformanceTests/Animometer/tests/master/focus.html) (0 => 202601)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -0,0 +1,51 @@
</span><ins>+<!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>
</ins></span></pre></div>
<a id="trunkPerformanceTestsAnimometertestsdomresourcesfocusjsfromrev202600trunkPerformanceTestsAnimometertestsmasterresourcesfocusjs"></a>
<div class="copfile"><h4>Copied: trunk/PerformanceTests/Animometer/tests/dom/resources/focus.js (from rev 202600, trunk/PerformanceTests/Animometer/tests/master/resources/focus.js) (0 => 202601)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -0,0 +1,166 @@
</span><ins>+(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;
+
+}());
</ins></span></pre></div>
<a id="trunkPerformanceTestsAnimometertestsmasterfocushtml"></a>
<div class="modfile"><h4>Modified: trunk/PerformanceTests/Animometer/tests/master/focus.html (202600 => 202601)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -7,40 +7,18 @@
</span><span class="cx">
</span><span class="cx"> #stage {
</span><span class="cx"> background-color: #201A1F;
</span><del>- z-index: -10000;
</del><span class="cx"> }
</span><span class="cx">
</span><del>- #stage > div {
</del><ins>+ #stage div {
</ins><span class="cx"> position: absolute;
</span><del>- overflow: hidden;
- }
- #stage div div {
- position: absolute;
</del><span class="cx"> background-color: #DEDADD;
</span><span class="cx"> border-radius: 50%;
</span><ins>+ display: none;
</ins><span class="cx"> }
</span><del>-
- #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%);
- }
-
</del><span class="cx"> </style>
</span><span class="cx"> </head>
</span><span class="cx"> <body>
</span><del>- <div id="stage">
- <div id="center-text"><div><span>focus</span></div></div>
- </div>
</del><ins>+ <div id="stage"></div>
</ins><span class="cx"> <script src="../../resources/strings.js"></script>
</span><span class="cx"> <script src="../../resources/extensions.js"></script>
</span><span class="cx"> <script src="../../resources/statistics.js"></script>
</span></span></pre></div>
<a id="trunkPerformanceTestsAnimometertestsmasterresourcesfocusjs"></a>
<div class="modfile"><h4>Modified: trunk/PerformanceTests/Animometer/tests/master/resources/focus.js (202600 => 202601)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -1,12 +1,15 @@
</span><span class="cx"> (function() {
</span><span class="cx">
</span><del>-var maxVerticalOffset = 50;
</del><span class="cx"> var minimumDiameter = 30;
</span><del>-var centerDiameter = 90;
-var sizeVariance = 60;
</del><ins>+var sizeVariance = 20;
</ins><span class="cx"> var travelDistance = 50;
</span><span class="cx">
</span><ins>+var minBlurValue = 1;
+var maxBlurValue = 10;
+
</ins><span class="cx"> var opacityMultiplier = 30;
</span><ins>+var focusDuration = 1000;
+var movementDuration = 2500;
</ins><span class="cx">
</span><span class="cx"> var FocusElement = Utilities.createClass(
</span><span class="cx"> function(stage)
</span><span class="lines">@@ -13,40 +16,36 @@
</span><span class="cx"> {
</span><span class="cx"> var size = minimumDiameter + sizeVariance;
</span><span class="cx">
</span><del>- // size and blurring are a function of depth
</del><ins>+ // Size and blurring are a function of depth.
</ins><span class="cx"> this._depth = Pseudo.random();
</span><span class="cx"> var distance = Utilities.lerp(this._depth, 0, sizeVariance);
</span><span class="cx"> size -= distance;
</span><span class="cx">
</span><del>- var top = Stage.random(0, stage.size.height - size) - stage.maxBlurValue * 3;
- var left = Stage.random(0, stage.size.width - size) - stage.maxBlurValue * 3;
</del><ins>+ var top = Stage.random(0, stage.size.height - size);
+ var left = Stage.random(0, stage.size.width - size);
</ins><span class="cx">
</span><del>- 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);
</del><ins>+ this.particle = document.createElement("div");
</ins><span class="cx"> this.particle.style.width = size + "px";
</span><span class="cx"> this.particle.style.height = size + "px";
</span><del>- this.particle.style.top = (stage.maxBlurValue * 3) + "px";
- this.particle.style.left = (stage.maxBlurValue * 3) + "px";
</del><ins>+ this.particle.style.top = top + "px";
+ this.particle.style.left = left + "px";
+ this.particle.style.zIndex = Math.round((1 - this._depth) * 10);
</ins><span class="cx">
</span><span class="cx"> var depthMultiplier = Utilities.lerp(1 - this._depth, 0.8, 1);
</span><span class="cx"> this._sinMultiplier = Pseudo.random() * Stage.randomSign() * depthMultiplier * travelDistance;
</span><span class="cx"> this._cosMultiplier = Pseudo.random() * Stage.randomSign() * depthMultiplier * travelDistance;
</span><ins>+
+ this.animate(stage, 0, 0);
</ins><span class="cx"> }, {
</span><span class="cx">
</span><span class="cx"> hide: function()
</span><span class="cx"> {
</span><del>- this.container.style.display = "none";
</del><ins>+ this.particle.style.display = "none";
</ins><span class="cx"> },
</span><span class="cx">
</span><span class="cx"> show: function()
</span><span class="cx"> {
</span><del>- this.container.style.display = "block";
</del><ins>+ this.particle.style.display = "block";
</ins><span class="cx"> },
</span><span class="cx">
</span><span class="cx"> animate: function(stage, sinFactor, cosFactor)
</span><span class="lines">@@ -53,9 +52,12 @@
</span><span class="cx"> {
</span><span class="cx"> var top = sinFactor * this._sinMultiplier;
</span><span class="cx"> var left = cosFactor * this._cosMultiplier;
</span><ins>+ var distance = Math.abs(this._depth - stage.focalPoint);
+ var blur = Utilities.lerp(distance, minBlurValue, maxBlurValue);
+ var opacity = Math.max(5, opacityMultiplier * (1 - distance));
</ins><span class="cx">
</span><del>- Utilities.setElementPrefixedProperty(this.container, "filter", "blur(" + stage.getBlurValue(this._depth) + "px) opacity(" + stage.getOpacityValue(this._depth) + "%)");
- this.container.style.transform = "translate3d(" + left + "%, " + top + "%, 0)";
</del><ins>+ Utilities.setElementPrefixedProperty(this.particle, "filter", "blur(" + blur + "px) opacity(" + opacity + "%)");
+ this.particle.style.transform = "translate3d(" + left + "%, " + top + "%, 0)";
</ins><span class="cx"> }
</span><span class="cx"> });
</span><span class="cx">
</span><span class="lines">@@ -65,41 +67,18 @@
</span><span class="cx"> Stage.call(this);
</span><span class="cx"> }, {
</span><span class="cx">
</span><del>- movementDuration: 2500,
- focusDuration: 1000,
-
- centerObjectDepth: 0.0,
-
- minBlurValue: 1.5,
- maxBlurValue: 15,
- maxCenterObjectBlurValue: 5,
-
</del><span class="cx"> initialize: function(benchmark, options)
</span><span class="cx"> {
</span><span class="cx"> Stage.prototype.initialize.call(this, benchmark, options);
</span><span class="cx">
</span><span class="cx"> this._testElements = [];
</span><del>- this._focalPoint = 0.5;
</del><span class="cx"> this._offsetIndex = 0;
</span><del>-
- 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)");
</del><ins>+ this.focalPoint = 0.5;
</ins><span class="cx"> },
</span><span class="cx">
</span><span class="cx"> complexity: function()
</span><span class="cx"> {
</span><del>- return 1 + this._offsetIndex;
</del><ins>+ return this._offsetIndex;
</ins><span class="cx"> },
</span><span class="cx">
</span><span class="cx"> tune: function(count)
</span><span class="lines">@@ -118,7 +97,7 @@
</span><span class="cx"> for (var i = this._testElements.length; i < newIndex; ++i) {
</span><span class="cx"> var obj = new FocusElement(this);
</span><span class="cx"> this._testElements.push(obj);
</span><del>- this.element.appendChild(obj.container);
</del><ins>+ this.element.appendChild(obj.particle);
</ins><span class="cx"> }
</span><span class="cx"> for (var i = this._offsetIndex; i < newIndex; ++i)
</span><span class="cx"> this._testElements[i].show();
</span><span class="lines">@@ -128,31 +107,14 @@
</span><span class="cx"> animate: function()
</span><span class="cx"> {
</span><span class="cx"> var time = this._benchmark.timestamp;
</span><del>- var sinFactor = Math.sin(time / this.movementDuration);
- var cosFactor = Math.cos(time / this.movementDuration);
</del><ins>+ var sinFactor = Math.sin(time / movementDuration);
+ var cosFactor = Math.cos(time / movementDuration);
</ins><span class="cx">
</span><del>- var focusProgress = 0.5 + 0.5 * Math.sin(time / this.focusDuration);
- this._focalPoint = focusProgress;
</del><ins>+ this.focalPoint = 0.5 + 0.5 * Math.sin(time / focusDuration);
</ins><span class="cx">
</span><del>- // update center element before loop
- Utilities.setElementPrefixedProperty(this._centerElement, "filter", "blur(" + this.getBlurValue(this.centerObjectDepth, true) + "px)");
-
</del><span class="cx"> for (var i = 0; i < this._offsetIndex; ++i)
</span><span class="cx"> this._testElements[i].animate(this, sinFactor, cosFactor);
</span><del>- },
-
- 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)));
- },
</del><ins>+ }
</ins><span class="cx"> });
</span><span class="cx">
</span><span class="cx"> var FocusBenchmark = Utilities.createSubclass(Benchmark,
</span></span></pre></div>
<a id="trunkPerformanceTestsChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/PerformanceTests/ChangeLog (202600 => 202601)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/PerformanceTests/ChangeLog 2016-06-29 01:37:53 UTC (rev 202600)
+++ trunk/PerformanceTests/ChangeLog 2016-06-29 01:52:14 UTC (rev 202601)
</span><span class="lines">@@ -1,3 +1,22 @@
</span><ins>+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.
+
</ins><span class="cx"> 2016-06-28 Filip Pizlo <fpizlo@apple.com>
</span><span class="cx">
</span><span class="cx"> Move Air.js and Basic into ES6SampleBench
</span></span></pre>
</div>
</div>
</body>
</html>