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