index.html | Explore in Territory

<html>
<head>
<title>Compositing - Huge &lt;div&gt;</title>
</head>
<body>
<div id="big" style="will-change: transform;">
  <div style="left: 0px; top:  0px; width: 100px; height: 100px; position: absolute; background-color: green;"></div>
  <div style="left: 3000000px; top:  1000000px; width: 100px; height: 100px; position: absolute; background-color: red;" id="bottomRight"></div>
</div>
<script>
window.onload = init;

var raf;

function init() {
  raf = window.requestAnimationFrame ||
        window.webkitRequestAnimationFrame ||
        window.mozRequestAnimationFrame ||
        window.oRequestAnimationFrame ||
        window.msRequestAnimationFrame;
  tick();
};

function tick() {
  update();
  raf(tick);
};
var bottomRight = document.getElementById('bottomRight');
var x = 3000000;
var y = 1000000;

function rand255() {
    return Math.floor(Math.random() * 256);
}

function update() {
  y += 1000000;
  bottomRight.style.left = x + 'px';
  bottomRight.style.top = y + 'px';
  bottomRight.style.backgroundColor = "rgb(" + rand255() + ", " + rand255() + ", " + rand255() + ")";
  scrollTo(x, y);
};

</script>
</body>
</html>
chromium/tools/perf/page_sets/tough_canvas_cases/compositing_huge_div/index.html
