mirror of
https://github.com/servo/servo.git
synced 2025-06-25 17:44:33 +01:00
154 lines
4.4 KiB
HTML
154 lines
4.4 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"/>
|
|
<meta name="viewport" content="user-scalable=no">
|
|
<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>
|