<!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>[190902] 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/190902">190902</a></dd>
<dt>Author</dt> <dd>jonlee@apple.com</dd>
<dt>Date</dt> <dd>2015-10-12 16:22:23 -0700 (Mon, 12 Oct 2015)</dd>
</dl>
<h3>Log Message</h3>
<pre>Refactor test suites to a separate class.
https://bugs.webkit.org/show_bug.cgi?id=150053
<rdar://problem/23078645>
Reviewed by Dean Jackson.
Create a Suite class to refactor out prepare() and run().
Generate the checkboxes representing the suites using Suites
instead of maintaining a separate list. Also, save the
selections out to localStorage.
* Animometer/runner/animometer.html: Remove the explicitly listed
suites. These will be generated from Suites instead.
* Animometer/runner/resources/animometer.js:
(populateSettings): Iterate through Suites, and create the
label and checkbox. Attach the Suite object to the checkbox so
when the benchmark is started, we get direct access. Initialize
the checkmark based on its value in localStorage. Set this to
run when DOMContentLoaded is dispatched.
(startBenchmark): Grab all of the checkboxes, inspect their
values, add it to enabledSuites if selected. Remember whether
the suite was enabled in localStorage, so that it's easy to do
repeated runs.
* Animometer/runner/resources/tests.js:
(Suite): Create a new Suite class. Refactor out prepare() and
run(), since all of them have the same implementation. Populate
Suites with Suite instances instead of generic objects.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkPerformanceTestsAnimometerrunneranimometerhtml">trunk/PerformanceTests/Animometer/runner/animometer.html</a></li>
<li><a href="#trunkPerformanceTestsAnimometerrunnerresourcesanimometerjs">trunk/PerformanceTests/Animometer/runner/resources/animometer.js</a></li>
<li><a href="#trunkPerformanceTestsAnimometerrunnerresourcestestsjs">trunk/PerformanceTests/Animometer/runner/resources/tests.js</a></li>
<li><a href="#trunkPerformanceTestsChangeLog">trunk/PerformanceTests/ChangeLog</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkPerformanceTestsAnimometerrunneranimometerhtml"></a>
<div class="modfile"><h4>Modified: trunk/PerformanceTests/Animometer/runner/animometer.html (190901 => 190902)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/PerformanceTests/Animometer/runner/animometer.html 2015-10-12 23:20:24 UTC (rev 190901)
+++ trunk/PerformanceTests/Animometer/runner/animometer.html 2015-10-12 23:22:23 UTC (rev 190902)
</span><span class="lines">@@ -19,12 +19,7 @@
</span><span class="cx"> to tune their complexities to stay close to 50 FPS.
</span><span class="cx"> </p>
</span><span class="cx"> <div class="options">
</span><del>- <div class="column">
- <label><input id="html-suite" type="checkbox" checked> HTML elements suite</label><br>
- <label><input id="canvas-suite" type="checkbox" checked> Canvas drawings suite</label><br>
- <label><input id="svg-suite" type="checkbox" checked> SVG elements suite</label><br>
- <label><input id="examples-suite" type="checkbox"> Examples suite</label><br>
- <label><input id="template-suite" type="checkbox"> Template suite</label>
</del><ins>+ <div id="suites" class="column">
</ins><span class="cx"> </div>
</span><span class="cx"> <div>
</span><span class="cx"> <label>Test interval: <input id="test-interval" type="number" value="30"> seconds</label><br>
</span></span></pre></div>
<a id="trunkPerformanceTestsAnimometerrunnerresourcesanimometerjs"></a>
<div class="modfile"><h4>Modified: trunk/PerformanceTests/Animometer/runner/resources/animometer.js (190901 => 190902)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/PerformanceTests/Animometer/runner/resources/animometer.js 2015-10-12 23:20:24 UTC (rev 190901)
+++ trunk/PerformanceTests/Animometer/runner/resources/animometer.js 2015-10-12 23:22:23 UTC (rev 190902)
</span><span class="lines">@@ -59,13 +59,16 @@
</span><span class="cx">
</span><span class="cx"> function startBenchmark()
</span><span class="cx"> {
</span><del>- var checkboxes = [
- document.getElementById("html-suite"),
- document.getElementById("canvas-suite"),
- document.getElementById("svg-suite"),
- document.getElementById("examples-suite"),
- document.getElementById("template-suite"),
- ];
</del><ins>+ var enabledSuites = [];
+ var checkboxes = document.querySelectorAll("#suites input");
+ for (var i = 0; i < checkboxes.length; ++i) {
+ var checkbox = checkboxes[i];
+ if (checkbox.checked) {
+ enabledSuites.push(checkbox.suite);
+ }
+ localStorage.setItem(checkbox.suite.name, +checkbox.checked);
+ }
+
</ins><span class="cx"> var enabledSuites = Suites.filter(function (suite, index) { return !suite.disabled && checkboxes[index].checked; });
</span><span class="cx"> var testsCount = enabledSuites.reduce(function (testsCount, suite) { return testsCount + suite.tests.length; }, 0);
</span><span class="cx"> benchmarkRunnerClient.testsCount = benchmarkRunnerClient.iterationCount * testsCount;
</span><span class="lines">@@ -110,3 +113,25 @@
</span><span class="cx"> graph("#graphContainer", new Point(700, 400), new Insets(20, 50, 20, 50), axes, samples, samplingTimeOffset);
</span><span class="cx"> showSection("graph", true);
</span><span class="cx"> }
</span><ins>+
+function populateSettings() {
+ var suitesDiv = document.getElementById("suites");
+ Suites.forEach(function(suite) {
+ var suiteDiv = document.createDocumentFragment();
+
+ var label = document.createElement("label");
+ var checkbox = document.createElement("input");
+ checkbox.setAttribute("type", "checkbox");
+ checkbox.suite = suite;
+ if (+localStorage.getItem(suite.name)) {
+ checkbox.checked = true;
+ }
+ label.appendChild(checkbox);
+ label.appendChild(document.createTextNode(" " + suite.name));
+
+ suiteDiv.appendChild(label);
+ suiteDiv.appendChild(document.createElement("br"));
+ suitesDiv.appendChild(suiteDiv);
+ });
+}
+document.addEventListener("DOMContentLoaded", populateSettings);
</ins><span class="cx">\ No newline at end of file
</span></span></pre></div>
<a id="trunkPerformanceTestsAnimometerrunnerresourcestestsjs"></a>
<div class="modfile"><h4>Modified: trunk/PerformanceTests/Animometer/runner/resources/tests.js (190901 => 190902)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/PerformanceTests/Animometer/runner/resources/tests.js 2015-10-12 23:20:24 UTC (rev 190901)
+++ trunk/PerformanceTests/Animometer/runner/resources/tests.js 2015-10-12 23:22:23 UTC (rev 190902)
</span><span class="lines">@@ -38,24 +38,27 @@
</span><span class="cx"> }
</span><span class="cx"> ];
</span><span class="cx">
</span><del>-var Suites = [];
</del><ins>+var Suite = function(name, tests) {
+ this.name = name;
+ this.titles = Titles;
+ this.tests = tests;
+};
+Suite.prototype.prepare = function(runner, contentWindow, contentDocument)
+{
+ return runner.waitForElement("#stage").then(function (element) {
+ return element;
+ });
+};
+Suite.prototype.run = function(contentWindow, test, options, recordTable, progressBar)
+{
+ return contentWindow.runBenchmark(this, test, options, recordTable, progressBar);
+};
</ins><span class="cx">
</span><del>-Suites.push({
- name: "HTML Bouncing Particles",
- prepare: function(runner, contentWindow, contentDocument)
- {
- return runner.waitForElement("#stage").then(function (element) {
- return element;
- });
- },
-
- run: function(contentWindow, test, options, recordTable, progressBar)
- {
- return contentWindow.runBenchmark(this, test, options, recordTable, progressBar);
- },
</del><span class="cx">
</span><del>- titles: Titles,
- tests: [
</del><ins>+var Suites = [];
+
+Suites.push(new Suite("HTML suite",
+ [
</ins><span class="cx"> {
</span><span class="cx"> url: "../tests/bouncing-particles/bouncing-css-shapes.html?gain=1&addLimit=100&removeLimit=5&particleWidth=12&particleHeight=12&shape=circle",
</span><span class="cx"> name: "CSS bouncing circles"
</span><span class="lines">@@ -81,24 +84,10 @@
</span><span class="cx"> name: "CSS layering text"
</span><span class="cx"> },
</span><span class="cx"> ]
</span><del>-});
</del><ins>+));
</ins><span class="cx">
</span><del>-Suites.push({
- name: "Canvas Bouncing Particles",
- prepare: function(runner, contentWindow, contentDocument)
- {
- return runner.waitForElement("#stage").then(function (element) {
- return element;
- });
- },
-
- run: function(contentWindow, test, options, recordTable, progressBar)
- {
- return contentWindow.runBenchmark(this, test, options, recordTable, progressBar);
- },
-
- titles: Titles,
- tests: [
</del><ins>+Suites.push(new Suite("Canvas suite",
+ [
</ins><span class="cx"> {
</span><span class="cx"> url: "../tests/bouncing-particles/bouncing-canvas-shapes.html?gain=4&addLimit=100&removeLimit=1000&particleWidth=12&particleHeight=12&shape=circle",
</span><span class="cx"> name: "canvas bouncing circles"
</span><span class="lines">@@ -120,24 +109,10 @@
</span><span class="cx"> name: "canvas bouncing PNG images"
</span><span class="cx"> },
</span><span class="cx"> ]
</span><del>-});
</del><ins>+));
</ins><span class="cx">
</span><del>-Suites.push({
- name: "SVG Bouncing Particles",
- prepare: function(runner, contentWindow, contentDocument)
- {
- return runner.waitForElement("#stage").then(function (element) {
- return element;
- });
- },
-
- run: function(contentWindow, test, options, recordTable, progressBar)
- {
- return contentWindow.runBenchmark(this, test, options, recordTable, progressBar);
- },
-
- titles: Titles,
- tests: [
</del><ins>+Suites.push(new Suite("SVG suite",
+ [
</ins><span class="cx"> {
</span><span class="cx"> url: "../tests/bouncing-particles/bouncing-svg-shapes.html?gain=6&addLimit=100&removeLimit=1000&particleWidth=12&particleHeight=12&shape=circle",
</span><span class="cx"> name: "SVG bouncing circles",
</span><span class="lines">@@ -159,24 +134,10 @@
</span><span class="cx"> name: "SVG bouncing PNG images"
</span><span class="cx"> },
</span><span class="cx"> ]
</span><del>-});
</del><ins>+));
</ins><span class="cx">
</span><del>-Suites.push({
- name: "More complex examples",
- prepare: function(runner, contentWindow, contentDocument)
- {
- return runner.waitForElement("#stage").then(function (element) {
- return element;
- });
- },
-
- run: function(contentWindow, test, options, recordTable, progressBar)
- {
- return contentWindow.runBenchmark(this, test, options, recordTable, progressBar);
- },
-
- titles: Titles,
- tests: [
</del><ins>+Suites.push(new Suite("Complex examples",
+ [
</ins><span class="cx"> {
</span><span class="cx"> url: "../tests/examples/canvas-electrons.html?gain=1&addLimit=100&removeLimit=10",
</span><span class="cx"> name: "canvas electrons"
</span><span class="lines">@@ -186,24 +147,10 @@
</span><span class="cx"> name: "canvas stars"
</span><span class="cx"> },
</span><span class="cx"> ]
</span><del>-});
</del><ins>+));
</ins><span class="cx">
</span><del>-Suites.push({
- name: "Stage Templates (Can be used for new tests)",
- prepare: function(runner, contentWindow, contentDocument)
- {
- return runner.waitForElement("#stage").then(function (element) {
- return element;
- });
- },
-
- run: function(contentWindow, test, options, recordTable, progressBar)
- {
- return contentWindow.runBenchmark(this, test, options, recordTable, progressBar);
- },
-
- titles: Titles,
- tests: [
</del><ins>+Suites.push(new Suite("Test Templates",
+ [
</ins><span class="cx"> {
</span><span class="cx"> url: "../tests/template/template-css.html?gain=1&addLimit=100&removeLimit=5",
</span><span class="cx"> name: "CSS template"
</span><span class="lines">@@ -217,7 +164,7 @@
</span><span class="cx"> name: "SVG template"
</span><span class="cx"> },
</span><span class="cx"> ]
</span><del>-});
</del><ins>+));
</ins><span class="cx">
</span><span class="cx"> function suiteFromName(name)
</span><span class="cx"> {
</span></span></pre></div>
<a id="trunkPerformanceTestsChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/PerformanceTests/ChangeLog (190901 => 190902)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/PerformanceTests/ChangeLog 2015-10-12 23:20:24 UTC (rev 190901)
+++ trunk/PerformanceTests/ChangeLog 2015-10-12 23:22:23 UTC (rev 190902)
</span><span class="lines">@@ -1,5 +1,35 @@
</span><span class="cx"> 2015-10-12 Jon Lee <jonlee@apple.com>
</span><span class="cx">
</span><ins>+ Refactor test suites to a separate class.
+ https://bugs.webkit.org/show_bug.cgi?id=150053
+ <rdar://problem/23078645>
+
+ Reviewed by Dean Jackson.
+
+ Create a Suite class to refactor out prepare() and run().
+ Generate the checkboxes representing the suites using Suites
+ instead of maintaining a separate list. Also, save the
+ selections out to localStorage.
+
+ * Animometer/runner/animometer.html: Remove the explicitly listed
+ suites. These will be generated from Suites instead.
+ * Animometer/runner/resources/animometer.js:
+ (populateSettings): Iterate through Suites, and create the
+ label and checkbox. Attach the Suite object to the checkbox so
+ when the benchmark is started, we get direct access. Initialize
+ the checkmark based on its value in localStorage. Set this to
+ run when DOMContentLoaded is dispatched.
+ (startBenchmark): Grab all of the checkboxes, inspect their
+ values, add it to enabledSuites if selected. Remember whether
+ the suite was enabled in localStorage, so that it's easy to do
+ repeated runs.
+ * Animometer/runner/resources/tests.js:
+ (Suite): Create a new Suite class. Refactor out prepare() and
+ run(), since all of them have the same implementation. Populate
+ Suites with Suite instances instead of generic objects.
+
+2015-10-12 Jon Lee <jonlee@apple.com>
+
</ins><span class="cx"> Update graph styles for legibility.
</span><span class="cx"> https://bugs.webkit.org/show_bug.cgi?id=150052
</span><span class="cx"> <rdar://problem/23078503>
</span><span class="lines">@@ -12,6 +42,20 @@
</span><span class="cx"> * Animometer/runner/resources/graph.js:
</span><span class="cx"> (graph): Ditto.
</span><span class="cx">
</span><ins>+2015-10-12 Jon Lee <jonlee@apple.com>
+
+ Update graph styles for legibility.
+ https://bugs.webkit.org/show_bug.cgi?id=150052
+ <rdar://problem/23078503>
+
+ Reviewed by Dean Jackson.
+
+ * Animometer/runner/resources/animometer.css: Update colors and
+ stroke thicknesses to make the graphs easier to read.
+ (.smaple-time): Correct to .sample-time
+ * Animometer/runner/resources/graph.js:
+ (graph): Ditto.
+
</ins><span class="cx"> 2015-10-12 Filip Pizlo <fpizlo@apple.com>
</span><span class="cx">
</span><span class="cx"> Unreviewed, revert an unintended commit.
</span></span></pre>
</div>
</div>
</body>
</html>