third_party/WebKit/LayoutTests/fast/repaint/repaint-composited-child-in-scrolled-container.html

   1 <!DOCTYPE html>
   2 <script src="resources/text-based-repaint.js" type="text/javascript"></script>
   3 <style>
   4 #outer {
   5     overflow: scroll;
   6     width: 300px;
   7     height: 300px;
   8     background-color: blue;
   9     position: absolute;
  10 }
  11 #container {
  12     position: absolute;
  13     top: 0px;
  14     left: 50px;
  15     width: 600px;
  16     height: 600px;
  17     background-color: red;
  18     transform: translateZ(0);
  19 }
  20 </style>
  21 <body onload="runRepaintTest()">
  22 <div id="outer">
  23     <div id="container"><div id="inner"></div></div>
  24 </div>
  25
  26 <script>
  27 function repaintTest() {
  28     // This test ensures we properly paint composited descendants of clipped
  29     // ancestors in the invalidateTree step. Composited children can be moved
  30     // around in respect to their clipping ancestors without needing to be
  31     // repainted (and will have their clip applied directly by the CC), so
  32     // Blink needs to ignore their ancestor's clip rects to properly paint.
  33     // We can't just change the background color, because that gets repainted
  34     // in style recalc and doesn't tickle the bug.
  35     document.querySelector('#inner').style.border = '300px solid green';
  36     document.querySelector('#outer').scrollLeft = 500;
  37 }
  38 </script>