Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /css/css-scroll-snap/snap-after-relayout/two-consecutive-resnaps.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<meta name="viewport" content="width=device-width,initial-scale=1">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
#scroller {
scroll-snap-type: both mandatory;
overflow: scroll;
width: 200px;
height: 200px;
position: relative;
}
.child {
scroll-snap-align: start;
width: 100%;
height: 40px;
position: absolute;
}
#spacer {
width: 1000px;
height: 1000px;
}
</style>
<div id="scroller">
<div class="child" style="top: 0px; background-color: blue;">1</div>
<div class="child" style="top: 40px; background-color: green;">2</div>
<div class="child" style="top: 80px; background-color: yellow;">3</div>
<div class="child" style="top: 120px; background-color: blue;">4</div>
<div class="child" style="top: 160px; background-color: green;">5</div>
<div class="child" style="top: 200px; background-color: yellow;">6</div>
<div class="child" style="top: 240px; background-color: blue;">7</div>
<div class="child" style="top: 280px; background-color: green;">8</div>
<div class="child" style="top: 320px; background-color: yellow;">9</div>
<div id="spacer"></div>
</div>
<script>
promise_test(async () => {
assert_equals(scroller.scrollTop, 0);
const scrollendPromise = new Promise(resolve => {
scroller.addEventListener("scrollend", resolve);
});
// Scroll to the 3rd child.
scroller.children[2].scrollIntoView({ behavior: "instant" });
await scrollendPromise;
assert_greater_than(scroller.scrollTop, 0,
"The scroll position should have changed");
const previousPosition = scroller.scrollTop;
// Change the scroll container width once and do
// getComputedStyle() to trigger a re-snapping.
scroller.style.width = "201px";
getComputedStyle(scroller).width;
// Then do it again.
scroller.style.width = "200px";
getComputedStyle(scroller).width;
// Give a chance to scroll if it happens.
await new Promise(resolve => {
requestAnimationFrame(() => requestAnimationFrame(resolve));
});
assert_equals(scroller.scrollTop, previousPosition,
"Should stay at the last snap point");
}, "Keep the same snap position while two consecutive re-snappings");
</script>