| <!DOCTYPE html> |
| <script src="../../resources/run-after-layout-and-paint.js"></script> |
| <script src="resources/text-based-repaint.js"></script> |
| <style> |
| [id^="target"] { |
| width: 60px; |
| height: 40px; |
| margin: 10px; |
| background: blue; |
| } |
| </style> |
| <div id="target1"></div> |
| <div id="target2" style="will-change: transform"></div> |
| <div style="will-change: transform; width: 150px; height: 150px; background: yellow"> |
| <div id="target3" style="position: relative; top: 70px; left: 30px"></div> |
| </div> |
| <div id="scroller" style="will-change: transform; width: 150px; height: 150px; overflow: scroll"> |
| <div style="width: 4000px; height: 20000px"></div> |
| <div id="target4" style="position: relative; top: -10000px; left: 30px"></div> |
| </div> |
| <script> |
| window.testIsAsync = true; |
| |
| function repaintTest() { |
| if (window.internals) |
| internals.simulateRasterUnderInvalidations(true); |
| document.querySelectorAll('[id^="target"]').forEach(function(e) { |
| e.style.background = 'green'; |
| }); |
| runAfterLayoutAndPaint(function() { |
| if (window.internals) |
| internals.simulateRasterUnderInvalidations(false); |
| finishRepaintTest(); |
| }); |
| }; |
| |
| onload = function() { |
| scroller.scrollTop = 9950; |
| scroller.scrollLeft = 50; |
| runRepaintAndPixelTest(); |
| } |
| </script> |
