<!DOCTYPE html>
<!--
 | This test checks that callbacks specified via "requestAnimationFrame()" are
 | called before a layout is applied.
 | This test will setup a single animation frame that appends an extra square,
 | blue div to the body of the document when executed.
 |   https://www.w3.org/TR/animation-timing/#processingmodel
 -->
<html>
<head>
  <style>
    .initial-block {
      width: 50px;
      height: 50px;
      background-color: rgb(150, 255, 150);
    }
    .new-block {
      width: 50px;
      height: 50px;
      background-color: rgb(150, 150, 255);
    }
  </style>
  <script>
    window.requestAnimationFrame(function(timestamp) {
      var new_block = document.createElement('div');
      new_block.className = 'new-block';
      document.getElementsByTagName('body')[0].appendChild(new_block);
    });
  </script>
</head>
<body>
  <div class="initial-block"></div>
</body>
</html>