Do not clobber restoring the scroll position on re-snap.

hiikezoe · moz-wptsync-bot · commit e435fc2dc3ad · 2025-02-28T00:42:09.000Z
Differential Revision: https://phabricator.services.mozilla.com/D239677 bugzilla-url: https://bugzilla.mozilla.org/show_bug.cgi?id=1950560 gecko-commit: 6f402158997013a24abbdff497db52c4e82630dd gecko-reviewers: botond
diff --git a/css/css-scroll-snap/snap-after-relayout/resnap-on-reconstructing-frame.html b/css/css-scroll-snap/snap-after-relayout/resnap-on-reconstructing-frame.html
@@ -0,0 +1,54 @@
+<!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>
