<!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>[164157] 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/164157">164157</a></dd>
<dt>Author</dt> <dd>rniwa@webkit.org</dd>
<dt>Date</dt> <dd>2014-02-14 21:45:26 -0800 (Fri, 14 Feb 2014)</dd>
</dl>
<h3>Log Message</h3>
<pre>Improve the appearance of DYEBench
https://bugs.webkit.org/show_bug.cgi?id=128866
Reviewed by Antti Koivisto.
Add a div that shows progress during the test. Also show 95th percentile,
and use a table instead of pre to show results.
* DoYouEvenBench/Full.html:
(.addResult): Added. Shows results in a table.
(benchmarkClient.willRunTest): Added to show the progress bar.
(benchmarkClient.didRunTest):
(benchmarkClient.didRunSuites):
(benchmarkClient.didFinishLastIteration): Compute 95th percentile using Statistics.js
* DoYouEvenBench/resources/benchmark-runner.js:
(BenchmarkRunner.prototype._appendFrame): Fix the bug where marginLeft and marginTop
weren't correctly parsed. We were treating top as left and bottom as top somehow.
(BenchmarkRunner.prototype._runTestAndRecordResults): Fixed a typo.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkPerformanceTestsChangeLog">trunk/PerformanceTests/ChangeLog</a></li>
<li><a href="#trunkPerformanceTestsDoYouEvenBenchFullhtml">trunk/PerformanceTests/DoYouEvenBench/Full.html</a></li>
<li><a href="#trunkPerformanceTestsDoYouEvenBenchresourcesbenchmarkrunnerjs">trunk/PerformanceTests/DoYouEvenBench/resources/benchmark-runner.js</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkPerformanceTestsChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/PerformanceTests/ChangeLog (164156 => 164157)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/PerformanceTests/ChangeLog 2014-02-15 04:52:38 UTC (rev 164156)
+++ trunk/PerformanceTests/ChangeLog 2014-02-15 05:45:26 UTC (rev 164157)
</span><span class="lines">@@ -1,3 +1,25 @@
</span><ins>+2014-02-14 Ryosuke Niwa <rniwa@webkit.org>
+
+ Improve the appearance of DYEBench
+ https://bugs.webkit.org/show_bug.cgi?id=128866
+
+ Reviewed by Antti Koivisto.
+
+ Add a div that shows progress during the test. Also show 95th percentile,
+ and use a table instead of pre to show results.
+
+ * DoYouEvenBench/Full.html:
+ (.addResult): Added. Shows results in a table.
+ (benchmarkClient.willRunTest): Added to show the progress bar.
+ (benchmarkClient.didRunTest):
+ (benchmarkClient.didRunSuites):
+ (benchmarkClient.didFinishLastIteration): Compute 95th percentile using Statistics.js
+
+ * DoYouEvenBench/resources/benchmark-runner.js:
+ (BenchmarkRunner.prototype._appendFrame): Fix the bug where marginLeft and marginTop
+ weren't correctly parsed. We were treating top as left and bottom as top somehow.
+ (BenchmarkRunner.prototype._runTestAndRecordResults): Fixed a typo.
+
</ins><span class="cx"> 2014-02-13 Zoltan Horvath <zoltan@webkit.org>
</span><span class="cx">
</span><span class="cx"> [CSS Shapes] Add performance test for complex polygon with shape-margin
</span></span></pre></div>
<a id="trunkPerformanceTestsDoYouEvenBenchFullhtml"></a>
<div class="modfile"><h4>Modified: trunk/PerformanceTests/DoYouEvenBench/Full.html (164156 => 164157)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/PerformanceTests/DoYouEvenBench/Full.html 2014-02-15 04:52:38 UTC (rev 164156)
+++ trunk/PerformanceTests/DoYouEvenBench/Full.html 2014-02-15 05:45:26 UTC (rev 164157)
</span><span class="lines">@@ -1,36 +1,85 @@
</span><span class="cx"> <!DOCTYPE html>
</span><span class="cx"> <html>
</span><span class="cx"> <head>
</span><del>-<title>DoYouEvenBench</title>
</del><ins>+<title>DoYouEvenBench v0.9</title>
+<style type="text/css">
+caption { margin: 0; padding: 0; font-family: sans-serif; font-size: 1em; font-weight: bold; white-space: nowrap; }
+#progressContainer { padding: 605px 0 10px 0; width: 800px; }
+#progressContainer div { background-color: #ccc; width: 0; height: 5px; overflow: hidden; }
+table { font-family: sans-serif; }
+table, td, th { border: solid 1px #ccc; border-collapse: collapse; padding: 5px; }
+th { text-align: right; }
+td { text-align: left; }
+</style>
</ins><span class="cx"> <script>
</span><span class="cx">
</span><span class="cx"> (function () {
</span><span class="cx"> var values = [];
</span><del>- var pre = null;
</del><ins>+ var resultContainer = null;
+ var title;
+ var progressContainer;
+ var progress;
</ins><span class="cx"> var iterationNumber = 0;
</span><ins>+ var finishedTestCount = 0;
+
+ function addResult(title, value) {
+ if (!resultContainer) {
+ resultContainer = document.createElement('table');
+ var caption = document.createElement('caption');
+ caption.textContent = document.title;
+ resultContainer.appendChild(caption);
+ document.body.appendChild(resultContainer);
+ }
+ if (!title)
+ return;
+ var row = document.createElement('tr');
+ var th = document.createElement('th');
+ th.textContent = title;
+ var td = document.createElement('td');
+ td.textContent = value;
+ row.appendChild(th);
+ row.appendChild(td);
+ resultContainer.appendChild(row);
+ }
+
</ins><span class="cx"> window.benchmarkClient = {
</span><ins>+ willRunTest: function () {
+ if (!progress) {
+ // We don't use the real progress element as some implementations animate it.
+ progressContainer = document.createElement('div');
+ progressContainer.appendChild(document.createElement('div'));
+ progressContainer.id = 'progressContainer';
+ document.body.appendChild(progressContainer);
+ progress = progressContainer.firstChild;
+ }
+ addResult();
+ },
+ didRunTest: function () {
+ finishedTestCount++;
+ progress.style.width = (finishedTestCount * 100 / this.testsCount) + '%';
+ },
</ins><span class="cx"> didRunSuites: function (measuredValues) {
</span><del>- if (!pre) {
- pre = document.createElement('pre');
- pre.style.paddingTop = '600px';
- document.body.appendChild(pre);
- }
</del><span class="cx"> values.push(measuredValues.total);
</span><span class="cx"> iterationNumber++;
</span><del>- pre.appendChild(document.createTextNode('Iteration ' + iterationNumber + ': ' + measuredValues.total + ' ms\n'));
</del><ins>+ addResult('Iteration ' + iterationNumber, measuredValues.total.toFixed(2) + ' ms');
</ins><span class="cx"> },
</span><span class="cx"> didFinishLastIteration: function () {
</span><del>- var sum = 0;
- for (var i = 0; i < values.length; i++)
- sum += values[i];
- pre.appendChild(document.createTextNode('Average: ' + (sum / iterationNumber) + ' ms\n'));
- pre.style.paddingTop = 0;
</del><ins>+ var sum = values.reduce(function (a, b) { return a + b; }, 0);
+ var arithmeticMean = sum / values.length;
+ addResult('Arithmetic Mean', arithmeticMean.toFixed(2) + 'ms');
+ if (window.Statistics) {
+ var delta = Statistics.confidenceIntervalDelta(0.95, values.length, sum, Statistics.squareSum(values));
+ var precentDelta = delta * 100 / arithmeticMean;
+ addResult('95th Percentile', delta.toFixed(2) + ' ms (' + precentDelta.toFixed(2) + '%)');
+ }
+ progressContainer.parentNode.removeChild(progressContainer);
</ins><span class="cx"> }
</span><span class="cx"> }
</span><span class="cx"> })();
</span><span class="cx">
</span><span class="cx"> function startTest() {
</span><span class="cx"> var iterationCount = 5;
</span><ins>+ benchmarkClient.testsCount = iterationCount * Suites.reduce(function (testsCount, suite) { return testsCount + suite.tests.length; }, 0);
</ins><span class="cx"> var runner = new BenchmarkRunner(Suites, benchmarkClient);
</span><span class="cx"> runner.runMultipleIterations(iterationCount);
</span><span class="cx"> }
</span><span class="lines">@@ -38,6 +87,7 @@
</span><span class="cx"> </script>
</span><span class="cx"> <script src="resources/benchmark-runner.js"></script>
</span><span class="cx"> <script src="resources/benchmark-report.js"></script>
</span><ins>+<script src="../resources/statistics.js"></script>
</ins><span class="cx"> <script src="resources/tests.js"></script>
</span><span class="cx"> </head>
</span><span class="cx"> <body onload="startTest()">
</span></span></pre></div>
<a id="trunkPerformanceTestsDoYouEvenBenchresourcesbenchmarkrunnerjs"></a>
<div class="modfile"><h4>Modified: trunk/PerformanceTests/DoYouEvenBench/resources/benchmark-runner.js (164156 => 164157)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/PerformanceTests/DoYouEvenBench/resources/benchmark-runner.js 2014-02-15 04:52:38 UTC (rev 164156)
+++ trunk/PerformanceTests/DoYouEvenBench/resources/benchmark-runner.js 2014-02-15 05:45:26 UTC (rev 164157)
</span><span class="lines">@@ -72,11 +72,11 @@
</span><span class="cx"> frame.style.border = '0px none';
</span><span class="cx"> frame.style.position = 'absolute';
</span><span class="cx">
</span><del>- var marginTop = document.body.style.marginTop;
- var marginBottom = document.body.style.marginBottom;
- if (window.innerWidth > 800 + marginTop && window.innerHeight > 600 + marginBottom) {
- frame.style.left = marginTop + 'px';
- frame.style.top = marginBottom + 'px';
</del><ins>+ var marginLeft = parseInt(getComputedStyle(document.body).marginLeft);
+ var marginTop = parseInt(getComputedStyle(document.body).marginTop);
+ if (window.innerWidth > 800 + marginLeft && window.innerHeight > 600 + marginTop) {
+ frame.style.left = marginLeft + 'px';
+ frame.style.top = marginTop + 'px';
</ins><span class="cx"> } else {
</span><span class="cx"> frame.style.left = '0px';
</span><span class="cx"> frame.style.top = '0px';
</span><span class="lines">@@ -243,7 +243,7 @@
</span><span class="cx"> suiteResults.total += total;
</span><span class="cx"> self._measuredValues.total += total;
</span><span class="cx">
</span><del>- if (self._client && self._client.willRunTest)
</del><ins>+ if (self._client && self._client.didRunTest)
</ins><span class="cx"> self._client.didRunTest(suite, test);
</span><span class="cx">
</span><span class="cx"> state.next();
</span></span></pre>
</div>
</div>
</body>
</html>