pixel_reflected_div.html | Explore in Territory

<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="initial-scale=1">
<title>A div with its reflection below which results in multiple render passes</title>
<style type="text/css">
body {
  margin: 0px auto;
}

/* Both will-change and -webkit-box-reflect are needed to ensure multiple render
   passes. */
#main {
  position: absolute;
  background-color: #FF8000;
  width: 100px;
  height: 400px;
  will-change: transform;
  -webkit-box-reflect: below 100px;
}
</style>
<script>
var frame = 0;

// It's necessary to do an animation prior to sending SUCCESS in order to
// reliably reproduce https://crbug.com/1033279.
function animate() {
  frame++;
  document.getElementById('main').style.top = '-' + frame + 'px';
  if (frame == 300) {
    domAutomationController.send("SUCCESS");
    return;
  }
  // Use setTimeout() because window.requestAnimationFrame() doesn't reliably
  // reproduce https://crbug.com/1033279.
  setTimeout(animate, 20);
}
</script>
</head>
<body onload="animate()">
<div id="main"></div>
</body>
</html>
chromium/content/test/data/gpu/pixel_reflected_div.html
