<!DOCTYPE html>

<!--
This test checks that repaint testing works with composited layers.
-->

<html>
<head>
  <style type="text/css">
    #parent {
        -webkit-transform: translateZ(0px);
        width: 400px;
        height: 400px;
        background: blue;
    }

    #child {
        -webkit-transform: translateZ(0px);
        position: relative;
        left: 50px;
        top: 50px;
        width: 75px;
        height: 75px;
        background: green;
    }

  </style>
  <script type="text/javascript">
      window.addEventListener('load', function() {
          if (!window.testRunner) {
              alert('This test requires testRunner to run!');
              return;
          }

          if (!window.internals) {
              alert('This test requires window.interals to run!');
              return;
          }

          testRunner.dumpAsText(false);

          var parent = document.getElementById('parent');
          var child = document.getElementById('child');

          // Ensure that we've recalculated style before starting repaint
          // tracking (we don't want our lists of invalidated rects to be
          // polluted).
          document.body.offsetTop;
          window.internals.startTrackingRepaints();

          child.style.background = 'blue';
          parent.style.background = 'green';

          var text = document.getElementById('text');
          text.innerHTML = 'This text will be replaced with the layer tree';

          // Force a style recalc.
          document.body.offsetTop;

          var layerTreeText = window.internals.layerTreeAsText(document, internals.LAYER_TREE_INCLUDES_REPAINT_RECTS);

          window.internals.stopTrackingRepaints();

          text.innerHTML = layerTreeText;
      });
  </script>
</head>
<body>
  <pre id="text"></pre>
  <div id="parent">
    <div id="child"></div>
  </div>
</body>
</html>