| <!DOCTYPE html> |
| <style> |
| #mask { |
| width: 800px; |
| height: 800px; |
| overflow: hidden; |
| border-radius: 90px; |
| will-change: transform; |
| border: 4px solid red; |
| background-color: grey; |
| } |
| |
| .clipped { |
| width: 100px; |
| height: 100px; |
| will-change: transform; |
| position: absolute; |
| } |
| |
| .small { |
| width: 50px; |
| height: 50px; |
| will-change: transform; |
| position: absolute; |
| } |
| |
| #spacer { |
| width: 2000px; |
| height: 2000px; |
| position: absolute; |
| will-change: transform; |
| background: papayawhip; |
| } |
| </style> |
| <script src="../../resources/run-after-layout-and-paint.js"></script> |
| <script> |
| runAfterLayoutAndPaint(function() { |
| window.scrollTo(300, 300); |
| }, true); |
| </script> |
| <div id="mask"> |
| <div id="spacer">There's stuff in here</div> |
| <div class="small" style="left:0px; top:0px; background: maroon"></div> |
| <div class="clipped" style="left: 0px; top: 700px; background: orange"></div> |
| <div class="clipped" style="left: -60px; top: 70px; background: green"></div> |
| <div class="clipped" style="left: 120px; top: 700px; background: blue"></div> |
| <div class="clipped" style="left: 750px; top: 0px; background: yellow"></div> |
| <div class="clipped" style="left: 80px; top: 300px; background: grey"></div> |
| <div class="clipped" style="left: 20px; top: 400px; background: red"></div> |
| <div class="small" style="left: 750px; top: 750px; background: purple"></div> |
| </div> |
