third_party/WebKit/LayoutTests/compositing/overflow/updating-scrolling-content.html

   1 <!DOCTYPE html>
   2
   3 <!--
   4 This test checks that the contents of accelerated scrolling layers are properly
   5 updated also outside the current overflow clip. See
   6 https://bugs.webkit.org/show_bug.cgi?id=100524.
   7 -->
   8
   9 <html>
  10 <head>
  11   <style type="text/css">
  12     #scroller {
  13         overflow: scroll;
  14         -webkit-overflow-scrolling: touch;
  15         width: 200px;
  16         height: 200px;
  17     }
  18
  19     #indicator {
  20         background: red;
  21         height: 200px;
  22     }
  23
  24     #content {
  25         height: 1000px;
  26     }
  27   </style>
  28   <script src="../../fast/repaint/resources/text-based-repaint.js"></script>
  29   <script type="text/javascript">
  30       if (window.internals)
  31           window.internals.settings.setPreferCompositingToLCDTextEnabled(true);
  32
  33       window.addEventListener('load', function() {
  34           var scroller = document.getElementById('scroller');
  35           var indicator = document.getElementById('indicator');
  36
  37           // Make sure the scrolling content is painted before we start.
  38           scroller.offsetTop;
  39
  40           // Scroll all the way to the bottom and change the color of the
  41           // indicator (which is now outside the overflow clip).
  42           scroller.scrollTop = 1000;
  43
  44           runRepaintTest();
  45       });
  46
  47       function repaintTest() {
  48           var scroller = document.getElementById('scroller');
  49           var indicator = document.getElementById('indicator');
  50
  51           indicator.style.background = 'green';
  52
  53           // Scroll back up so that the updated (green) indicator is visible.
  54           scroller.scrollTop = 0;
  55       }
  56   </script>
  57 </head>
  58 <body>
  59   <div id="scroller">
  60     <div id="indicator"></div>
  61     <div id="content"></div>
  62   </div>
  63 </body>
  64 </html>