src/third_party/WebKit/LayoutTests/fast/layers/scroll-with-transform-composited-layer.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <style>
   5     p { height: 100px; width: 100px; margin: 0px; }
   6     p.red { background-color: red; }
   7     p.green { background-color: green; }
   8     div { height: 100px; width: 100px; }
   9     div.relative { position: relative }
  10     div.composited
  11     {
  12         transform: translateZ(0);
  13     }
  14     div.translated
  15     {
  16         transform: translate(0);
  17     }
  18 </style>
  19 <script>
  20     if (window.testRunner)
  21         testRunner.dumpAsTextWithPixelResults();
  22 </script>
  23 </head>
  24 <body>
  25     <!-- This test should be a ref-test but small scrollbars difference between platforms makes it fail. -->
  26     <span>http://webkit.org/b/67100: REGRESSION (r93614): Safari Reader doesn't repaint correctly when scrolling</span><br/>
  27     <span>All the boxes should only contain green content.</span>
  28     <!-- Use a translation. -->
  29     <div class="scrollMe composited" style="overflow: hidden;">
  30         <div class="relative">
  31             <p class="red"></p>
  32             <p class="green"></p>
  33             <p class="red"></p>
  34         </div>
  35     </div>
  36     <br>
  37     <div class="scrollMe composited" style="overflow: scroll;">
  38         <div class="relative">
  39             <p class="red"></p>
  40             <p class="green"></p>
  41             <p class="red"></p>
  42         </div>
  43     </div>
  44     <br>
  45     <!-- Nest composited and non-composited. -->
  46     <div class="scrollMe composited" style="overflow: hidden;">
  47         <div class="relative translated">
  48             <p class="red"></p>
  49             <p class="green"></p>
  50             <p class="red"></p>
  51         </div>
  52     </div>
  53     <br>
  54     <div class="scrollMe translated" style="overflow: scroll;">
  55         <div class="relative composited">
  56             <p class="red"></p>
  57             <p class="green"></p>
  58             <p class="red"></p>
  59         </div>
  60     </div>
  61     <br>
  62     <script>
  63         var scrollMes = document.getElementsByClassName("scrollMe");
  64         for (var i = 0; i < scrollMes.length; ++i)
  65             scrollMes[i].scrollTop = 100;
  66     </script>
  67 </body>
  68 </html>