third_party/WebKit/LayoutTests/compositing/repaint/clipped-layer-size-change.html

   1 <!DOCTYPE html>
   2
   3 <html>
   4 <head>
   5     <style>
   6         #container {
   7             width: 200px;
   8             height: 200px;
   9             overflow: hidden;
  10             border: 1px solid black;
  11         }
  12
  13         .scroll-content {
  14             height: 600px;
  15         }
  16
  17         .inner {
  18             position: relative;
  19             width: 150px;
  20             height: 150px;
  21             margin-top: -10px; /* force overlap with the composited element */
  22             margin-left: 10px;
  23             box-sizing: border-box;
  24             border: 40px solid black;
  25         }
  26
  27         .composited {
  28             height: 150px;
  29             width: 100px;
  30             transform: translateZ(0);
  31         }
  32     </style>
  33     <script>
  34         if (window.testRunner)
  35             testRunner.waitUntilDone();
  36
  37         function doTest()
  38         {
  39             window.setTimeout(function() {
  40                 var container = document.getElementById('container');
  41                 window.console.log('scrolling')
  42                 container.scrollTop = 100;
  43                 if (window.testRunner)
  44                     testRunner.notifyDone();
  45             }, 0);
  46         }
  47         window.addEventListener('load', doTest, false);
  48     </script>
  49 </head>
  50 <body>
  51
  52     <div id="container">
  53         <div class="scroll-content">
  54             <div class="composited"></div>
  55             <div class="inner"></div>
  56         </div>
  57     </div>
  58 </body>
  59 </html>