third_party/WebKit/LayoutTests/paint/invalidation/spv2/updating-scrolling-content.html

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