mirror of
https://github.com/mozilla/gecko-dev.git
synced 2025-11-10 05:08:36 +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
127 lines
3.7 KiB
HTML
127 lines
3.7 KiB
HTML
<!DOCTYPE html>
|
|
<title>
|
|
When an element no longer captures snap positions (e.g., no longer
|
|
scrollable), then its currently captured snap areas must be reassigned.
|
|
</title>
|
|
<link rel="help" href="https://drafts.csswg.org/css-scroll-snap/#captures-snap-positions"/>
|
|
<script src="/resources/testharness.js"></script>
|
|
<script src="/resources/testharnessreport.js"></script>
|
|
<style>
|
|
div {
|
|
position: absolute;
|
|
margin: 0px;
|
|
}
|
|
|
|
html {
|
|
scroll-snap-type: y mandatory;
|
|
}
|
|
|
|
body {
|
|
margin: 0px;
|
|
}
|
|
|
|
#middle-scroller {
|
|
top: 100px;
|
|
height: 500px;
|
|
width: 500px;
|
|
overflow: scroll;
|
|
background-color: rgb(12, 61, 2);
|
|
scroll-snap-type: none;
|
|
}
|
|
|
|
#inner-scroller {
|
|
top: 200px;
|
|
height: 400px;
|
|
width: 400px;
|
|
overflow: scroll;
|
|
background-color: rgb(65, 139, 50);
|
|
scroll-snap-type: y mandatory;
|
|
}
|
|
|
|
.space {
|
|
width: 2000px;
|
|
height: 2000px;
|
|
}
|
|
|
|
#inner-snap-area {
|
|
top: 300px;
|
|
width: 200px;
|
|
height: 200px;
|
|
background-color: blue;
|
|
scroll-snap-align: start;
|
|
}
|
|
|
|
#document-snap-area {
|
|
top: 500px;
|
|
width: 200px;
|
|
height: 200px;
|
|
background-color: lightblue;
|
|
scroll-snap-align: start;
|
|
}
|
|
|
|
</style>
|
|
<div class="space"></div>
|
|
<div id="middle-scroller">
|
|
<div class="space"></div>
|
|
<div id="inner-scroller">
|
|
<div class="space"></div>
|
|
<div id="inner-snap-area"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="document-snap-area"></div>
|
|
<script>
|
|
|
|
// This tests that making a snap container no longer scrollable will reassign
|
|
// its snap areas to the next scrollable ancestor, per spec [1].
|
|
// [1] https://drafts.csswg.org/css-scroll-snap/#captures-snap-positions
|
|
test(() => {
|
|
const inner_scroller = document.getElementById("inner-scroller");
|
|
const middle_scroller = document.getElementById("middle-scroller");
|
|
const document_scroller = document.scrollingElement;
|
|
|
|
// Inner scroller should snap to its captured area.
|
|
// Middle scroller doesn't snap.
|
|
// Document scroller should snap to its only captured area.
|
|
inner_scroller.scrollBy(0,10);
|
|
middle_scroller.scrollBy(0, 10);
|
|
// Scroll to (0,600), where we would expect the inner snap area to be relative
|
|
// to the document scroller.
|
|
document_scroller.scrollTo(0, 600);
|
|
assert_equals(inner_scroller.scrollTop, 300);
|
|
assert_equals(middle_scroller.scrollTop, 10);
|
|
assert_equals(document_scroller.scrollTop, 500);
|
|
|
|
// Inner scroller is no longer a scroll container.
|
|
inner_scroller.style.setProperty("overflow", "visible");
|
|
assert_equals(inner_scroller.scrollTop, 0);
|
|
assert_equals(middle_scroller.scrollTop, 10);
|
|
assert_equals(document_scroller.scrollTop, 500);
|
|
|
|
// The new snap container is the middle scroller, which has snap-type 'none'.
|
|
// Per spec, the scroll container should capture snap positions even if it has
|
|
// snap-type 'none'.
|
|
// The middle scroller should not snap.
|
|
// The document scroller should still only snap to its captured snap area.
|
|
document_scroller.scrollBy(0, 100);
|
|
middle_scroller.scrollBy(0, 10);
|
|
assert_equals(inner_scroller.scrollTop, 0);
|
|
assert_equals(middle_scroller.scrollTop, 20);
|
|
assert_equals(document_scroller.scrollTop, 500);
|
|
|
|
// The scroll container should now be at the document level.
|
|
middle_scroller.style.setProperty("overflow", "visible");
|
|
document_scroller.scrollBy(0, -10);
|
|
assert_equals(inner_scroller.scrollTop, 0);
|
|
assert_equals(middle_scroller.scrollTop, 0);
|
|
|
|
// Check that the existing snap area did not get removed when reassigning
|
|
// the inner snap area.
|
|
assert_equals(document_scroller.scrollTop, 500);
|
|
|
|
// Check that the inner snap area got reassigned to the document.
|
|
document_scroller.scrollBy(0, 150);
|
|
assert_equals(document_scroller.scrollTop, 600);
|
|
}, 'Making a snap container not scrollable should promote the next scrollable\
|
|
ancestor to become a snap container.');
|
|
</script>
|