third_party/WebKit/LayoutTests/compositing/repaint/requires-backing-repaint.html

   1 <!DOCTYPE html>
   2
   3 <html>
   4 <head>
   5     <script src="../../resources/run-after-layout-and-paint.js"></script>
   6     <style>
   7         .bar {
   8             width: 200px;
   9             height: 50px;
  10             margin-left: 50px;
  11             background-color: gray;
  12             transform: translateZ(0);
  13         }
  14
  15         #overflow {
  16             position: absolute;
  17             top: 70px;
  18             left: 100px;
  19             z-index: 100;
  20             height: 200px;
  21             width: 200px;
  22             border: 1px solid black;
  23             overflow: scroll;
  24         }
  25
  26         #overflow > div {
  27             position: relative;
  28             height: 50px;
  29             width: 100%;
  30             border: 2px solid black;
  31             margin: 2px;
  32         }
  33
  34     </style>
  35     <script>
  36         if (window.testRunner) {
  37             testRunner.dumpAsTextWithPixelResults();
  38             testRunner.waitUntilDone();
  39         }
  40
  41         function doTest()
  42         {
  43             var overflow = document.getElementById('overflow');
  44             overflow.scrollTop = 50;
  45
  46             runAfterLayoutAndPaint(function() {
  47                 overflow.scrollTop = 75;
  48                 if (window.testRunner)
  49                     testRunner.notifyDone();
  50             });
  51         }
  52         window.addEventListener('load', doTest, false);
  53     </script>
  54 </head>
  55 <body>
  56
  57     <div class="bar"></div>
  58
  59     <div id="overflow">
  60         <div></div>
  61         <div></div>
  62         <div></div>
  63         <div></div>
  64         <div></div>
  65     </div>
  66 </body>
  67 </html>