tools/perf/page_sets/tough_canvas_cases/compositing_huge_div/index.html

   1 <html>
   2 <head>
   3 <title>Compositing - Huge &lt;div&gt;</title>
   4 </head>
   5 <body>
   6 <div id="big" style="-webkit-transform: translateZ(0);">
   7   <div style="left: 0px; top:  0px; width: 100px; height: 100px; position: absolute; background-color: green;"></div>
   8   <div style="left: 3000000px; top:  1000000px; width: 100px; height: 100px; position: absolute; background-color: red;" id="bottomRight"></div>
   9 </div>
  10 <script>
  11 window.onload = init;
  12
  13 var raf;
  14
  15 function init() {
  16   raf = window.requestAnimationFrame ||
  17         window.webkitRequestAnimationFrame ||
  18         window.mozRequestAnimationFrame ||
  19         window.oRequestAnimationFrame ||
  20         window.msRequestAnimationFrame;
  21   tick();
  22 };
  23
  24 function tick() {
  25   update();
  26   raf(tick);
  27 };
  28 var bottomRight = document.getElementById('bottomRight');
  29 var x = 3000000;
  30 var y = 1000000;
  31
  32 function rand255() {
  33     return Math.floor(Math.random() * 256);
  34 }
  35
  36 function update() {
  37   y += 1000000;
  38   bottomRight.style.left = x + 'px';
  39   bottomRight.style.top = y + 'px';
  40   bottomRight.style.backgroundColor = "rgb(" + rand255() + ", " + rand255() + ", " + rand255() + ")";
  41   scrollTo(x, y);
  42 };
  43
  44 </script>
  45 </body>
  46 </html>