| <!DOCTYPE html> |
| <style> |
| #searchbar { |
| bottom: 0; /* Useful for seeing the issue visually. */ |
| position: fixed; |
| } |
| #recentlink { |
| background: purple; |
| width: 150px; |
| height: 150px; |
| } |
| header { |
| padding: 10px; |
| position: relative; |
| z-index: 50; |
| -webkit-backface-visibility: hidden; |
| } |
| </style> |
| To manually test, just scroll down, there should be no purple trace. |
| <header> |
| <div id="searchbar"> |
| <div id="recentlink"></div> |
| </div> |
| </header> |
| |
| <!-- Used to have some overflowing content to scroll --> |
| <div style="height: 5000px"></div> |
| |
| <script src="resources/text-based-repaint.js" type="text/javascript"></script> |
| <script> |
| window.scrollTo(0, 1000); |
| |
| window.testIsAsync = true; |
| if (window.testRunner) |
| testRunner.waitUntilDone(); |
| |
| function repaintTest() |
| { |
| window.scrollBy(0, 400); |
| finishRepaintTest(); |
| } |
| |
| // We need to skip 2 frames for the bug to show under DRT. |
| window.requestAnimationFrame(function() { |
| window.requestAnimationFrame(function() { |
| runRepaintTest(); |
| }); |
| }); |
| </script> |
| |
