| <!DOCTYPE html> |
| <html> |
| <head> |
| <!-- This test case reproduces a bug that is hopefully solved by https://bugs.webkit.org/show_bug.cgi?id=80641 |
| |
| In the bug, a div element begins as non-composited, and the repaintRect had a |
| correct non-zero offset because it paints into an ancestor container. Later, the |
| layer becomes composited (in this case, because the layer is moved to overlap |
| another composited layer). Because the layer is now composited, the repaintRect |
| should have been recomputed - in particular, the offset of the repaintRect should |
| become zero because it is now its own repaint container. |
| |
| Therefore, after the layer became composited, it was using the wrong repaint rect, |
| which caused things not to repaint properly. |
| --> |
| |
| <style type="text/css"> |
| .composited { |
| will-change: transform; |
| border: 2px solid black; |
| } |
| |
| .box { |
| width: 200px; |
| height: 200px; |
| } |
| |
| #scrolldiv { |
| position: absolute; |
| width: 100px; |
| height: 100px; |
| left: 250px; |
| top: 50px; |
| overflow-x: hidden; |
| overflow-y: scroll; |
| } |
| |
| .shouldNotBeSeen { |
| background-color: red; |
| } |
| |
| .shouldBeSeen { |
| background-color: green; |
| } |
| </style> |
| |
| </head> |
| |
| <script src="../../../resources/run-after-layout-and-paint.js"></script> |
| |
| <script> |
| if (window.testRunner) |
| testRunner.waitUntilDone(); |
| |
| function changeDivPosition() { |
| document.getElementById("scrolldiv").style.left="50px"; |
| } |
| |
| function repaintTest() { |
| runAfterLayoutAndPaint(function() { |
| // Changing the position will cause the scrolldiv to become composited because it overlaps another compostied element. |
| changeDivPosition(); |
| |
| // Force DumpRenderTree to do a layout and repaint here, this is where the repaintRect |
| // goes wrong because it does not get updated for a newly composited element. |
| runAfterLayoutAndPaint(function() { |
| // Scrolling a little will demonstrate whether the repaint rect is correct or not. |
| document.getElementById('scrolldiv').scrollTop = 500; |
| testRunner.notifyDone(); |
| }); |
| }); |
| } |
| |
| </script> |
| |
| <body onload="repaintTest()"> |
| <div class="composited box"></div> |
| <div id="scrolldiv"> |
| <div class="shouldNotBeSeen box"></div> |
| <div class="shouldBeSeen box"></div> |
| </div> |
| </body> |
| |
| </html> |
