<!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>[196415] 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/196415">196415</a></dd>
<dt>Author</dt> <dd>jonlee@apple.com</dd>
<dt>Date</dt> <dd>2016-02-10 23:42:00 -0800 (Wed, 10 Feb 2016)</dd>
</dl>
<h3>Log Message</h3>
<pre>Add new benchmark tests.
https://bugs.webkit.org/show_bug.cgi?id=154063
Provisionally reviewed by Said Abou-Hallawa.
Add tests for get/put image data, filters, opacity, and css transforms.
* Animometer/resources/runner/benchmark-runner.js:
(_runBenchmarkAndRecordResults): Update the body background color to match that of
the stage.
(this._runNextIteration): Clear the background color style for the results page.
* Animometer/resources/runner/tests.js:
* Animometer/tests/master/focus.html: Added.
* Animometer/tests/master/image-data.html: Added.
* Animometer/tests/master/multiply.html: Added.
* Animometer/tests/master/resources/focus.js: Added.
* Animometer/tests/master/resources/image-data.js: Added.
* Animometer/tests/master/resources/multiply.js: Added.
* Animometer/tests/master/resources/stage.css: Move common styles out.
* Animometer/tests/resources/main.js: Update Stage.randomBool to use Math.random.
Add Stage.randomSign for randomly setting a direction. Add the notion of the
current timestamp of the test to Benchmark, since some animations cycle through
colors and rely on an incremental counter like the time.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkPerformanceTestsAnimometerresourcesextensionsjs">trunk/PerformanceTests/Animometer/resources/extensions.js</a></li>
<li><a href="#trunkPerformanceTestsAnimometerresourcesrunnerbenchmarkrunnerjs">trunk/PerformanceTests/Animometer/resources/runner/benchmark-runner.js</a></li>
<li><a href="#trunkPerformanceTestsAnimometerresourcesrunnertestsjs">trunk/PerformanceTests/Animometer/resources/runner/tests.js</a></li>
<li><a href="#trunkPerformanceTestsAnimometertestsmasterresourcesstagecss">trunk/PerformanceTests/Animometer/tests/master/resources/stage.css</a></li>
<li><a href="#trunkPerformanceTestsAnimometertestsresourcesmainjs">trunk/PerformanceTests/Animometer/tests/resources/main.js</a></li>
<li><a href="#trunkPerformanceTestsChangeLog">trunk/PerformanceTests/ChangeLog</a></li>
</ul>
<h3>Added Paths</h3>
<ul>
<li><a href="#trunkPerformanceTestsAnimometertestsmasterfocushtml">trunk/PerformanceTests/Animometer/tests/master/focus.html</a></li>
<li><a href="#trunkPerformanceTestsAnimometertestsmasterimagedatahtml">trunk/PerformanceTests/Animometer/tests/master/image-data.html</a></li>
<li><a href="#trunkPerformanceTestsAnimometertestsmastermultiplyhtml">trunk/PerformanceTests/Animometer/tests/master/multiply.html</a></li>
<li><a href="#trunkPerformanceTestsAnimometertestsmasterresourcesfocusjs">trunk/PerformanceTests/Animometer/tests/master/resources/focus.js</a></li>
<li><a href="#trunkPerformanceTestsAnimometertestsmasterresourcesimagedatajs">trunk/PerformanceTests/Animometer/tests/master/resources/image-data.js</a></li>
<li><a href="#trunkPerformanceTestsAnimometertestsmasterresourcesmultiplyjs">trunk/PerformanceTests/Animometer/tests/master/resources/multiply.js</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkPerformanceTestsAnimometerresourcesextensionsjs"></a>
<div class="modfile"><h4>Modified: trunk/PerformanceTests/Animometer/resources/extensions.js (196414 => 196415)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/PerformanceTests/Animometer/resources/extensions.js 2016-02-11 04:06:37 UTC (rev 196414)
+++ trunk/PerformanceTests/Animometer/resources/extensions.js 2016-02-11 07:42:00 UTC (rev 196415)
</span><span class="lines">@@ -83,21 +83,21 @@
</span><span class="cx"> parentElement.appendChild(element);
</span><span class="cx"> return element;
</span><span class="cx"> },
</span><del>-
</del><ins>+
</ins><span class="cx"> browserPrefix: function()
</span><span class="cx"> {
</span><span class="cx"> // Get the HTML element's CSSStyleDeclaration
</span><span class="cx"> var styles = window.getComputedStyle(document.documentElement, '');
</span><del>-
</del><ins>+
</ins><span class="cx"> // Convert the styles list to an array
</span><span class="cx"> var stylesArray = Array.prototype.slice.call(styles);
</span><del>-
</del><ins>+
</ins><span class="cx"> // Concatenate all the styles in one big string
</span><span class="cx"> var stylesString = stylesArray.join('');
</span><span class="cx">
</span><span class="cx"> // Search the styles string for a known prefix type, settle on Opera if none is found.
</span><span class="cx"> var prefixes = stylesString.match(/-(moz|webkit|ms)-/) || (styles.OLink === '' && ['', 'o']);
</span><del>-
</del><ins>+
</ins><span class="cx"> // prefixes has two elements; e.g. for webkit it has ['-webkit-', 'webkit'];
</span><span class="cx"> var prefix = prefixes[1];
</span><span class="cx">
</span><span class="lines">@@ -112,10 +112,20 @@
</span><span class="cx"> js: prefix[0].toUpperCase() + prefix.substr(1)
</span><span class="cx"> };
</span><span class="cx"> },
</span><del>-
</del><ins>+
</ins><span class="cx"> setElementPrefixedProperty: function(element, property, value)
</span><span class="cx"> {
</span><span class="cx"> element.style[property] = element.style[this.browserPrefix().js + property[0].toUpperCase() + property.substr(1)] = value;
</span><ins>+ },
+
+ progressValue: function(value, min, max)
+ {
+ return (value - min) / (max - min);
+ },
+
+ lerp: function(value, min, max)
+ {
+ return min + (max - min) * value;
</ins><span class="cx"> }
</span><span class="cx"> };
</span><span class="cx">
</span></span></pre></div>
<a id="trunkPerformanceTestsAnimometerresourcesrunnerbenchmarkrunnerjs"></a>
<div class="modfile"><h4>Modified: trunk/PerformanceTests/Animometer/resources/runner/benchmark-runner.js (196414 => 196415)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/PerformanceTests/Animometer/resources/runner/benchmark-runner.js 2016-02-11 04:06:37 UTC (rev 196414)
+++ trunk/PerformanceTests/Animometer/resources/runner/benchmark-runner.js 2016-02-11 07:42:00 UTC (rev 196415)
</span><span class="lines">@@ -94,6 +94,7 @@
</span><span class="cx"> Utilities.extendObject(options, contentWindow.Utilities.parseParameters());
</span><span class="cx">
</span><span class="cx"> var benchmark = new contentWindow.benchmarkClass(options);
</span><ins>+ document.body.style.backgroundColor = benchmark.backgroundColor();
</ins><span class="cx"> benchmark.run().then(function(results) {
</span><span class="cx"> var suiteResults = self._suitesResults[suite.name] || {};
</span><span class="cx"> suiteResults[test.name] = results;
</span><span class="lines">@@ -153,8 +154,10 @@
</span><span class="cx"> currentIteration++;
</span><span class="cx"> if (currentIteration < self._client.iterationCount)
</span><span class="cx"> self.runAllSteps();
</span><del>- else if (this._client && this._client.didFinishLastIteration)
</del><ins>+ else if (this._client && this._client.didFinishLastIteration) {
+ document.body.style.backgroundColor = "";
</ins><span class="cx"> self._client.didFinishLastIteration();
</span><ins>+ }
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> if (this._client && this._client.willStartFirstIteration)
</span></span></pre></div>
<a id="trunkPerformanceTestsAnimometerresourcesrunnertestsjs"></a>
<div class="modfile"><h4>Modified: trunk/PerformanceTests/Animometer/resources/runner/tests.js (196414 => 196415)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/PerformanceTests/Animometer/resources/runner/tests.js 2016-02-11 04:06:37 UTC (rev 196414)
+++ trunk/PerformanceTests/Animometer/resources/runner/tests.js 2016-02-11 07:42:00 UTC (rev 196415)
</span><span class="lines">@@ -13,6 +13,10 @@
</span><span class="cx"> Suites.push(new Suite("Animometer",
</span><span class="cx"> [
</span><span class="cx"> {
</span><ins>+ url: "master/multiply.html",
+ name: "Multiply"
+ },
+ {
</ins><span class="cx"> url: "master/canvas-stage.html?pathType=arcs",
</span><span class="cx"> name: "Canvas arcs"
</span><span class="cx"> },
</span><span class="lines">@@ -25,6 +29,14 @@
</span><span class="cx"> name: "Canvas line segments"
</span><span class="cx"> },
</span><span class="cx"> {
</span><ins>+ url: "master/focus.html",
+ name: "Focus"
+ },
+ {
+ url: "master/image-data.html",
+ name: "Images"
+ },
+ {
</ins><span class="cx"> url: "master/particles.html",
</span><span class="cx"> name: "DOM particles, SVG masks"
</span><span class="cx"> },
</span></span></pre></div>
<a id="trunkPerformanceTestsAnimometertestsmasterfocushtml"></a>
<div class="addfile"><h4>Added: trunk/PerformanceTests/Animometer/tests/master/focus.html (0 => 196415)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/PerformanceTests/Animometer/tests/master/focus.html (rev 0)
+++ trunk/PerformanceTests/Animometer/tests/master/focus.html 2016-02-11 07:42:00 UTC (rev 196415)
</span><span class="lines">@@ -0,0 +1,42 @@
</span><ins>+<!DOCTYPE html>
+<html>
+<head>
+ <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;
+ background-color: #DEDADD;
+ border-radius: 50%;
+ }
+
+ #center-text span {
+ color: #201A1F;
+ font-weight: 400;
+ font-size: 2em;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translateX(-50%) translateY(-50%);
+ }
+
+ </style>
+</head>
+<body>
+ <div id="stage">
+ <div id="center-text"><span>focus</span></div>
+ </div>
+ <script src="../../resources/strings.js"></script>
+ <script src="../../resources/extensions.js"></script>
+ <script src="../resources/algorithm.js"></script>
+ <script src="../resources/sampler.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="trunkPerformanceTestsAnimometertestsmasterimagedatahtml"></a>
<div class="addfile"><h4>Added: trunk/PerformanceTests/Animometer/tests/master/image-data.html (0 => 196415)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/PerformanceTests/Animometer/tests/master/image-data.html (rev 0)
+++ trunk/PerformanceTests/Animometer/tests/master/image-data.html 2016-02-11 07:42:00 UTC (rev 196415)
</span><span class="lines">@@ -0,0 +1,27 @@
</span><ins>+<!DOCTYPE html>
+<html>
+<head>
+ <link rel="stylesheet" type="text/css" href="../resources/stage.css">
+ <style type="text/css">
+
+ #stage {
+ background-color: #000;
+ }
+
+ #stage div {
+ position: absolute;
+ }
+
+ </style>
+</head>
+<body>
+ <div id="stage"></div>
+ <script src="../../resources/strings.js"></script>
+ <script src="../../resources/extensions.js"></script>
+ <script src="../resources/algorithm.js"></script>
+ <script src="../resources/sampler.js"></script>
+ <script src="../resources/math.js"></script>
+ <script src="../resources/main.js"></script>
+ <script src="resources/image-data.js"></script>
+</body>
+</html>
</ins></span></pre></div>
<a id="trunkPerformanceTestsAnimometertestsmastermultiplyhtml"></a>
<div class="addfile"><h4>Added: trunk/PerformanceTests/Animometer/tests/master/multiply.html (0 => 196415)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/PerformanceTests/Animometer/tests/master/multiply.html (rev 0)
+++ trunk/PerformanceTests/Animometer/tests/master/multiply.html 2016-02-11 07:42:00 UTC (rev 196415)
</span><span class="lines">@@ -0,0 +1,60 @@
</span><ins>+<!DOCTYPE html>
+<html>
+<head>
+ <link rel="stylesheet" type="text/css" href="resources/stage.css">
+ <style type="text/css">
+
+ #stage {
+ background-color: #000;
+ }
+
+ #stage div {
+ position: absolute;
+ }
+
+ #stage .div-0 {
+ border-top-right-radius: 100%;
+ }
+
+ #stage .div-1 {
+ border-top-left-radius: 100%;
+ }
+
+ #stage .div-2 {
+ border-bottom-left-radius: 100%;
+ }
+
+ #stage .div-3 {
+ border-bottom-right-radius: 100%;
+ }
+
+ #stage .div-4 {
+ border-bottom-left-radius: 100%;
+ border-top-right-radius: 100%;
+ }
+
+ #stage .div-5 {
+ border-bottom-right-radius: 100%;
+ border-top-left-radius: 100%;
+ }
+
+ #center-text {
+ color: #FFF;
+ font-size: 2em;
+ font-weight: 200;
+ }
+ </style>
+</head>
+<body>
+ <div id="stage">
+ <span id="center-text">multiply</span>
+ </div>
+ <script src="../../resources/strings.js"></script>
+ <script src="../../resources/extensions.js"></script>
+ <script src="../resources/algorithm.js"></script>
+ <script src="../resources/sampler.js"></script>
+ <script src="../resources/math.js"></script>
+ <script src="../resources/main.js"></script>
+ <script src="resources/multiply.js"></script>
+</body>
+</html>
</ins></span></pre></div>
<a id="trunkPerformanceTestsAnimometertestsmasterresourcesfocusjs"></a>
<div class="addfile"><h4>Added: trunk/PerformanceTests/Animometer/tests/master/resources/focus.js (0 => 196415)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/PerformanceTests/Animometer/tests/master/resources/focus.js (rev 0)
+++ trunk/PerformanceTests/Animometer/tests/master/resources/focus.js 2016-02-11 07:42:00 UTC (rev 196415)
</span><span class="lines">@@ -0,0 +1,151 @@
</span><ins>+(function() {
+
+var maxVerticalOffset = 50;
+var radius = 20;
+var sizeVariance = 80;
+var travelDistance = 70;
+
+var minObjectDepth = 0.2;
+var maxObjectDepth = 1.0;
+
+var opacityMultiplier = 40;
+
+var FocusElement = Utilities.createClass(
+ function(stage)
+ {
+ var topOffset = maxVerticalOffset * Stage.randomSign();
+ var top = Stage.random(0, stage.size.height - 2 * radius - sizeVariance);
+ var left = Stage.random(0, stage.size.width - 2 * radius - sizeVariance);
+
+ // size and blurring are a function of depth
+ this._depth = Utilities.lerp(1 - Math.pow(Math.random(), 2), minObjectDepth, maxObjectDepth);
+ var distance = Utilities.lerp(this._depth, 1, sizeVariance);
+ var size = 2 * radius + sizeVariance - distance;
+
+ this.element = document.createElement('div');
+ this.element.style.width = size + "px";
+ this.element.style.height = size + "px";
+ this.element.style.top = top + "px";
+ this.element.style.left = left + "px";
+ this.element.style.zIndex = Math.round((1 - this._depth) * 10);
+
+ Utilities.setElementPrefixedProperty(this.element, "filter", "blur(" + stage.getBlurValue(this._depth) + "px) opacity(" + stage.getOpacityValue(this._depth) + "%)");
+
+ var depthMultiplier = Utilities.lerp(1 - this._depth, 0.8, 1);
+ this._sinMultiplier = Math.random() * Stage.randomSign() * depthMultiplier;
+ this._cosMultiplier = Math.random() * Stage.randomSign() * depthMultiplier;
+ }, {
+
+ animate: function(stage, sinTime, cosTime)
+ {
+ var top = sinTime * this._sinMultiplier * travelDistance;
+ var left = cosTime * this._cosMultiplier * travelDistance;
+
+ Utilities.setElementPrefixedProperty(this.element, "filter", "blur(" + stage.getBlurValue(this._depth) + "px) opacity(" + stage.getOpacityValue(this._depth) + "%)");
+ this.element.style.transform = "translateX(" + left + "%) translateY(" + top + "%)";
+ }
+});
+
+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._centerElement = document.getElementById("center-text");
+ this._centerElement.style.width = (radius * 5) + 'px';
+ this._centerElement.style.height = (radius * 5) + 'px';
+ this._centerElement.style.zIndex = Math.round(10 * this.centerObjectDepth);
+
+ var blur = this.getBlurValue(this.centerObjectDepth);
+ Utilities.setElementPrefixedProperty(this._centerElement, "filter", "blur(" + blur + "px)");
+ },
+
+ complexity: function()
+ {
+ return 1 + this._testElements.length;
+ },
+
+ tune: function(count)
+ {
+ if (count == 0)
+ return;
+
+ if (count > 0) {
+ for (var i = 0; i < count; ++i) {
+ var obj = new FocusElement(this);
+ this._testElements.push(obj);
+ this.element.appendChild(obj.element);
+ }
+ return;
+ }
+
+ while (count < 0) {
+ var obj = this._testElements.shift();
+ if (!obj)
+ return;
+
+ this.element.removeChild(obj.element);
+ count++;
+ }
+ },
+
+ animate: function()
+ {
+ var time = this._benchmark.timestamp;
+ var sinTime = Math.sin(time / this.movementDuration);
+ var cosTime = Math.cos(time / this.movementDuration);
+
+ var focusProgress = Utilities.progressValue(Math.sin(time / this.focusDuration), -1, 1);
+ this._focalPoint = focusProgress;
+
+ // update center element before loop
+ Utilities.setElementPrefixedProperty(this._centerElement, "filter", "blur(" + this.getBlurValue(this.centerObjectDepth, true) + "px)");
+
+ this._testElements.forEach(function(element) {
+ element.animate(this, sinTime, cosTime);
+ }, this);
+ },
+
+ getBlurValue: function(depth, isCenter)
+ {
+ var value = Math.abs(depth - this._focalPoint);
+
+ if (isCenter)
+ return this.maxCenterObjectBlurValue * value;
+
+ return Utilities.lerp(value, this.minBlurValue, this.maxBlurValue);
+ },
+
+ getOpacityValue: function(depth)
+ {
+ return 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="trunkPerformanceTestsAnimometertestsmasterresourcesimagedatajs"></a>
<div class="addfile"><h4>Added: trunk/PerformanceTests/Animometer/tests/master/resources/image-data.js (0 => 196415)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/PerformanceTests/Animometer/tests/master/resources/image-data.js (rev 0)
+++ trunk/PerformanceTests/Animometer/tests/master/resources/image-data.js 2016-02-11 07:42:00 UTC (rev 196415)
</span><span class="lines">@@ -0,0 +1,164 @@
</span><ins>+(function() {
+
+var ImageDataStage = Utilities.createSubclass(Stage,
+ function() {
+ Stage.call(this);
+
+ this.testElements = [];
+ this._offsetIndex = 0;
+ }, {
+
+ testImageSrc: './../resources/yin-yang.png',
+
+ initialize: function(benchmark)
+ {
+ Stage.prototype.initialize.call(this, benchmark);
+
+ var waitForLoad = new SimplePromise;
+ var img = new Image;
+
+ img.addEventListener('load', function onImageLoad(e) {
+ img.removeEventListener('load', onImageLoad);
+ waitForLoad.resolve(img);
+ });
+
+ img.src = this.testImageSrc;
+
+ waitForLoad.then(function(img) {
+ this.testImage = img;
+ this.testImageWidth = img.naturalWidth;
+ this.testImageHeight = img.naturalHeight;
+
+ this.diffuseXOffset = 4,
+ this.diffuseYOffset = this.testImageWidth * 4;
+
+ benchmark.readyPromise.resolve();
+ }.bind(this));
+ },
+
+ tune: function(count)
+ {
+ if (count == 0)
+ return;
+
+ if (count < 0) {
+ this._offsetIndex = Math.max(this._offsetIndex + count, 0);
+ for (var i = this._offsetIndex; i < this.testElements.length; ++i)
+ this.testElements[i].style.visibility = "hidden";
+ return;
+ }
+
+ this._offsetIndex = this._offsetIndex + count;
+ var index = Math.min(this._offsetIndex, this.testElements.length);
+ for (var i = 0; i < index; ++i)
+ this.testElements[i].style.visibility = "";
+ if (this._offsetIndex <= this.testElements.length)
+ return;
+
+ index = this._offsetIndex - this.testElements.length;
+ for (var i = 0; i < index; ++i) {
+ var element = this._createTestElement();
+ this.testElements.push(element);
+ this.element.appendChild(element);
+ }
+ },
+
+ _createTestElement: function() {
+ var element = document.createElement('canvas');
+ element.width = this.testImageWidth;
+ element.height = this.testImageHeight;
+
+ var context = element.getContext("2d");
+
+ // Put draw image into the canvas
+ context.drawImage(this.testImage, 0, 0, this.testImageWidth, this.testImageHeight);
+
+ // randomize location
+ var left = Stage.randomInt(0, this.size.width - this.testImageWidth);
+ var top = Stage.randomInt(0, this.size.height - this.testImageHeight);
+
+ element.style.top = top + 'px';
+ element.style.left = left + 'px';
+ element.style.width = this.testImageWidth + 'px';
+ element.style.height = this.testImageHeight + 'px';
+
+ return element;
+ },
+
+ animate: function(timeDelta) {
+ for (var i = 0; i < this._offsetIndex; ++i) {
+ var context = this.testElements[i].getContext("2d");
+
+ // Get image data
+ var imageData = context.getImageData(0, 0, this.testImageWidth, this.testImageHeight);
+
+ var rgbaLen = 4,
+ didDraw = false,
+ neighborPixelIndex,
+ dataLen = imageData.data.length;
+ for (var j = 0; j < dataLen; j += rgbaLen) {
+ if (imageData.data[j + 3] === 0)
+ continue;
+
+ // get random neighboring pixel color
+ neighborPixelIndex = this._getRandomNeighboringPixelIndex(j, dataLen);
+
+ // Update the RGB data
+ imageData.data[j] = imageData.data[neighborPixelIndex];
+ imageData.data[j + 1] = imageData.data[neighborPixelIndex + 1];
+ imageData.data[j + 2] = imageData.data[neighborPixelIndex + 2];
+ imageData.data[j + 3] = Math.max(imageData.data[neighborPixelIndex + 3] - j % 10, 0);
+ didDraw = true;
+ }
+
+ // Put the image data back into the canvas
+ context.putImageData(imageData, 0, 0);
+
+ // If it didn't draw restart
+ if (!didDraw)
+ context.drawImage(this.testImage, 0, 0, this.testImageWidth, this.testImageHeight)
+ }
+ },
+
+ _getRandomNeighboringPixelIndex: function(pixelIdx, pixelArrayLength) {
+ var xOffset = Stage.randomInt(-1, 1),
+ yOffset = Stage.randomInt(-1, 1),
+ resultPixelIdx = pixelIdx;
+
+ // Add X to the result
+ resultPixelIdx += (this.diffuseXOffset * xOffset);
+ // Add Y to the result
+ resultPixelIdx += (this.diffuseYOffset * yOffset);
+
+ // Don't fall off the end of the image
+ if (resultPixelIdx > pixelArrayLength)
+ resultPixelIdx = pixelIdx;
+
+ // Don't fall off the beginning of the image
+ if (resultPixelIdx < 0)
+ resultPixelIdx = 0;
+
+ return resultPixelIdx;
+ },
+
+ complexity: function()
+ {
+ return this._offsetIndex;
+ }
+});
+
+var ImageDataBenchmark = Utilities.createSubclass(Benchmark,
+ function(options)
+ {
+ Benchmark.call(this, new ImageDataStage(), options);
+ }, {
+
+ waitUntilReady: function() {
+ this.readyPromise = new SimplePromise;
+ return this.readyPromise;
+ }
+});
+
+window.benchmarkClass = ImageDataBenchmark;
+
+}());
</ins></span></pre></div>
<a id="trunkPerformanceTestsAnimometertestsmasterresourcesmultiplyjs"></a>
<div class="addfile"><h4>Added: trunk/PerformanceTests/Animometer/tests/master/resources/multiply.js (0 => 196415)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/PerformanceTests/Animometer/tests/master/resources/multiply.js (rev 0)
+++ trunk/PerformanceTests/Animometer/tests/master/resources/multiply.js 2016-02-11 07:42:00 UTC (rev 196415)
</span><span class="lines">@@ -0,0 +1,124 @@
</span><ins>+(function() {
+
+var MultiplyStage = Utilities.createSubclass(Stage,
+ function()
+ {
+ Stage.call(this);
+ this.tiles = [];
+ this._offsetIndex = 0;
+ }, {
+
+ initialize: function(benchmark, options)
+ {
+ Stage.prototype.initialize.call(this, benchmark, options);
+ var tileSize = Math.round(this.size.height / 20);
+
+ // Fill the scene with elements
+ var x = Math.round((this.size.width - tileSize) / 2);
+ var y = Math.round((this.size.height - tileSize) / 2);
+ var tileStride = tileSize;
+ var direction = 0;
+ var spiralCounter = 2;
+ var nextIndex = 1;
+ var maxSide = Math.floor(this.size.height / tileStride);
+ var centerSpiralCount = maxSide * maxSide;
+ for (var i = 0; i < centerSpiralCount; ++i) {
+ this._addTile(x, y, tileSize, i % 360);
+
+ if (i == nextIndex) {
+ direction = (direction + 1) % 4;
+ spiralCounter++;
+ nextIndex += spiralCounter >> 1;
+ }
+ if (direction == 0)
+ x += tileStride;
+ else if (direction == 1)
+ y -= tileStride;
+ else if (direction == 2)
+ x -= tileStride;
+ else
+ y += tileStride;
+ }
+
+ centerSpiralCount = maxSide * (maxSide + (maxSide & 1));
+ for (var i = 0; i < centerSpiralCount; ++i) {
+ var sideX = x + Math.floor(Math.floor(i / maxSide) / 2) * tileStride;
+ var sideY = y - tileStride * (i % maxSide);
+
+ if (Math.floor(i / maxSide) % 2 == 1)
+ sideX = this.width - sideX - tileSize + 1;
+ this._addTile(sideX, sideY, tileSize, (6 * i) % 360);
+ }
+ },
+
+ _addTile: function(x, y, tileSize, rotateDeg)
+ {
+ var tile = Utilities.createElement("div", { class: "div-" + Stage.randomInt(0,6) }, this.element);
+ var halfTileSize = tileSize / 2;
+ tile.style.left = x + 'px';
+ tile.style.top = y + 'px';
+ tile.style.width = tileSize + 'px';
+ tile.style.height = tileSize + 'px';
+
+ var distance = 1.5 / tileSize * this.size.multiply(0.5).subtract(new Point(x + halfTileSize, y + halfTileSize)).length();
+
+ this.tiles.push({
+ element: tile,
+ rotate: rotateDeg,
+ step: Math.max(1, distance / 4),
+ distance: distance,
+ active: false
+ });
+ },
+
+ complexity: function()
+ {
+ return this._offsetIndex;
+ },
+
+ tune: function(count)
+ {
+ this._offsetIndex = Math.max(0, Math.min(this._offsetIndex + count, this.tiles.length));
+ },
+
+ animate: function()
+ {
+ var distanceFactor = 1 / Math.sqrt(this._offsetIndex);
+
+ var progress = this._benchmark.timestamp % 10000 / 10000;
+ var bounceProgress = Math.sin(2 * Math.abs( 0.5 - progress));
+ var l = this._lerp(bounceProgress, 20, 50);
+ var hslPrefix = "hsla(" + this._lerp(progress, 0, 360) + ",100%,";
+
+ for (var i = 0; i < this._offsetIndex; ++i) {
+ var tile = this.tiles[i];
+ tile.active = true;
+ tile.rotate += tile.step;
+ tile.element.style.transform = "rotate(" + tile.rotate + "deg)";
+
+ var influence = 1 - (tile.distance * distanceFactor);
+ tile.element.style.backgroundColor = hslPrefix + l * Math.tan(influence / 1.25) + "%," + influence + ")";
+ }
+
+ for (var i = this._offsetIndex; i < this.tiles.length && this.tiles[i].active; ++i) {
+ this.tiles[i].active = false;
+ this.tiles[i].element.style.backgroundColor = "";
+ }
+ },
+
+ _lerp: function(value, min, max)
+ {
+ return min + ( max - min ) * value;
+ }
+});
+
+var MultiplyBenchmark = Utilities.createSubclass(Benchmark,
+ function(options)
+ {
+ Benchmark.call(this, new MultiplyStage(), options);
+ }
+);
+
+window.benchmarkClass = MultiplyBenchmark;
+
+}());
</ins></span></pre></div>
<a id="trunkPerformanceTestsAnimometertestsmasterresourcesstagecss"></a>
<div class="modfile"><h4>Modified: trunk/PerformanceTests/Animometer/tests/master/resources/stage.css (196414 => 196415)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/PerformanceTests/Animometer/tests/master/resources/stage.css 2016-02-11 04:06:37 UTC (rev 196414)
+++ trunk/PerformanceTests/Animometer/tests/master/resources/stage.css 2016-02-11 07:42:00 UTC (rev 196415)
</span><span class="lines">@@ -8,10 +8,20 @@
</span><span class="cx"> margin: 0;
</span><span class="cx"> padding: 0;
</span><span class="cx"> background-color: rgb(241, 241, 241);
</span><ins>+ font-family: -apple-system, "Helvetica Neue", Helvetica, Verdana, sans-serif;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> #stage {
</span><del>- width: 100%;
- height: 100%;
- background-color: rgb(241, 241, 241);
</del><ins>+ position: relative;
+ width: 100%;
+ height: 100%;
+ background-color: rgb(241, 241, 241);
</ins><span class="cx"> }
</span><ins>+
+#center-text {
+ position: absolute;
+ z-index: 3;
+ top: 50%;
+ left: 50%;
+ transform: translateX(-50%) translateY(-50%);
+}
</ins><span class="cx">\ No newline at end of file
</span></span></pre></div>
<a id="trunkPerformanceTestsAnimometertestsresourcesmainjs"></a>
<div class="modfile"><h4>Modified: trunk/PerformanceTests/Animometer/tests/resources/main.js (196414 => 196415)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/PerformanceTests/Animometer/tests/resources/main.js 2016-02-11 04:06:37 UTC (rev 196414)
+++ trunk/PerformanceTests/Animometer/tests/resources/main.js 2016-02-11 07:42:00 UTC (rev 196415)
</span><span class="lines">@@ -727,9 +727,14 @@
</span><span class="cx">
</span><span class="cx"> randomBool: function()
</span><span class="cx"> {
</span><del>- return !!Math.round(this.random(0, 1));
</del><ins>+ return !!Math.round(Math.random());
</ins><span class="cx"> },
</span><span class="cx">
</span><ins>+ randomSign: function()
+ {
+ return Math.random() >= .5 ? 1 : -1;
+ },
+
</ins><span class="cx"> randomInt: function(min, max)
</span><span class="cx"> {
</span><span class="cx"> return Math.floor(this.random(min, max + 1));
</span><span class="lines">@@ -906,6 +911,17 @@
</span><span class="cx"> return this._stage;
</span><span class="cx"> },
</span><span class="cx">
</span><ins>+ get timestamp()
+ {
+ return this._currentTimestamp - this._startTimestamp;
+ },
+
+ backgroundColor: function()
+ {
+ var stage = window.getComputedStyle(document.getElementById("stage"));
+ return stage["background-color"];
+ },
+
</ins><span class="cx"> run: function()
</span><span class="cx"> {
</span><span class="cx"> return this.waitUntilReady().then(function() {
</span><span class="lines">@@ -938,6 +954,7 @@
</span><span class="cx"> if (!this._didWarmUp) {
</span><span class="cx"> if (this._currentTimestamp - this._previousTimestamp >= 100) {
</span><span class="cx"> this._didWarmUp = true;
</span><ins>+ this._startTimestamp = this._currentTimestamp;
</ins><span class="cx"> this._controller.start(this._currentTimestamp, this._stage);
</span><span class="cx"> this._previousTimestamp = this._currentTimestamp;
</span><span class="cx"> }
</span></span></pre></div>
<a id="trunkPerformanceTestsChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/PerformanceTests/ChangeLog (196414 => 196415)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/PerformanceTests/ChangeLog 2016-02-11 04:06:37 UTC (rev 196414)
+++ trunk/PerformanceTests/ChangeLog 2016-02-11 07:42:00 UTC (rev 196415)
</span><span class="lines">@@ -1,3 +1,29 @@
</span><ins>+2016-02-10 Jon Lee <jonlee@apple.com>
+
+ Add new benchmark tests.
+ https://bugs.webkit.org/show_bug.cgi?id=154063
+
+ Provisionally reviewed by Said Abou-Hallawa.
+
+ Add tests for get/put image data, filters, opacity, and css transforms.
+
+ * Animometer/resources/runner/benchmark-runner.js:
+ (_runBenchmarkAndRecordResults): Update the body background color to match that of
+ the stage.
+ (this._runNextIteration): Clear the background color style for the results page.
+ * Animometer/resources/runner/tests.js:
+ * Animometer/tests/master/focus.html: Added.
+ * Animometer/tests/master/image-data.html: Added.
+ * Animometer/tests/master/multiply.html: Added.
+ * Animometer/tests/master/resources/focus.js: Added.
+ * Animometer/tests/master/resources/image-data.js: Added.
+ * Animometer/tests/master/resources/multiply.js: Added.
+ * Animometer/tests/master/resources/stage.css: Move common styles out.
+ * Animometer/tests/resources/main.js: Update Stage.randomBool to use Math.random.
+ Add Stage.randomSign for randomly setting a direction. Add the notion of the
+ current timestamp of the test to Benchmark, since some animations cycle through
+ colors and rely on an incremental counter like the time.
+
</ins><span class="cx"> 2016-02-09 Said Abou-Hallawa <sabouhallawa@apple.com>
</span><span class="cx">
</span><span class="cx"> Add internal benchmark tests for CSS mix-blend-modes and filters
</span><span class="lines">@@ -7,20 +33,20 @@
</span><span class="cx">
</span><span class="cx"> * Animometer/resources/debug-runner/tests.js: Include the new tests in the
</span><span class="cx"> "HTML suite" of the debug runner.
</span><del>-
</del><ins>+
</ins><span class="cx"> * Animometer/resources/extensions.js:
</span><span class="cx"> (Utilities.browserPrefix):
</span><span class="cx"> (Utilities.setElementPrefixedProperty): Utility functions to allow setting
</span><span class="cx"> prefixed style properties.
</span><del>-
</del><ins>+
</ins><span class="cx"> * Animometer/tests/bouncing-particles/resources/bouncing-css-shapes.js:
</span><span class="cx"> Set the mix-blend-mode and the filter to some random values if the options
</span><span class="cx"> of the test requested that.
</span><del>-
</del><ins>+
</ins><span class="cx"> * Animometer/tests/bouncing-particles/resources/bouncing-particles.js:
</span><span class="cx"> (parseShapeParameters): Parse the url options "blend" and "filter" and set
</span><span class="cx"> the corresponding flags.
</span><del>-
</del><ins>+
</ins><span class="cx"> * Animometer/tests/resources/main.js:
</span><span class="cx"> (randomStyleMixBlendMode):
</span><span class="cx"> (randomStyleFilter): Return random mix-blend-mode and filter.
</span></span></pre>
</div>
</div>
</body>
</html>