tools/perf/page_sets/tough_scheduling_cases/second_batch_js.html

   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>