123456789101112131415161718192021222324252627282930313233343536373839404142 |
- <!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>
|