src/third_party/WebKit/LayoutTests/compositing/repaint/newly-composited-repaint-rect.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4   <!-- This test case reproduces a bug that is hopefully solved by https://bugs.webkit.org/show_bug.cgi?id=80641
   5
   6        In the bug, a div element begins as non-composited, and the repaintRect had a
   7        correct non-zero offset because it paints into an ancestor container. Later, the
   8        layer becomes composited (in this case, because the layer is moved to overlap
   9        another composited layer). Because the layer is now composited, the repaintRect
  10        should have been recomputed - in particular, the offset of the repaintRect should
  11        become zero because it is now its own repaint container.
  12
  13        Therefore, after the layer became composited, it was using the wrong repaint rect,
  14        which caused things not to repaint properly.
  15     -->
  16
  17   <style type="text/css">
  18       .composited {
  19           transform: translatez(0);
  20           border: 2px solid black;
  21       }
  22
  23       .box {
  24           width: 200px;
  25           height: 200px;
  26       }
  27
  28       #scrolldiv {
  29           position: absolute;
  30           width: 100px;
  31           height: 100px;
  32           left: 250px;
  33           top: 50px;
  34           overflow-x: hidden;
  35           overflow-y: scroll;
  36       }
  37
  38       .shouldNotBeSeen {
  39           background-color: red;
  40       }
  41
  42       .shouldBeSeen {
  43           background-color: green;
  44       }
  45   </style>
  46
  47 </head>
  48
  49 <script src="../../resources/run-after-display.js"></script>
  50
  51 <script>
  52     if (window.testRunner) {
  53         testRunner.dumpAsTextWithPixelResults();
  54         testRunner.waitUntilDone();
  55     }
  56
  57     function changeDivPosition() {
  58         document.getElementById("scrolldiv").style.left="50px";
  59     }
  60
  61     function repaintTest() {
  62         runAfterDisplay(function() {
  63           // Changing the position will cause the scrolldiv to become composited becuase it overlaps another compostied element.
  64           changeDivPosition();
  65
  66           // Force DumpRenderTree to do a layout and repaint here, this is where the repaintRect
  67           // goes wrong because it does not get updated for a newly composited element.
  68           runAfterDisplay(function() {
  69               // Scrolling a little will demonstrate whether the repaint rect is correct or not.
  70               document.getElementById('scrolldiv').scrollTop = 500;
  71               testRunner.notifyDone();
  72           });
  73         });
  74     }
  75
  76 </script>
  77
  78 <body onload="repaintTest()">
  79   <div class="composited box"></div>
  80   <div id="scrolldiv">
  81     <div class="shouldNotBeSeen box"></div>
  82     <div class="shouldBeSeen box"></div>
  83   </div>
  84 </body>
  85
  86 </html>