| <!DOCTYPE html> |
| <script> |
| if (window.testRunner) { |
| window.enablePixelTesting = true; |
| window.testRunner.waitUntilDone(); |
| } |
| function repaintTest() { |
| window.scrollBy(0,200); |
| document.getElementById("scrollpanel").style.position = "fixed"; |
| } |
| </script> |
| <script type="text/javascript" src="../repaint/resources/text-based-repaint.js"></script> |
| <script type="text/javascript" src="../../resources/run-after-layout-and-paint.js"></script> |
| <style> |
| .left { |
| float: left; |
| min-height: 1843px; |
| } |
| |
| .right { |
| float: right; |
| width: 100px; |
| } |
| |
| .container { |
| position: relative; |
| overflow: hidden; |
| } |
| |
| #ul { |
| position: relative; |
| } |
| |
| #scrollpanel { |
| position: inherit; |
| } |
| </style> |
| <body onload="runAfterLayoutAndPaint(runRepaintTest);"> |
| <p> When you scroll down the red square should have no painting glitches. </p> |
| <div class="left"></div> |
| <div class="right"> |
| <div id="scrollpanel"> |
| <div class="container"> |
| <div id="ul"> |
| <div style="background-color: red; width: 100px; height:100px;"></div> |
| </div> |
| </div> |
| |
| </div> |
| </div> |
| </body> |
