<!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>[194408] 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/194408">194408</a></dd>
<dt>Author</dt> <dd>jonlee@apple.com</dd>
<dt>Date</dt> <dd>2015-12-23 17:36:43 -0800 (Wed, 23 Dec 2015)</dd>
</dl>
<h3>Log Message</h3>
<pre>Split benchmark into two different pages
https://bugs.webkit.org/show_bug.cgi?id=152458
Reviewed by Simon Fraser.
Add tests to 'animometer' suite.
* Animometer/resources/runner/tests.js:
* Animometer/tests/master/canvas-stage.html: Added.
* Animometer/tests/master/resources/canvas-stage.js: Added.
* Animometer/tests/master/resources/canvas-tests.js: Added.
* Animometer/tests/master/resources/stage.css: Added.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkPerformanceTestsAnimometerresourcesrunnertestsjs">trunk/PerformanceTests/Animometer/resources/runner/tests.js</a></li>
<li><a href="#trunkPerformanceTestsChangeLog">trunk/PerformanceTests/ChangeLog</a></li>
</ul>
<h3>Added Paths</h3>
<ul>
<li>trunk/PerformanceTests/Animometer/tests/master/</li>
<li><a href="#trunkPerformanceTestsAnimometertestsmastercanvasstagehtml">trunk/PerformanceTests/Animometer/tests/master/canvas-stage.html</a></li>
<li>trunk/PerformanceTests/Animometer/tests/master/resources/</li>
<li><a href="#trunkPerformanceTestsAnimometertestsmasterresourcescanvasstagejs">trunk/PerformanceTests/Animometer/tests/master/resources/canvas-stage.js</a></li>
<li><a href="#trunkPerformanceTestsAnimometertestsmasterresourcescanvastestsjs">trunk/PerformanceTests/Animometer/tests/master/resources/canvas-tests.js</a></li>
<li><a href="#trunkPerformanceTestsAnimometertestsmasterresourcesstagecss">trunk/PerformanceTests/Animometer/tests/master/resources/stage.css</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkPerformanceTestsAnimometerresourcesrunnertestsjs"></a>
<div class="modfile"><h4>Modified: trunk/PerformanceTests/Animometer/resources/runner/tests.js (194407 => 194408)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/PerformanceTests/Animometer/resources/runner/tests.js 2015-12-24 01:31:47 UTC (rev 194407)
+++ trunk/PerformanceTests/Animometer/resources/runner/tests.js 2015-12-24 01:36:43 UTC (rev 194408)
</span><span class="lines">@@ -22,6 +22,18 @@
</span><span class="cx">
</span><span class="cx"> Suites.push(new Suite("Animometer",
</span><span class="cx"> [
</span><ins>+ {
+ url: "master/canvas-stage.html?pathType=arcs",
+ name: "Canvas arcs"
+ },
+ {
+ url: "master/canvas-stage.html?pathType=linePath&lineJoin=round&lineCap=round",
+ name: "Canvas line path, round join"
+ },
+ {
+ url: "master/canvas-stage.html?pathType=line&lineCap=square",
+ name: "Canvas line segments"
+ },
</ins><span class="cx"> ]
</span><span class="cx"> ));
</span><span class="cx">
</span></span></pre></div>
<a id="trunkPerformanceTestsAnimometertestsmastercanvasstagehtml"></a>
<div class="addfile"><h4>Added: trunk/PerformanceTests/Animometer/tests/master/canvas-stage.html (0 => 194408)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/PerformanceTests/Animometer/tests/master/canvas-stage.html (rev 0)
+++ trunk/PerformanceTests/Animometer/tests/master/canvas-stage.html 2015-12-24 01:36:43 UTC (rev 194408)
</span><span class="lines">@@ -0,0 +1,18 @@
</span><ins>+<!DOCTYPE html>
+<html>
+<head>
+ <link rel="stylesheet" type="text/css" href="resources/stage.css">
+ <script src="../../resources/algorithm.js"></script>
+ <script src="../../resources/strings.js"></script>
+ <script src="../../resources/sampler.js"></script>
+ <script src="../../resources/extensions.js"></script>
+ <script src="../resources/math.js"></script>
+ <script src="../resources/main.js"></script>
+ <script src="../resources/stage.js"></script>
+ <script src="resources/canvas-stage.js"></script>
+ <script src="resources/canvas-tests.js"></script>
+</head>
+<body>
+ <canvas id="stage"></canvas>
+</body>
+</html>
</ins></span></pre></div>
<a id="trunkPerformanceTestsAnimometertestsmasterresourcescanvasstagejs"></a>
<div class="addfile"><h4>Added: trunk/PerformanceTests/Animometer/tests/master/resources/canvas-stage.js (0 => 194408)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/PerformanceTests/Animometer/tests/master/resources/canvas-stage.js (rev 0)
+++ trunk/PerformanceTests/Animometer/tests/master/resources/canvas-stage.js 2015-12-24 01:36:43 UTC (rev 194408)
</span><span class="lines">@@ -0,0 +1,61 @@
</span><ins>+function SimpleCanvasStage(element, options, canvasObject)
+{
+ Stage.call(this, element, options);
+ this.options = options;
+ this.context = this.element.getContext("2d");
+ this.canvasObject = canvasObject;
+ this._objects = [];
+}
+SimpleCanvasStage.prototype = Object.create(Stage.prototype);
+SimpleCanvasStage.prototype.constructor = SimpleCanvasStage;
+SimpleCanvasStage.prototype.tune = function(count)
+{
+ if (count == 0)
+ return this._objects.length;
+
+ if (count > 0) {
+ // For path-based tests, use the object length as a maximum coordinate value
+ // to make it easier to see what the test is doing
+ var coordinateMaximum = Math.max(this._objects.length, 200);
+ for (var i = 0; i < count; ++i) {
+ this._objects.push(new this.canvasObject(this, coordinateMaximum));
+ }
+ return this._objects.length;
+ }
+
+ count = Math.min(-count, this._objects.length);
+ this._objects.splice(0, count);
+ return this._objects.length;
+}
+SimpleCanvasStage.prototype.animate = function()
+{
+ var context = this.context;
+ this._objects.forEach(function(object) {
+ object.draw(context);
+ });
+}
+
+function SimpleCanvasAnimator(benchmark, options)
+{
+ StageAnimator.call(this, benchmark, options);
+ this._context = benchmark._stage.context;
+}
+
+SimpleCanvasAnimator.prototype = Object.create(StageAnimator.prototype);
+SimpleCanvasAnimator.prototype.constructor = SimpleCanvasAnimator;
+SimpleCanvasAnimator.prototype.animate = function()
+{
+ this._context.clearRect(0, 0, this._benchmark._stage.size.x, this._benchmark._stage.size.y);
+ return StageAnimator.prototype.animate.call(this, this._options);
+}
+
+
+function SimpleCanvasBenchmark(suite, test, options, progressBar) {
+ StageBenchmark.call(this, suite, test, options, progressBar);
+}
+SimpleCanvasBenchmark.prototype = Object.create(StageBenchmark.prototype);
+SimpleCanvasBenchmark.prototype.constructor = SimpleCanvasBenchmark;
+SimpleCanvasBenchmark.prototype.createAnimator = function() {
+ return new SimpleCanvasAnimator(this, this._options);
+}
+
</ins></span></pre></div>
<a id="trunkPerformanceTestsAnimometertestsmasterresourcescanvastestsjs"></a>
<div class="addfile"><h4>Added: trunk/PerformanceTests/Animometer/tests/master/resources/canvas-tests.js (0 => 194408)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/PerformanceTests/Animometer/tests/master/resources/canvas-tests.js (rev 0)
+++ trunk/PerformanceTests/Animometer/tests/master/resources/canvas-tests.js 2015-12-24 01:36:43 UTC (rev 194408)
</span><span class="lines">@@ -0,0 +1,221 @@
</span><ins>+(function() {
+
+// === PAINT OBJECTS ===
+
+function CanvasLineSegment(stage)
+{
+ var circle = stage.randomInt(0, 2);
+ this._color = ["#e01040", "#10c030", "#e05010"][circle];
+ this._lineWidth = Math.pow(Math.random(), 12) * 20 + 3;
+ this._omega = Math.random() * 3 + 0.2;
+ var theta = stage.randomAngle();
+ this._cosTheta = Math.cos(theta);
+ this._sinTheta = Math.sin(theta);
+ this._startX = stage.circleRadius * this._cosTheta + (0.5 + circle) / 3 * stage.size.x;
+ this._startY = stage.circleRadius * this._sinTheta + stage.size.y / 2;
+ this._length = Math.pow(Math.random(), 8) * 40 + 20;
+ this._segmentDirection = Math.random() > 0.5 ? -1 : 1;
+}
+
+CanvasLineSegment.prototype.draw = function(context)
+{
+ context.strokeStyle = this._color;
+ context.lineWidth = this._lineWidth;
+
+ this._length+=Math.sin(Date.now()/100*this._omega);
+
+ context.beginPath();
+ context.moveTo(this._startX, this._startY);
+ context.lineTo(this._startX + this._segmentDirection * this._length * this._cosTheta,
+ this._startY + this._segmentDirection * this._length * this._sinTheta);
+ context.stroke();
+};
+
+function CanvasArc(stage)
+{
+ var maxX = 6, maxY = 3;
+ var distanceX = stage.size.x / maxX;
+ var distanceY = stage.size.y / (maxY + 1);
+ var randY = stage.randomInt(0, maxY);
+ var randX = stage.randomInt(0, maxX - 1 * (randY % 2));
+
+ this._point = new Point(distanceX * (randX + (randY % 2) / 2), distanceY * (randY + .5));
+
+ this._radius = 20 + Math.pow(Math.random(), 5) * (Math.min(distanceX, distanceY) / 1.6);
+ this._startAngle = stage.randomAngle();
+ this._endAngle = stage.randomAngle();
+ this._omega = (Math.random() - 0.5) * 0.3;
+ this._counterclockwise = stage.randomBool();
+ var colors = ["#101010", "#808080", "#c0c0c0"];
+ colors.push(["#e01040", "#10c030", "#e05010"][(randX + Math.ceil(randY / 2)) % 3]);
+ this._color = colors[Math.floor(Math.random() * colors.length)];
+ this._lineWidth = 1 + Math.pow(Math.random(), 5) * 30;
+ this._doStroke = stage.randomInt(0, 3) != 0;
+};
+
+CanvasArc.prototype.draw = function(context)
+{
+ this._startAngle += this._omega;
+ this._endAngle += this._omega / 2;
+
+ if (this._doStroke) {
+ context.strokeStyle = this._color;
+ context.lineWidth = this._lineWidth;
+ context.beginPath();
+ context.arc(this._point.x, this._point.y, this._radius, this._startAngle, this._endAngle, this._counterclockwise);
+ context.stroke();
+ } else {
+ context.fillStyle = this._color;
+ context.beginPath();
+ context.lineTo(this._point.x, this._point.y);
+ context.arc(this._point.x, this._point.y, this._radius, this._startAngle, this._endAngle, this._counterclockwise);
+ context.lineTo(this._point.x, this._point.y);
+ context.fill();
+ }
+};
+
+function CanvasLinePoint(stage, coordinateMaximum)
+{
+ var X_LOOPS = 40;
+ var Y_LOOPS = 20;
+
+ var offsets = [[-2, -1], [2, 1], [-1, 0], [1, 0], [-1, 2], [1, -2]];
+ var offset = offsets[Math.floor(Math.random() * offsets.length)];
+
+ this.coordinate = new Point(X_LOOPS/2, Y_LOOPS/2);
+ if (stage._objects.length) {
+ var head = stage._objects[stage._objects.length - 1].coordinate;
+ this.coordinate.x = head.x;
+ this.coordinate.y = head.y;
+ }
+
+ var nextCoordinate = this.coordinate.x + offset[0];
+ if (nextCoordinate < 0 || nextCoordinate > X_LOOPS)
+ this.coordinate.x -= offset[0];
+ else
+ this.coordinate.x = nextCoordinate;
+ nextCoordinate = this.coordinate.y + offset[1];
+ if (nextCoordinate < 0 || nextCoordinate > Y_LOOPS)
+ this.coordinate.y -= offset[1];
+ else
+ this.coordinate.y = nextCoordinate;
+
+ var xOff = .25 * (this.coordinate.y % 2);
+ var randX = (xOff + this.coordinate.x) * stage.size.x / X_LOOPS;
+ var randY = this.coordinate.y * stage.size.y / Y_LOOPS;
+ var colors = ["#101010", "#808080", "#c0c0c0", "#e01040"];
+ this._color = colors[Math.floor(Math.random() * colors.length)];
+
+ this._width = Math.pow(Math.random(), 5) * 20 + 1;
+ this._isSplit = Math.random() > 0.9;
+ this._point = new Point(randX, randY);
+
+}
+
+CanvasLinePoint.prototype.draw = function(context, stage)
+{
+ context.lineTo(this._point.x, this._point.y);
+};
+
+
+// === STAGES ===
+
+function SimpleCanvasPathStrokeStage(element, options, canvasObject)
+{
+ SimpleCanvasStage.call(this, element, options, canvasObject);
+ this.context.lineCap = options["lineCap"] || "butt";
+ this.context.lineJoin = options["lineJoin"] || "bevel";
+}
+SimpleCanvasPathStrokeStage.prototype = Object.create(SimpleCanvasStage.prototype);
+SimpleCanvasPathStrokeStage.prototype.constructor = SimpleCanvasPathStrokeStage;
+SimpleCanvasPathStrokeStage.prototype.animate = function() {
+ var context = this.context;
+ var stage = this;
+
+ context.beginPath();
+ this._objects.forEach(function(object, index) {
+ if (index == 0) {
+ context.lineWidth = object._width;
+ context.strokeStyle = object._color;
+ context.moveTo(object._point.x, object._point.y);
+ } else {
+ if (object._isSplit) {
+ context.stroke();
+
+ context.lineWidth = object._width;
+ context.strokeStyle = object._color;
+ context.beginPath();
+ }
+
+ if (Math.random() > 0.999)
+ object._isSplit = !object._isSplit;
+
+ object.draw(context);
+ }
+ });
+ context.stroke();
+}
+
+function CanvasLineSegmentStage(element, options)
+{
+ SimpleCanvasStage.call(this, element, options, CanvasLineSegment);
+ this.context.lineCap = options["lineCap"] || "butt";
+ this.circleRadius = this.size.x / 3 / 2 - 20;
+}
+CanvasLineSegmentStage.prototype = Object.create(SimpleCanvasStage.prototype);
+CanvasLineSegmentStage.prototype.constructor = CanvasLineSegmentStage;
+CanvasLineSegmentStage.prototype.animate = function()
+{
+ var context = this.context;
+ var stage = this;
+
+ context.lineWidth = 30;
+ for(var i = 0; i < 3; i++) {
+ context.strokeStyle = ["#e01040", "#10c030", "#e05010"][i];
+ context.fillStyle = ["#70051d", "#016112", "#702701"][i];
+ context.beginPath();
+ context.arc((0.5 + i) / 3 * stage.size.x, stage.size.y/2, stage.circleRadius, 0, Math.PI*2);
+ context.stroke();
+ context.fill();
+ }
+
+ this._objects.forEach(function(object) {
+ object.draw(context);
+ });
+}
+
+function CanvasLinePathStage(element, options)
+{
+ SimpleCanvasPathStrokeStage.call(this, element, options, CanvasLinePoint);
+ this.context.lineJoin = options["lineJoin"] || "bevel";
+ this.context.lineCap = options["lineCap"] || "butt";
+}
+CanvasLinePathStage.prototype = Object.create(SimpleCanvasPathStrokeStage.prototype);
+CanvasLinePathStage.prototype.constructor = CanvasLinePathStage;
+
+// === BENCHMARK ===
+
+function CanvasPathBenchmark(suite, test, options, progressBar)
+{
+ SimpleCanvasBenchmark.call(this, suite, test, options, progressBar);
+}
+CanvasPathBenchmark.prototype = Object.create(SimpleCanvasBenchmark.prototype);
+CanvasPathBenchmark.prototype.constructor = CanvasPathBenchmark;
+CanvasPathBenchmark.prototype.createStage = function(element)
+{
+ switch (this._options["pathType"]) {
+ case "line":
+ return new CanvasLineSegmentStage(element, this._options);
+ case "arcs":
+ return new SimpleCanvasStage(element, this._options, CanvasArc);
+ case "linePath":
+ return new CanvasLinePathStage(element, this._options);
+ }
+}
+
+window.benchmarkClient.create = function(suite, test, options, progressBar)
+{
+ return new CanvasPathBenchmark(suite, test, options, progressBar);
+}
+
+})();
</ins><span class="cx">\ No newline at end of file
</span></span></pre></div>
<a id="trunkPerformanceTestsAnimometertestsmasterresourcesstagecss"></a>
<div class="addfile"><h4>Added: trunk/PerformanceTests/Animometer/tests/master/resources/stage.css (0 => 194408)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/PerformanceTests/Animometer/tests/master/resources/stage.css (rev 0)
+++ trunk/PerformanceTests/Animometer/tests/master/resources/stage.css 2015-12-24 01:36:43 UTC (rev 194408)
</span><span class="lines">@@ -0,0 +1,17 @@
</span><ins>+html {
+ height: 100%;
+}
+body {
+ width: 100%;
+ height: 100%;
+ overflow: hidden;
+ margin: 0;
+ padding: 0;
+ background-color: rgb(241, 241, 241);
+}
+
+#stage {
+ width: 100%;
+ height: 100%;
+ background-color: rgb(241, 241, 241);
+}
</ins></span></pre></div>
<a id="trunkPerformanceTestsChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/PerformanceTests/ChangeLog (194407 => 194408)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/PerformanceTests/ChangeLog 2015-12-24 01:31:47 UTC (rev 194407)
+++ trunk/PerformanceTests/ChangeLog 2015-12-24 01:36:43 UTC (rev 194408)
</span><span class="lines">@@ -5,6 +5,21 @@
</span><span class="cx">
</span><span class="cx"> Reviewed by Simon Fraser.
</span><span class="cx">
</span><ins>+ Add tests to 'animometer' suite.
+
+ * Animometer/resources/runner/tests.js:
+ * Animometer/tests/master/canvas-stage.html: Added.
+ * Animometer/tests/master/resources/canvas-stage.js: Added.
+ * Animometer/tests/master/resources/canvas-tests.js: Added.
+ * Animometer/tests/master/resources/stage.css: Added.
+
+2015-12-23 Jon Lee <jonlee@apple.com>
+
+ Split benchmark into two different pages
+ https://bugs.webkit.org/show_bug.cgi?id=152458
+
+ Reviewed by Simon Fraser.
+
</ins><span class="cx"> Address comments.
</span><span class="cx">
</span><span class="cx"> * Animometer/resources/debug-runner/benchmark-runner.js:
</span></span></pre>
</div>
</div>
</body>
</html>