| <!DOCTYPE html> |
| <style> |
| ::-webkit-scrollbar { display: none } |
| </style> |
| <div style="height: 2000px"></div> |
| <div id="container" |
| style="position: absolute; will-change: transform; |
| top: 50px; left: 40px; |
| width: 100px; height: 100px; background-color: rgba(0, 0, 255, 0.5)"> |
| <div id="child1" |
| style="position: relative; top: 20px; left: 20px; |
| width: 10px; height: 10px; background-color: red"> |
| <div id="scrollable" |
| style="overflow: scroll; will-change: transform; |
| position: relative; top: 33px; left: 44px; |
| width: 300px; height: 300px; border: 1px solid black"> |
| <div id="transform" |
| style="position: relative; will-change: transform; |
| top: 77px; left: 88px; |
| transform: scale(5) rotate(45deg); transform-origin: 0 0; |
| width: 200px; height: 200px; background: yellow"> |
| <div id="child2" |
| style="position: relative; top: 20px; left: 20px; |
| width: 10px; height: 10px; background-color: red"> |
| </div> |
| </div> |
| </div> |
| </div> |
| <script src="../resources/text-based-repaint.js"></script> |
| <script> |
| onload = function() { |
| window.scrollTo(0, 20); |
| scrollable.scrollTop = 30; |
| runRepaintTest(); |
| }; |
| function repaintTest() { |
| child1.style.backgroundColor = 'green'; |
| child2.style.backgroundColor = 'green'; |
| } |
| </script> |
