tiled-mask.html | Explore in Territory

<!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>
chromium/third_party/blink/web_tests/compositing/overflow/tiled-mask.html
