mirror of
https://github.com/mozilla/gecko-dev.git
synced 2025-11-11 05:39:41 +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
153 lines
4.3 KiB
HTML
153 lines
4.3 KiB
HTML
<!DOCTYPE html>
|
|
<title>
|
|
Adding a scrollable element should make it start capturing snap points.
|
|
</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: visible;
|
|
background-color: rgb(12, 61, 2);
|
|
scroll-snap-type: none;
|
|
}
|
|
|
|
#inner-scroller {
|
|
top: 200px;
|
|
height: 400px;
|
|
width: 400px;
|
|
overflow: visible;
|
|
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;
|
|
}
|
|
|
|
#inserted-snap-container {
|
|
top: 400px;
|
|
height: 600px;
|
|
width: 400px;
|
|
overflow: scroll;
|
|
scroll-snap-type: y mandatory;
|
|
}
|
|
</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>
|
|
|
|
const inner_scroller = document.getElementById("inner-scroller");
|
|
const middle_scroller = document.getElementById("middle-scroller");
|
|
const document_scroller = document.scrollingElement;
|
|
|
|
// This tests that making an element scrollable will reassign the correct snap
|
|
// areas to itself, per spec [1].
|
|
// [1] https://drafts.csswg.org/css-scroll-snap/#captures-snap-positions
|
|
test(() => {
|
|
// Confirm that the document-level scroller is the snap container for all of
|
|
// the snap areas.
|
|
document_scroller.scrollTo(0, 10);
|
|
assert_equals(document_scroller.scrollTop, 500);
|
|
// Snaps to the inner snap area.
|
|
document_scroller.scrollBy(0, 75);
|
|
assert_equals(document_scroller.scrollTop, 600);
|
|
|
|
// The middle scroller should now have the inner snap area assigned to it.
|
|
// Per spec, even if the snap-type is 'none', it should still capture snap
|
|
// points.
|
|
middle_scroller.style.setProperty("overflow", "scroll");
|
|
|
|
// The middle scroller has snap-type 'none' so it should not snap.
|
|
middle_scroller.scrollBy(0, 10);
|
|
assert_equals(middle_scroller.scrollTop, 10);
|
|
|
|
// The document scroller should only snap to the document-level snap area.
|
|
document_scroller.scrollTo(0, 600);
|
|
assert_equals(document_scroller.scrollTop, 500);
|
|
|
|
// The inner scroller should now have the innermost snap area assigned to it.
|
|
inner_scroller.style.setProperty("overflow", "scroll");
|
|
inner_scroller.scrollBy(0, 10);
|
|
assert_equals(inner_scroller.scrollTop, 300);
|
|
|
|
document_scroller.scrollTo(0, 600);
|
|
assert_equals(document_scroller.scrollTop, 500);
|
|
|
|
}, "Making an element scrollable should make it capture the correct descendant\
|
|
snap areas' snap points.");
|
|
|
|
// Test that attaching a new snap container also properly assigns snap areas.
|
|
test(() => {
|
|
// All containers should capture snap areas.
|
|
middle_scroller.style.setProperty("overflow", "scroll");
|
|
inner_scroller.style.setProperty("overflow", "scroll");
|
|
|
|
// Sanity check that the scrollers still snap to the snap areas.
|
|
document_scroller.scrollTo(0, 10);
|
|
inner_scroller.scrollTo(0,10);
|
|
assert_equals(inner_scroller.scrollTop, 300);
|
|
assert_equals(document_scroller.scrollTop, 500);
|
|
|
|
// Create new snap container and append thedocument-level snap area as its
|
|
// child.
|
|
const inserted_scroller = document.createElement("div");
|
|
inserted_scroller.id = "inserted-snap-container";
|
|
const space = document.createElement("div");
|
|
space.classList.add("space");
|
|
inserted_scroller.appendChild(space);
|
|
inserted_scroller.appendChild(document.getElementById("document-snap-area"));
|
|
document_scroller.appendChild(inserted_scroller);
|
|
|
|
// Document scroller no longer snaps.
|
|
document_scroller.scrollTo(0, 400);
|
|
assert_equals(document_scroller.scrollTop, 400);
|
|
|
|
// Inserted scroller snaps.
|
|
inserted_scroller.scrollTo(0, 10);
|
|
assert_equals(inserted_scroller.scrollTop, 500);
|
|
}, "Attaching a new element that is scrollable should assign the correct snap\
|
|
areas to it.");
|
|
</script>
|