| OLD | NEW |
| (Empty) | |
| 1 <!doctype html> |
| 2 <html> |
| 3 <head> |
| 4 <meta name="viewport" content="width=device-width, initial-scale=1"> |
| 5 <title>Second batch JS</title> |
| 6 </head> |
| 7 |
| 8 <style> |
| 9 #spinner { |
| 10 width: 600px; |
| 11 height: 10px; |
| 12 border-right: black; |
| 13 position: relative; |
| 14 background: repeating-linear-gradient( |
| 15 -45deg, |
| 16 orange, |
| 17 orange 21px, |
| 18 yellow 21px, |
| 19 yellow 42px |
| 20 ); |
| 21 } |
| 22 #spinner-container { |
| 23 width: 300px; |
| 24 height: 10px; |
| 25 overflow: hidden; |
| 26 border: solid thin darkorange; |
| 27 border-radius: 4px; |
| 28 margin-top: 50px; |
| 29 } |
| 30 .spinner-loaded #spinner { |
| 31 background: repeating-linear-gradient( |
| 32 -45deg, |
| 33 steelblue, |
| 34 steelblue 21px, |
| 35 aqua 21px, |
| 36 aqua 42px |
| 37 ); |
| 38 } |
| 39 #spinner-container.spinner-loaded { |
| 40 border: solid thin steelblue; |
| 41 } |
| 42 input { |
| 43 font-size: 150%; |
| 44 width: 302px; |
| 45 margin-top: 30px; |
| 46 margin-bottom: 30px; |
| 47 } |
| 48 </style> |
| 49 |
| 50 <center> |
| 51 <div id="spinner-container"> |
| 52 <div id="spinner"></div> |
| 53 </div> |
| 54 |
| 55 <input id="load" type="button" value="Start loading" onclick="kickOffLoading()
"></input> |
| 56 <input id="run" style='display: none' type="button" value="Click me!" onclick=
"onRunClick()"></input> |
| 57 |
| 58 <p id="results"></p> |
| 59 |
| 60 <p>Note: running this test interactively may activate compositor |
| 61 prioritization during loading, which may skew the results.</p> |
| 62 </center> |
| 63 |
| 64 <script> |
| 65 // Flag that indicates the test is ready to begin. |
| 66 window.__ready = false; |
| 67 |
| 68 // Flag that indicates the test has finished executing. |
| 69 window.__finished = false; |
| 70 |
| 71 var results = document.getElementById('results'); |
| 72 |
| 73 function kickOffLoading() { |
| 74 var loadButton = document.getElementById('load'); |
| 75 loadButton.disabled = true; |
| 76 |
| 77 var variant = |
| 78 location.search.length > 0 ? location.search.substr(1) : 'medium'; |
| 79 var script = document.createElement('script'); |
| 80 script.setAttribute('type', 'text/javascript') |
| 81 script.setAttribute('src', 'second_batch_js_' + variant + '.min.js') |
| 82 script.addEventListener('load', onLoadComplete); |
| 83 document.body.appendChild(script); |
| 84 } |
| 85 |
| 86 function onLoadComplete() { |
| 87 var loadButton = document.getElementById('load'); |
| 88 var runButton = document.getElementById('run'); |
| 89 loadButton.style.display = 'none'; |
| 90 runButton.style.display = 'block'; |
| 91 spinnerContainer.classList.add('spinner-loaded'); |
| 92 window.__ready = true; |
| 93 } |
| 94 |
| 95 function onRunClick() { |
| 96 results.innerText = 'Your lucky number is: ' + main(1); |
| 97 window.requestAnimationFrame(finishTest); |
| 98 } |
| 99 |
| 100 function finishTest() { |
| 101 window.__finished = true; |
| 102 } |
| 103 |
| 104 // Perform main thread animation during the benchmark to gauge main thread |
| 105 // responsiveness. |
| 106 var spinner = document.getElementById('spinner'); |
| 107 var spinnerContainer = document.getElementById('spinner-container'); |
| 108 function animateSpinner(timestamp) { |
| 109 var width = parseInt(window.getComputedStyle(spinnerContainer).width); |
| 110 var x = -(timestamp / 8) % width; |
| 111 spinner.style.left = x + 'px'; |
| 112 window.requestAnimationFrame(animateSpinner); |
| 113 } |
| 114 window.requestAnimationFrame(animateSpinner); |
| 115 </script> |
| 116 |
| 117 </html> |
| OLD | NEW |