| <!doctype html> |
| <html> |
| <head> |
| <meta name="viewport" content="width=device-width, initial-scale=1"> |
| <title>Second batch JS</title> |
| </head> |
| |
| <style> |
| #spinner { |
| width: 600px; |
| height: 10px; |
| border-right: black; |
| position: relative; |
| background: repeating-linear-gradient( |
| -45deg, |
| orange, |
| orange 21px, |
| yellow 21px, |
| yellow 42px |
| ); |
| } |
| #spinner-container { |
| width: 300px; |
| height: 10px; |
| overflow: hidden; |
| border: solid thin darkorange; |
| border-radius: 4px; |
| margin-top: 50px; |
| } |
| .spinner-loaded #spinner { |
| background: repeating-linear-gradient( |
| -45deg, |
| steelblue, |
| steelblue 21px, |
| aqua 21px, |
| aqua 42px |
| ); |
| } |
| #spinner-container.spinner-loaded { |
| border: solid thin steelblue; |
| } |
| input { |
| font-size: 150%; |
| width: 302px; |
| margin-top: 30px; |
| margin-bottom: 30px; |
| } |
| </style> |
| |
| <center> |
| <div id="spinner-container"> |
| <div id="spinner"></div> |
| </div> |
| |
| <input id="load" type="button" value="Start loading" onclick="kickOffLoading()"></input> |
| <input id="run" style='display: none' type="button" value="Click me!" onclick="onRunClick()"></input> |
| |
| <p id="results"></p> |
| |
| <p>Note: running this test interactively may activate compositor |
| prioritization during loading, which may skew the results.</p> |
| </center> |
| |
| <script> |
| // Flag that indicates the test is ready to begin. |
| window.__ready = false; |
| |
| // Flag that indicates the test has finished executing. |
| window.__finished = false; |
| |
| var results = document.getElementById('results'); |
| |
| function kickOffLoading() { |
| var loadButton = document.getElementById('load'); |
| loadButton.disabled = true; |
| |
| var variant = |
| location.search.length > 0 ? location.search.substr(1) : 'medium'; |
| var script = document.createElement('script'); |
| script.setAttribute('type', 'text/javascript') |
| script.setAttribute('src', 'second_batch_js_' + variant + '.min.js') |
| script.addEventListener('load', onLoadComplete); |
| document.body.appendChild(script); |
| } |
| |
| function onLoadComplete() { |
| var loadButton = document.getElementById('load'); |
| var runButton = document.getElementById('run'); |
| loadButton.style.display = 'none'; |
| runButton.style.display = 'block'; |
| spinnerContainer.classList.add('spinner-loaded'); |
| window.__ready = true; |
| } |
| |
| function onRunClick() { |
| results.innerText = 'Your lucky number is: ' + main(1); |
| window.requestAnimationFrame(finishTest); |
| } |
| |
| function finishTest() { |
| window.__finished = true; |
| } |
| |
| // Perform main thread animation during the benchmark to gauge main thread |
| // responsiveness. |
| var spinner = document.getElementById('spinner'); |
| var spinnerContainer = document.getElementById('spinner-container'); |
| function animateSpinner(timestamp) { |
| var width = parseInt(window.getComputedStyle(spinnerContainer).width); |
| var x = -(timestamp / 8) % width; |
| spinner.style.left = x + 'px'; |
| window.requestAnimationFrame(animateSpinner); |
| } |
| window.requestAnimationFrame(animateSpinner); |
| </script> |
| |
| </html> |
