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>
11window.onload = init;
12
13var raf;
14
15function init() {
16  raf = window.requestAnimationFrame ||
17        window.webkitRequestAnimationFrame ||
18        window.mozRequestAnimationFrame ||
19        window.oRequestAnimationFrame ||
20        window.msRequestAnimationFrame;
21  tick();
22};
23
24function tick() {
25  update();
26  raf(tick);
27};
28var bottomRight = document.getElementById('bottomRight');
29var x = 3000000;
30var y = 1000000;
31
32function rand255() {
33    return Math.floor(Math.random() * 256);
34}
35
36function 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>
47