<!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 src="../resources/text-based-repaint.js"></script>
  <script type="text/javascript">
      if (window.internals)
          internals.settings.setPreferCompositingToLCDTextEnabled(true);

      window.addEventListener('load', function() {
          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;

          runRepaintAndPixelTest();
      });

      function repaintTest() {
          var scroller = document.getElementById('scroller');
          var indicator = document.getElementById('indicator');

          indicator.style.background = 'green';

          // Scroll back up so that the updated (green) indicator is visible.
          scroller.scrollTop = 0;
      }
  </script>
</head>
<body>
  <div id="scroller">
    <div id="indicator"></div>
    <div id="content"></div>
  </div>
</body>
</html>