mirror of
https://github.com/mozilla/gecko-dev.git
synced 2025-11-10 13:18:45 +02:00
36953e3765
Automatic update from web-platform-tests [css-scroll-snap] Resnap containers after layout changes Per spec [1], snap containers should attempt to snap after layout changes and initial layout. If the previously snapped element still exists after the layout change, then the container must snap to it. This patch only considers snap targets set on the main thread since snap targets set on the impl thread are currently not synced back to main; this behaviour will be implemented in a follow-up. Design doc: https://docs.google.com/document/d/1Ufy55a19-iquba-LBiAE6AS2yBzfBQ5ZHFSpZGabS4c/edit?usp=sharing [1] https://drafts.csswg.org/css-scroll-snap/#re-snap Bug: 866127 Change-Id: I1442e0f464408fb5d9c49c5748a45aec0ed4d166 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1912906 Commit-Queue: Kaan Alsan <alsan@google.com> Reviewed-by: Majid Valipour <majidvp@chromium.org> Reviewed-by: David Bokan <bokan@chromium.org> Reviewed-by: Yi Gu <yigu@chromium.org> Cr-Commit-Position: refs/heads/master@{#720007} -- wpt-commits: c4182149f03eb30058efcd0e46c6e41b526f1cb1 wpt-pr: 20241
90 lines
2.2 KiB
HTML
90 lines
2.2 KiB
HTML
<!DOCTYPE html>
|
|
<link rel="help" href="https://drafts.csswg.org/css-scroll-snap/#scroll-snap-stop" />
|
|
|
|
<script src="/resources/testharness.js"></script>
|
|
<script src="/resources/testharnessreport.js"></script>
|
|
<style>
|
|
div, html, body {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
html {
|
|
scroll-snap-type: x mandatory;
|
|
overflow: scroll;
|
|
}
|
|
|
|
#scroller {
|
|
scroll-snap-type: x mandatory;
|
|
overflow: scroll;
|
|
height: 400px;
|
|
width: 400px;
|
|
}
|
|
|
|
.large_space {
|
|
width: 2000px;
|
|
height: 2000px;
|
|
}
|
|
|
|
.snap_area {
|
|
scroll-snap-align: none start;
|
|
width: 100px;
|
|
height: 100px;
|
|
|
|
background-color: blue;
|
|
}
|
|
|
|
.snap_area:nth-child(1) {
|
|
margin-left: 0;
|
|
}
|
|
|
|
.snap_area:nth-child(2) {
|
|
margin-left: 100px;
|
|
}
|
|
|
|
.snap_area:nth-child(3) {
|
|
margin-left: 300px;
|
|
}
|
|
|
|
.snap_area:nth-child(4) {
|
|
margin-left: 500px;
|
|
}
|
|
</style>
|
|
|
|
<!-- Add snap area to the root scroller -->
|
|
<div class="snap_area"></div>
|
|
<div class="snap_area"></div>
|
|
<div class="snap_area"></div>
|
|
<div class="snap_area"></div>
|
|
|
|
<div id="scroller">
|
|
<div class="snap_area"></div>
|
|
<div class="snap_area"></div>
|
|
<div class="snap_area"></div>
|
|
<div class="snap_area"></div>
|
|
<div class="large_space"></div>
|
|
</div>
|
|
|
|
<div class="large_space"></div>
|
|
|
|
<script>
|
|
const scrollers = [document.scrollingElement, document.getElementById("scroller")];
|
|
for (const scroller of scrollers) {
|
|
test(_ => {
|
|
assert_equals(scroller.scrollLeft, 0); // sanity check
|
|
|
|
scroller.querySelectorAll('.snap_area').forEach(area => area.style.scrollSnapStop = 'always');
|
|
scroller.scrollBy(500, 0);
|
|
assert_equals(scroller.scrollLeft, 100, "scrollBy should not skip area with stop always");
|
|
|
|
scroller.querySelectorAll('.snap_area').forEach(area => area.style.scrollSnapStop = 'normal');
|
|
scroller.scrollBy(500, 0);
|
|
assert_equals(scroller.scrollLeft, 500, "scrollBy should skip secon area with stop normal");
|
|
|
|
// When snap type is changed back to mandatory, scrolling should snap.
|
|
scroller.querySelectorAll('.snap_area').forEach(area => area.style.scrollSnapStop = 'always');
|
|
scroller.scrollBy(-500, 0);
|
|
assert_equals(scroller.scrollLeft, 300, "scrollBy should not skip area with stop always");
|
|
}, `scroll-snap-stop for areas on ${scroller.nodeName} should control snapping behavior and changing it takes effect`);
|
|
}
|
|
</script>
|