| OLD | NEW |
| (Empty) |
| 1 <html> | |
| 2 <head> | |
| 3 <title>Compositing - Huge <div></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: absol
ute; background-color: green;"></div> | |
| 8 <div style="left: 3000000px; top: 1000000px; width: 100px; height: 100px; pos
ition: 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> | |
| OLD | NEW |