| <!DOCTYPE html> |
| <style> |
| .container { |
| position: absolute; |
| top: 25px; |
| width: 100px; |
| height: 100px; |
| border: 1px dashed black; |
| overflow: hidden; |
| } |
| |
| .scroller { |
| transform-origin: 0 0; |
| width: 100px; |
| height: 100px; |
| overflow: scroll; |
| } |
| |
| .bloat { |
| width: 150px; |
| height: 150px; |
| background: green; |
| } |
| </style> |
| <div class="container" style="left:25px;"> |
| <div class="scroller" style="transform:translate3d(0, 1px, 0)scale(1.5);"> |
| <div class="bloat"></div> |
| </div> |
| </div> |
| <div class="container" style="left:175px;"> |
| <div class="scroller" style="transform:translate3d(0, 1.25px, 0)scale(1.5);"> |
| <div class="bloat"></div> |
| </div> |
| </div> |
| <div class="container" style="left:325px;"> |
| <div class="scroller" style="transform:translate3d(0, 1.5px, 0)scale(1.5);"> |
| <div class="bloat"></div> |
| </div> |
| </div> |
| <div class="container" style="left:475px;"> |
| <div class="scroller" style="transform:translate3d(0, 1.75px, 0)scale(1.5);"> |
| <div class="bloat"></div> |
| </div> |
| </div> |
| This test verifies composited scrollers have consistent clip rect regardless of current scroll offset. |
| <script> |
| for (elem of document.getElementsByClassName("scroller")) |
| elem.scrollTop = 2; |
| </script> |
