<!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>[213463] 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/213463">213463</a></dd>
<dt>Author</dt> <dd>jond@apple.com</dd>
<dt>Date</dt> <dd>2017-03-06 13:14:31 -0800 (Mon, 06 Mar 2017)</dd>
</dl>
<h3>Log Message</h3>
<pre>Refined the ARES-6 experience
https://bugs.webkit.org/show_bug.cgi?id=169205
Reviewed by Saam Barati.
* ARES-6/about.html: Copied from PerformanceTests/ARES-6/index.html.
* ARES-6/driver.js:
(Driver.prototype.start):
(Driver.prototype._updateIterations):
(Driver):
* ARES-6/index.html:
* ARES-6/stats.js:
(Stats.prototype.toString.span.span):
* ARES-6/styles.css:
(body):
(.swoop):
(p):
(.logo):
(.start):
(.test):
(.test:nth-child(odd)):
(.overall):
(.about h2):
(.button):
(.button:hover):
(.button.return:before):
(@keyframes fade-in):
(@keyframes scale-in):
(@keyframes flicker-in):
(@keyframes wipe-in):
(.flip): Deleted.
(.testing, .about): Deleted.
(.testing): Deleted.
(.about): Deleted.
(#about:target): Deleted.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkPerformanceTestsARES6driverjs">trunk/PerformanceTests/ARES-6/driver.js</a></li>
<li><a href="#trunkPerformanceTestsARES6indexhtml">trunk/PerformanceTests/ARES-6/index.html</a></li>
<li><a href="#trunkPerformanceTestsARES6statsjs">trunk/PerformanceTests/ARES-6/stats.js</a></li>
<li><a href="#trunkPerformanceTestsARES6stylescss">trunk/PerformanceTests/ARES-6/styles.css</a></li>
<li><a href="#trunkPerformanceTestsChangeLog">trunk/PerformanceTests/ChangeLog</a></li>
</ul>
<h3>Added Paths</h3>
<ul>
<li><a href="#trunkPerformanceTestsARES6abouthtml">trunk/PerformanceTests/ARES-6/about.html</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkPerformanceTestsARES6abouthtmlfromrev213462trunkPerformanceTestsARES6indexhtml"></a>
<div class="copfile"><h4>Copied: trunk/PerformanceTests/ARES-6/about.html (from rev 213462, trunk/PerformanceTests/ARES-6/index.html) (0 => 213463)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/PerformanceTests/ARES-6/about.html (rev 0)
+++ trunk/PerformanceTests/ARES-6/about.html 2017-03-06 21:14:31 UTC (rev 213463)
</span><span class="lines">@@ -0,0 +1,36 @@
</span><ins>+<!DOCTYPE html>
+<html>
+<head>
+ <link rel="stylesheet" href="styles.css">
+ <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes">
+</head>
+<body>
+
+ <div class="swoop">&nbsp;</div>
+
+ <header>
+ <h1 class="logo"><img src="ARES-6.svg" title="ARES-6" alt="ARES-6"></h1>
+ </header>
+
+ <main class="about">
+
+ <h2>About the Tests</h2>
+
+ <p>ARES-6 measures the execution time of JavaScript&#8217;s newest features, including symbols, for-of, arrow functions, Map/Set/WeakMap, let/const, classes, proxies, string interpolation, destructuring, default arguments, spread, tail calls, and generators.</p>
+
+ <p>Air is an ES2015 port of the <a href="https://webkit.org/blog/5852/introducing-the-b3-jit-compiler/">WebKit B3 JIT</a>&#8217;s <a href="https://trac.webkit.org/changeset/201783"><code>Air::allocateStack</code> phase</a>. This code is a heavy user of Map, Set, classes, spread, and for-of. The benchmark runs <code>allocateStack</code> on hot function bodies from other popular JavaScript benchmarks: <code>executeIteration</code> from <a href="https://developers.google.com/octane/">Octane</a>/Gameboy, <code>gaussianBlur</code> from <a href="http://krakenbenchmark.mozilla.org">Kraken</a>, and <code>scanIdentifier</code> from Octane/Typescript. Because metacircularity, the benchmark also runs <code>allocateStack</code> on the largest hot function in Air. <a href="https://trac.webkit.org/browser/
trunk/PerformanceTests/ARES-6/Air?rev=211697">Browse the source.</a></p>
+
+ <p>Basic is an <a href="https://trac.webkit.org/changeset/202446">ES2015 implementation</a> of the <a href="http://www.ecma-international.org/publications/files/ECMA-ST-WITHDRAWN/ECMA-55,%201st%20Edition,%20January%201978.pdf">ECMA-55 BASIC standard</a>. BASIC was an interactive language from the start, so our implementation uses generator functions for the entire interpreter. When the BASIC program says <code>INPUT</code>, our interpreter says <code>yield</code>. This allows users of the interpreter to easily integrate it into a runloop. Basic also uses classes, Map, and WeakMap. The benchmark runs a handful of simple programs, the most complex of which finds prime numbers. <a href="https://trac.webkit.org/browser/trunk/PerformanceTests/ARES-6/Basic?rev=211697&order=name">Browse the source.</a></p>
+
+ <p>ARES-6 rewards browsers that start up quickly and run smoothly. It's not enough to just measure the total running time of a workload. Browsers may perform differently for the same workload depending on how many times it has run. Garbage collection runs periodically, making some iterations take longer than others. Code that runs repeatedly gets optimized by the browser, so the first iteration of any workload is more expensive than the rest. ARES-6 runs these benchmarks for 200 iterations and reports the execution time of the first iteration, the average of the worst 2% iterations, and the overall geometric mean. Each of these values is given an equal weight when computing the ovarall time. ARES-6 equally rewards fast start-up, low jank, and sophisticated adaptive optimizations for long-running code.</p>
+
+ <p>Each ARES-6 sample has 200 iterations of Air and 200 iterations of Basic. ARES-6 runs 10 samples, and reports the average with 95% confidence intervals. Each sample runs in a fresh <code>iframe</code> to simulate some of the effects of page navigation.</p>
+
+ <p>We like making JavaScript run faster, but we didn&#8217;t have any ES2015 code to optimize. ARES-6 is a collection of sample ES2015 code written by the WebKit JavaScript team, which we used to bootstrap our ES2015 optimization efforts.</p>
+
+ <p><a href="index.html" class="button return">Return to Testing</a></p>
+
+ </main>
+
+</body>
+</html>
</ins></span></pre></div>
<a id="trunkPerformanceTestsARES6driverjs"></a>
<div class="modfile"><h4>Modified: trunk/PerformanceTests/ARES-6/driver.js (213462 => 213463)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/PerformanceTests/ARES-6/driver.js 2017-03-06 21:13:43 UTC (rev 213462)
+++ trunk/PerformanceTests/ARES-6/driver.js 2017-03-06 21:14:31 UTC (rev 213463)
</span><span class="lines">@@ -69,7 +69,7 @@
</span><span class="cx"> for (let [benchmark, results] of this._benchmarks)
</span><span class="cx"> results.reset();
</span><span class="cx"> this._isRunning = true;
</span><del>- this._numIterations = numIterations;
</del><ins>+ this._startIterations = this._numIterations = numIterations;
</ins><span class="cx"> this._iterator = null;
</span><span class="cx"> this._iterate();
</span><span class="cx"> }
</span><span class="lines">@@ -193,7 +193,9 @@
</span><span class="cx">
</span><span class="cx"> _updateIterations()
</span><span class="cx"> {
</span><del>- if (isInBrowser)
- this._statusCell.innerHTML = "Running... " + (this._numIterations + 1) + " to go";
</del><ins>+ if (isInBrowser) {
+ this._statusCell.innerHTML = "Running Tests... " + ( this._startIterations - this._numIterations ) + "/" + this._startIterations;
+ }
+
</ins><span class="cx"> }
</span><span class="cx"> }
</span></span></pre></div>
<a id="trunkPerformanceTestsARES6indexhtml"></a>
<div class="modfile"><h4>Modified: trunk/PerformanceTests/ARES-6/index.html (213462 => 213463)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/PerformanceTests/ARES-6/index.html 2017-03-06 21:13:43 UTC (rev 213462)
+++ trunk/PerformanceTests/ARES-6/index.html 2017-03-06 21:14:31 UTC (rev 213463)
</span><span class="lines">@@ -1,7 +1,8 @@
</span><span class="cx"> <!DOCTYPE html>
</span><span class="cx"> <html>
</span><span class="cx"> <head>
</span><del>- <link rel="stylesheet" href="styles.css">
</del><ins>+ <link rel="stylesheet" href="styles.css">
+ <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes">
</ins><span class="cx"> </head>
</span><span class="cx"> <body>
</span><span class="cx"> <script>
</span><span class="lines">@@ -16,6 +17,8 @@
</span><span class="cx"> <script src="results.js"></script>
</span><span class="cx"> <script src="stats.js"></script>
</span><span class="cx">
</span><ins>+ <div class="swoop">&nbsp;</div>
+
</ins><span class="cx"> <header>
</span><span class="cx"> <h1 class="logo"><img src="ARES-6.svg" title="ARES-6" alt="ARES-6"></h1>
</span><span class="cx"> <button id="trigger" class="start">
</span><span class="lines">@@ -26,16 +29,13 @@
</span><span class="cx">
</span><span class="cx"> <main>
</span><span class="cx">
</span><del>- <p>ARES-6 measures the execution time of JavaScript's newest features. <a href="#about">Read more details &#9658;</a></p>
</del><ins>+ <p>ARES-6 measures the execution time of JavaScript's newest features. <a href="about.html">Read more details&hellip;</a></p>
</ins><span class="cx">
</span><del>- <div id="about" class="flip">
- <div class="testing">
-
</del><span class="cx"> <div class="overall">
</span><span class="cx"> <h2>Overall</h2>
</span><span class="cx"> <div class="score">
</span><span class="cx"> <span id="Geomean">
</span><del>- <span class="value">&#10074;&#10074;.&#10074;&#10074;</span><span class="units">ms</span>
</del><ins>+ <span class="value">&#8709;</span><span class="units">ms</span>
</ins><span class="cx"> </span>
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="lines">@@ -49,7 +49,7 @@
</span><span class="cx"> <div class="score">
</span><span class="cx"> <label>First Iteration</label>
</span><span class="cx"> <span id="AirFirstIteration">
</span><del>- <span class="value">&#10074;&#10074;.&#10074;&#10074;</span><span class="units">ms</span>
</del><ins>+ <span class="value">&#8709;</span><span class="units">ms</span>
</ins><span class="cx"> </span>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="lines">@@ -56,7 +56,7 @@
</span><span class="cx"> <div class="score">
</span><span class="cx"> <label>Worst 2%</label>
</span><span class="cx"> <span id="AirAverageWorstCase">
</span><del>- <span class="value">&#10074;&#10074;.&#10074;&#10074;</span><span class="units">ms</span>
</del><ins>+ <span class="value">&#8709;</span><span class="units">ms</span>
</ins><span class="cx"> </span>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="lines">@@ -63,7 +63,7 @@
</span><span class="cx"> <div class="score">
</span><span class="cx"> <label>Average</label>
</span><span class="cx"> <span id="AirSteadyState">
</span><del>- <span class="value">&#10074;&#10074;.&#10074;&#10074;</span><span class="units">ms</span>
</del><ins>+ <span class="value">&#8709;</span><span class="units">ms</span>
</ins><span class="cx"> </span>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="lines">@@ -76,7 +76,7 @@
</span><span class="cx"> <div class="score">
</span><span class="cx"> <label>First Iteration</label>
</span><span class="cx"> <span id="BasicFirstIteration">
</span><del>- <span class="value">&#10074;&#10074;.&#10074;&#10074;</span><span class="units">ms</span>
</del><ins>+ <span class="value">&#8709;</span><span class="units">ms</span>
</ins><span class="cx"> </span>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="lines">@@ -83,7 +83,7 @@
</span><span class="cx"> <div class="score">
</span><span class="cx"> <label>Worst 2%</label>
</span><span class="cx"> <span id="BasicAverageWorstCase">
</span><del>- <span class="value">&#10074;&#10074;.&#10074;&#10074;</span><span class="units">ms</span>
</del><ins>+ <span class="value">&#8709;</span><span class="units">ms</span>
</ins><span class="cx"> </span>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="lines">@@ -90,7 +90,7 @@
</span><span class="cx"> <div class="score">
</span><span class="cx"> <label>Average</label>
</span><span class="cx"> <span id="BasicSteadyState">
</span><del>- <span class="value">&#10074;&#10074;.&#10074;&#10074;</span><span class="units">ms</span>
</del><ins>+ <span class="value">&#8709;</span><span class="units">ms</span>
</ins><span class="cx"> </span>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="lines">@@ -97,27 +97,6 @@
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> </div>
</span><del>- </div>
-
- <div class="about">
- <h2>About</h2>
-
- <p>ARES-6 measures the execution time of JavaScript&#8217;s newest features, including symbols, for-of, arrow functions, Map/Set/WeakMap, let/const, classes, proxies, string interpolation, destructuring, default arguments, spread, tail calls, and generators.</p>
-
- <p>Air is an ES2015 port of the <a href="https://webkit.org/blog/5852/introducing-the-b3-jit-compiler/">WebKit B3 JIT</a>&#8217;s <a href="https://trac.webkit.org/changeset/201783"><code>Air::allocateStack</code> phase</a>. This code is a heavy user of Map, Set, classes, spread, and for-of. The benchmark runs <code>allocateStack</code> on hot function bodies from other popular JavaScript benchmarks: <code>executeIteration</code> from <a href="https://developers.google.com/octane/">Octane</a>/Gameboy, <code>gaussianBlur</code> from <a href="http://krakenbenchmark.mozilla.org">Kraken</a>, and <code>scanIdentifier</code> from Octane/Typescript. Because metacircularity, the benchmark also runs <code>allocateStack</code> on the largest hot function in Air. <a href="https://trac.webkit.org/browser/
trunk/PerformanceTests/ARES-6/Air?rev=211697">Browse the source.</a></p>
-
- <p>Basic is an <a href="https://trac.webkit.org/changeset/202446">ES2015 implementation</a> of the <a href="http://www.ecma-international.org/publications/files/ECMA-ST-WITHDRAWN/ECMA-55,%201st%20Edition,%20January%201978.pdf">ECMA-55 BASIC standard</a>. BASIC was an interactive language from the start, so our implementation uses generator functions for the entire interpreter. When the BASIC program says <code>INPUT</code>, our interpreter says <code>yield</code>. This allows users of the interpreter to easily integrate it into a runloop. Basic also uses classes, Map, and WeakMap. The benchmark runs a handful of simple programs, the most complex of which finds prime numbers. <a href="https://trac.webkit.org/browser/trunk/PerformanceTests/ARES-6/Basic?rev=211697&order=name">Browse the source.</a></p>
-
- <p>ARES-6 rewards browsers that start up quickly and run smoothly. It's not enough to just measure the total running time of a workload. Browsers may perform differently for the same workload depending on how many times it has run. Garbage collection runs periodically, making some iterations take longer than others. Code that runs repeatedly gets optimized by the browser, so the first iteration of any workload is more expensive than the rest. ARES-6 runs these benchmarks for 200 iterations and reports the execution time of the first iteration, the average of the worst 2% iterations, and the overall geometric mean. Each of these values is given an equal weight when computing the ovarall time. ARES-6 equally rewards fast start-up, low jank, and sophisticated adaptive optimizations for long-running code.</p>
-
- <p>Each ARES-6 sample has 200 iterations of Air and 200 iterations of Basic. ARES-6 runs 10 samples, and reports the average with 95% confidence intervals. Each sample runs in a fresh <code>iframe</code> to simulate some of the effects of page navigation.</p>
-
- <p>We like making JavaScript run faster, but we didn&#8217;t have any ES2015 code to optimize. ARES-6 is a collection of sample ES2015 code written by the WebKit JavaScript team, which we used to bootstrap our ES2015 optimization efforts.</p>
-
- <p><a href="#">&#9700; Return to Testing</a></p>
- </div>
-
- </div>
</del><span class="cx"> </main>
</span><span class="cx">
</span><span class="cx"> <iframe id="magic" frameBorder=0></iframe>
</span></span></pre></div>
<a id="trunkPerformanceTestsARES6statsjs"></a>
<div class="modfile"><h4>Modified: trunk/PerformanceTests/ARES-6/stats.js (213462 => 213463)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/PerformanceTests/ARES-6/stats.js 2017-03-06 21:13:43 UTC (rev 213462)
+++ trunk/PerformanceTests/ARES-6/stats.js 2017-03-06 21:14:31 UTC (rev 213463)
</span><span class="lines">@@ -92,8 +92,8 @@
</span><span class="cx">
</span><span class="cx"> if (!result.n) {
</span><span class="cx"> if (isInBrowser)
</span><del>- return `<span class="value">\&#10074;\&#10074;.\&#10074;\&#10074;</span><span class="units">ms</span>`;
- return `${this._prefix}--.--ms`;
</del><ins>+ return `<span class="value">\&#8709;</span><span class="units">ms</span>`;
+ return `${this._prefix}\&#x2b14;ms`;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> if (result.mean != result.mean)
</span></span></pre></div>
<a id="trunkPerformanceTestsARES6stylescss"></a>
<div class="modfile"><h4>Modified: trunk/PerformanceTests/ARES-6/styles.css (213462 => 213463)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/PerformanceTests/ARES-6/styles.css 2017-03-06 21:13:43 UTC (rev 213462)
+++ trunk/PerformanceTests/ARES-6/styles.css 2017-03-06 21:14:31 UTC (rev 213463)
</span><span class="lines">@@ -6,8 +6,7 @@
</span><span class="cx">
</span><span class="cx"> body {
</span><span class="cx"> margin: 0;
</span><del>- background: #2C2C3C url('swoop.svg') no-repeat;
- background-size: 50vw;
</del><ins>+ background-color: #2C2C3C;
</ins><span class="cx"> width: 100%;
</span><span class="cx"> font-size: 1.6rem;
</span><span class="cx"> font-weight: 400;
</span><span class="lines">@@ -15,9 +14,21 @@
</span><span class="cx"> color: #9B9B9B;
</span><span class="cx"> box-sizing: border-box;
</span><span class="cx"> padding: 6vw 9vw;
</span><del>- perspective: 1000px;
</del><span class="cx"> }
</span><span class="cx">
</span><ins>+.swoop {
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+ right: 0;
+ background-image: url('swoop.svg');
+ background-repeat: no-repeat;
+ background-size: 50vw;
+ width: 0;
+ animation: wipe-in 1s ease-in 0 forwards;
+}
+
</ins><span class="cx"> header,
</span><span class="cx"> main,
</span><span class="cx"> footer {
</span><span class="lines">@@ -35,14 +46,6 @@
</span><span class="cx"> text-decoration: underline;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.flip {
- transition: 0.6s;
- transform-style: preserve-3d;
-
- position: relative;
- display: flex;
-}
-
</del><span class="cx"> header {
</span><span class="cx"> display: flex;
</span><span class="cx"> flex-wrap: wrap;
</span><span class="lines">@@ -61,6 +64,8 @@
</span><span class="cx"> color: #ffffff;
</span><span class="cx"> font-size: 1.8rem;
</span><span class="cx"> margin-bottom: 3rem;
</span><ins>+ opacity: 0;
+ animation: fade-in 1s ease-in 200ms forwards;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .about h2 {
</span><span class="lines">@@ -74,6 +79,9 @@
</span><span class="cx"> overflow: hidden;
</span><span class="cx"> margin: 1px 1rem 1px 0;
</span><span class="cx"> font-size: 0;
</span><ins>+
+ opacity: 0;
+ animation: scale-in 1100ms ease-out 0 forwards;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .start {
</span><span class="lines">@@ -87,6 +95,10 @@
</span><span class="cx"> font-weight: 600;
</span><span class="cx"> text-transform: uppercase;
</span><span class="cx"> color: #E7B135;
</span><ins>+
+ opacity: 0;
+ animation: flicker-in 500ms ease-out 1s forwards;
+
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .start.ready {
</span><span class="lines">@@ -101,7 +113,7 @@
</span><span class="cx">
</span><span class="cx"> .start:after {
</span><span class="cx"> content: '';
</span><del>- display: block;
</del><ins>+ display: block;
</ins><span class="cx"> position: absolute;
</span><span class="cx"> right: 0;
</span><span class="cx"> top: 0;
</span><span class="lines">@@ -129,7 +141,12 @@
</span><span class="cx"> border-bottom: 1px solid #979797;
</span><span class="cx"> margin-right: 1rem;
</span><span class="cx"> margin-bottom: 3rem;
</span><ins>+ opacity: 0;
+ animation: fade-in 1s ease-out 700ms forwards;
</ins><span class="cx"> }
</span><ins>+.test:nth-child(odd) {
+ animation-delay: 900ms;
+}
</ins><span class="cx">
</span><span class="cx"> .overall h2,
</span><span class="cx"> .test h2 {
</span><span class="lines">@@ -139,7 +156,7 @@
</span><span class="cx"> .test .indicator {
</span><span class="cx"> color: #E7B135;
</span><span class="cx"> opacity: 0;
</span><del>-
</del><ins>+
</ins><span class="cx"> position: absolute;
</span><span class="cx"> left: -1.2rem;
</span><span class="cx"> }
</span><span class="lines">@@ -178,7 +195,7 @@
</span><span class="cx"> .score .units {
</span><span class="cx"> font-size: 4rem;
</span><span class="cx"> font-weight: 600;
</span><del>-
</del><ins>+
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .score .margin {
</span><span class="lines">@@ -191,6 +208,8 @@
</span><span class="cx">
</span><span class="cx"> .overall {
</span><span class="cx"> margin-bottom: 3rem;
</span><ins>+ opacity: 0;
+ animation: fade-in 1s ease-out 500ms forwards;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .overall .score {
</span><span class="lines">@@ -201,33 +220,69 @@
</span><span class="cx"> top: 0.5rem;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.testing, .about {
- background-color: #2C2C3C;
- -webkit-backface-visibility: hidden;
</del><ins>+.about h2 {
+ margin-top: 3rem;
+ opacity: 0;
+ animation: fade-in 1s ease-out 500ms forwards;
+}
</ins><span class="cx">
</span><del>- position: absolute;
- top: 0;
- left: 0;
</del><ins>+.button {
+ display: inline-block;
+ position: relative;
+ border: 5px solid #E7B135;
+ padding: 1rem 3rem;
+ text-transform: uppercase;
+ font-weight: bold;
+ transition: background 0.2s ease-out, color 0.2s ease-out;
</ins><span class="cx"> }
</span><span class="cx">
</span><del>-.testing {
- width: 100%;
- z-index: 2;
- transform: rotateY(0deg);
- padding-bottom: 10rem;
</del><ins>+.button:hover {
+ background-color: #E7B135;
+ color: #2C2C3C;
+ text-decoration: none;
</ins><span class="cx"> }
</span><span class="cx">
</span><del>-.about {
- transform: rotateY(180deg);
</del><ins>+.button.return:before {
+ content: '';
+ display: block;
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 0;
+ height: 0;
+ border-top: 2rem solid #E7B135;
+ border-right: 2rem solid transparent;
+ border-bottom: 0 solid transparent;
+ border-left: 0 solid transparent;
</ins><span class="cx"> }
</span><span class="cx">
</span><del>-#about:target {
- transform: rotateY(180deg);
-
</del><ins>+@keyframes fade-in {
+ 0% { opacity: 0; }
+ 100% { opacity: 1; }
</ins><span class="cx"> }
</span><span class="cx">
</span><ins>+@keyframes scale-in {
+ 0% { opacity: 0; transform: scale(0.8); }
+ 100% { opacity: 1; transform: scale(1); }
+}
+
+@keyframes flicker-in {
+ 0% { opacity: 0; }
+ 30% { opacity: 0.3; }
+ 40% { opacity: 0; }
+ 50% { opacity: 0.1; }
+ 60% { opacity: 0; }
+ 70% { opacity: 0.4; }
+ 80% { opacity: 0; }
+ 100% { opacity: 1; }
+}
+
+@keyframes wipe-in {
+ 0% { width: 0; }
+ 100% { width: 100vw; }
+}
+
</ins><span class="cx"> @media only screen and (max-width: 784px) {
</span><del>-
</del><span class="cx"> .logo {
</span><span class="cx"> width: 100%;
</span><span class="cx"> margin-bottom: 1rem;
</span><span class="lines">@@ -236,10 +291,10 @@
</span><span class="cx"> .start {
</span><span class="cx"> width: 100%;
</span><span class="cx"> }
</span><del>-
</del><ins>+
</ins><span class="cx"> .test {
</span><span class="cx"> flex: none;
</span><del>-
</del><ins>+
</ins><span class="cx"> width: 100%;
</span><span class="cx"> }
</span><span class="cx"> }
</span><span class="cx">\ No newline at end of file
</span></span></pre></div>
<a id="trunkPerformanceTestsChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/PerformanceTests/ChangeLog (213462 => 213463)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/PerformanceTests/ChangeLog 2017-03-06 21:13:43 UTC (rev 213462)
+++ trunk/PerformanceTests/ChangeLog 2017-03-06 21:14:31 UTC (rev 213463)
</span><span class="lines">@@ -1,3 +1,41 @@
</span><ins>+2017-03-06 Jon Davis <jond@apple.com>
+
+ Refined the ARES-6 experience
+ https://bugs.webkit.org/show_bug.cgi?id=169205
+
+ Reviewed by Saam Barati.
+
+ * ARES-6/about.html: Copied from PerformanceTests/ARES-6/index.html.
+ * ARES-6/driver.js:
+ (Driver.prototype.start):
+ (Driver.prototype._updateIterations):
+ (Driver):
+ * ARES-6/index.html:
+ * ARES-6/stats.js:
+ (Stats.prototype.toString.span.span):
+ * ARES-6/styles.css:
+ (body):
+ (.swoop):
+ (p):
+ (.logo):
+ (.start):
+ (.test):
+ (.test:nth-child(odd)):
+ (.overall):
+ (.about h2):
+ (.button):
+ (.button:hover):
+ (.button.return:before):
+ (@keyframes fade-in):
+ (@keyframes scale-in):
+ (@keyframes flicker-in):
+ (@keyframes wipe-in):
+ (.flip): Deleted.
+ (.testing, .about): Deleted.
+ (.testing): Deleted.
+ (.about): Deleted.
+ (#about:target): Deleted.
+
</ins><span class="cx"> 2017-03-06 Jeremy Jones <jeremyj@apple.com>
</span><span class="cx">
</span><span class="cx"> StandardCanPlayThrough.html does not work on iOS.
</span></span></pre>
</div>
</div>
</body>
</html>