sticky-overflow-hidden.html | Explore in Territory

<!DOCTYPE html>
<style>
.scroller {
  width: 300px;
  height: 200px;
  border: 1px solid black;
}

.pad1 {
  height: 50px;
}

.container {
  width: 150px;
  height: 200px;
}

.sticky {
  position: sticky;
  left: 25px;
  top: 25px;
  width: 100px;
  height: 100px;
  background: green;
}

.pad2 {
  width: 1000px;
  height: 1000px;
}
</style>
This tests position:sticky in non-composited (left) and composited (right) overflow clip.
<div class="scroller" style="position:absolute; left:50px; top:50px; overflow:hidden;">
  <div class="pad1"></div>
  <div class="container">
    <div class="sticky"></div>
  </div>
  <div class="pad2"></div>
</div>
<div class="scroller" style="position:absolute; left:450px; top:50px; overflow:hidden; will-change:opacity;">
  <div class="pad1"></div>
  <div class="container">
    <div class="sticky"></div>
  </div>
  <div class="pad2"></div>
</div>
<script>
  for (scroller of document.getElementsByClassName("scroller")) {
    scroller.scrollLeft = 50;
    scroller.scrollTop = 50;
  }
</script>

chromium/third_party/blink/web_tests/fast/css/sticky/sticky-overflow-hidden.html