<!DOCTYPE html>

<!--
This test checks that the contents of accelerated scrolling layers are properly
updated also outside the current overflow clip. See
https://bugs.webkit.org/show_bug.cgi?id=100524.
-->

<html>
<head>
  <style type="text/css">
    #scroller {
        overflow: scroll;
        -webkit-overflow-scrolling: touch;
        width: 200px;
        height: 200px;
    }

    #indicator {
        background: red;
        height: 200px;
    }

    #content {
        height: 1000px;
    }
  </style>
  <script type="text/javascript">
      if (window.internals)
          window.internals.settings.setAcceleratedCompositingForOverflowScrollEnabled(true);

      window.addEventListener('load', function() {
          if (!window.testRunner || !window.internals) {
              alert('This test requires testRunner to run!');
              return;
          }
          testRunner.dumpAsText(false);

          var scroller = document.getElementById('scroller');
          var indicator = document.getElementById('indicator');

          // Make sure the scrolling content is painted before we start.
          scroller.offsetTop;

          // Scroll all the way to the bottom and change the color of the
          // indicator (which is now outside the overflow clip).
          scroller.scrollTop = 1000;
          window.internals.startTrackingRepaints();
          indicator.style.background = 'green';

          // Scroll back up so that the updated (green) indicator is visible.
          var layerTree = document.getElementById('layerTree');
          scroller.scrollTop = 0;
          layerTree.innerText =
              window.internals.layerTreeAsText(document, internals.LAYER_TREE_INCLUDES_REPAINT_RECTS);
          window.internals.stopTrackingRepaints();
      });
  </script>
</head>
<body>
  <div id="scroller">
    <div id="indicator"></div>
    <div id="content"></div>
  </div>
  <pre id="layerTree">This text will be replaced with the layer tree.</pre>
</body>
</html>