css/css-scroll-snap/snap-after-relayout/resnap-on-reconstructing-frame.html

<!DOCTYPE html>
<link rel="help" href="https://drafts.csswg.org/css-scroll-snap/#re-snap" />
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1948861">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
#scroller {
  scroll-snap-type: y mandatory;
  width: 500px;
  height: 200px;
  overflow-y: scroll;
  overflow-x: hidden;
  scrollbar-width: none;
}
.child {
  scroll-snap-align: start;
  width: 500px;
  height: 100%;
}
video {
  height: 100%;
}
</style>
<div id="container">
  <div id="scroller">
    <div class="child">
      <video src="dummy.webm" controls autoplay>
    </div>
    <div class="child">
      <video src="dummy.webm" controls autoplay>
    </div>
    <div class="child">
      <video src="dummy.webm" controls autoplay>
    </div>
  </div>
</div>
<script>
promise_test(async () => {
  assert_equals(scroller.scrollTop, 0);

  const scrollendPromise = new Promise(resolve => {
    scroller.addEventListener("scrollend", resolve);
  });
  // Try to scroll downward, it will snap to the second green box.
  scroller.scrollBy({ top: 100, behavior: "smooth" });
  await scrollendPromise;

  // Change the parent position style so that the scroll container will
  // be reconstructed.
  container.style.position = "fixed";

  assert_equals(scroller.scrollTop, 200, "Should stay at the last snap point");
}, "Stay at the last snap point even after reconstrucing the scroll container");
</script>