Improve the appearance of DYEBench
authorrniwa@webkit.org <rniwa@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Sat, 15 Feb 2014 05:45:26 +0000 (05:45 +0000)
committerrniwa@webkit.org <rniwa@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Sat, 15 Feb 2014 05:45:26 +0000 (05:45 +0000)
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.

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@164157 268f45cc-cd09-0410-ab3c-d52691b4dbfc

PerformanceTests/ChangeLog
PerformanceTests/DoYouEvenBench/Full.html
PerformanceTests/DoYouEvenBench/resources/benchmark-runner.js

index 03acc6e11d0a99db72eea33aeaa8bdba8e5b9cda..950ca6a0b46264e2e5b44b85690dee76fe20e38e 100644 (file)
@@ -1,3 +1,25 @@
+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.
+
 2014-02-13  Zoltan Horvath  <zoltan@webkit.org>
 
         [CSS Shapes] Add performance test for complex polygon with shape-margin
index 5ae4c1ceb1921b8d232fb8a491400d6d534ece61..d39c7cca123d31d9e08728f5df690cc4a56a8723 100644 (file)
@@ -1,36 +1,85 @@
 <!DOCTYPE html>
 <html>
 <head>
-<title>DoYouEvenBench</title>
+<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>
 <script>
 
 (function () {
     var values = [];
-    var pre = null;
+    var resultContainer = null;
+    var title;
+    var progressContainer;
+    var progress;
     var iterationNumber = 0;
+    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);
+    }
+
     window.benchmarkClient = {
-        didRunSuites: function (measuredValues) {
-            if (!pre) {
-                pre = document.createElement('pre');
-                pre.style.paddingTop = '600px';
-                document.body.appendChild(pre);
+        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) + '%';
+        },
+        didRunSuites: function (measuredValues) {
             values.push(measuredValues.total);
             iterationNumber++;
-            pre.appendChild(document.createTextNode('Iteration ' + iterationNumber + ': ' + measuredValues.total + ' ms\n'));
+            addResult('Iteration ' + iterationNumber, measuredValues.total.toFixed(2) + ' ms');
         },
         didFinishLastIteration: function () {
-            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;
+            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);
         }
     }
 })();
 
 function startTest() {
     var iterationCount = 5;
+    benchmarkClient.testsCount = iterationCount * Suites.reduce(function (testsCount, suite) { return testsCount + suite.tests.length; }, 0);
     var runner = new BenchmarkRunner(Suites, benchmarkClient);
     runner.runMultipleIterations(iterationCount);
 }
@@ -38,6 +87,7 @@ function startTest() {
 </script>
 <script src="resources/benchmark-runner.js"></script>
 <script src="resources/benchmark-report.js"></script>
+<script src="../resources/statistics.js"></script>
 <script src="resources/tests.js"></script>
 </head>
 <body onload="startTest()">
index 6c1148bca3fd72dd85b2a1b00b708afbe512f420..0fef215c3e9af6a37c3ddc8506df283a38622c9e 100644 (file)
@@ -72,11 +72,11 @@ BenchmarkRunner.prototype._appendFrame = function (src) {
     frame.style.border = '0px none';
     frame.style.position = 'absolute';
 
-    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';
+    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';
     } else {
         frame.style.left = '0px';
         frame.style.top = '0px';
@@ -243,7 +243,7 @@ BenchmarkRunner.prototype._runTestAndRecordResults = function (state) {
             suiteResults.total += total;
             self._measuredValues.total += total;
 
-            if (self._client && self._client.willRunTest)
+            if (self._client && self._client.didRunTest)
                 self._client.didRunTest(suite, test);
 
             state.next();