mirror of
https://github.com/servo/servo.git
synced 2025-06-27 02:23:41 +01:00
238 lines
8.5 KiB
HTML
238 lines
8.5 KiB
HTML
<!DOCTYPE html>
|
|
<link rel="help" href="https://drafts.csswg.org/css-scroll-snap/#scroll-snap-stop" />
|
|
<link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1/#snap-overflow" />
|
|
<script src="/resources/testharness.js"></script>
|
|
<script src="/resources/testharnessreport.js"></script>
|
|
<style>
|
|
div {
|
|
position: absolute;
|
|
}
|
|
.scroller {
|
|
width: 400px;
|
|
height: 100px;
|
|
overflow: scroll;
|
|
scroll-snap-type: x mandatory;
|
|
}
|
|
#space {
|
|
left: 0px;
|
|
top: 0px;
|
|
width: 2100px;
|
|
height: 50px;
|
|
}
|
|
.target {
|
|
width: 50px;
|
|
height: 50px;
|
|
scroll-snap-align: start;
|
|
top: 0px;
|
|
}
|
|
</style>
|
|
|
|
<!--
|
|
start dest closest always
|
|
|------------------------------|--------|--------|
|
|
-->
|
|
<div class="scroller" id="scroller1">
|
|
<div id="space"></div>
|
|
<div class="target" style="left: 0px;"></div>
|
|
<!-- Add `scroll-snap-stop: always` element into the DOM tree prior to the
|
|
closest snap point -->
|
|
<div class="target" style="left: 120px; scroll-snap-stop: always;"></div>
|
|
<!-- Add a snap point closest-to-destination but further than the destination
|
|
from the start position -->
|
|
<div class="target" style="left: 110px;"></div>
|
|
</div>
|
|
|
|
<!--
|
|
start closest dest always
|
|
|------------------------------|------|--------|
|
|
-->
|
|
<div class="scroller" id="scroller2">
|
|
<div id="space"></div>
|
|
<div class="target" style="left: 0px;"></div>
|
|
<div class="target" style="left: 120px; scroll-snap-stop: always;"></div>
|
|
<!-- Add a snap point closest-to-destination and closer than the destination
|
|
from the start position -->
|
|
<div class="target" style="left: 95px;"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!--
|
|
A test case where there's a snap point whose snap area covers the snapport and
|
|
there's a `scroll-snap-stop: always` snap point on the opposite side.
|
|
-->
|
|
<div class="scroller" id="scroller3">
|
|
<div id="space"></div>
|
|
<div class="target" style="left: 0px;"></div>
|
|
<div class="target" style="left: 700px; scroll-snap-stop: always;"></div>
|
|
<!-- Add a snap point where the snap area covers the snapport entirely -->
|
|
<div class="target" style="left: 100px; width: 500px;"></div>
|
|
<!-- Add a snap point where the distance between this and the 100px point is
|
|
larger than the snapport size (400px) -->
|
|
<div class="target" style="left: 600px;"></div>
|
|
</div>
|
|
|
|
<!--
|
|
A similar case above, but two `scroll-snap-stop: always` snap points.
|
|
-->
|
|
<div class="scroller" id="scroller4">
|
|
<div id="space"></div>
|
|
<div class="target" style="left: 0px;"></div>
|
|
<div class="target" style="left: 700px; scroll-snap-stop: always;"></div>
|
|
<!-- Add a snap point where the snap area covers the snapport entirely -->
|
|
<div class="target" style="left: 100px; width: 500px;"></div>
|
|
<!-- Add a snap point where the distance between this and the 100px point is
|
|
larger than the snapport size (400px) -->
|
|
<div class="target" style="left: 600px; scroll-snap-stop: always;"></div>
|
|
</div>
|
|
|
|
<!--
|
|
Another similar case, but the nearest snap point to the start point is
|
|
`scroll-snap-stop: always`.
|
|
-->
|
|
<div class="scroller" id="scroller5">
|
|
<div id="space"></div>
|
|
<div class="target" style="left: 0px;"></div>
|
|
<div class="target" style="left: 700px; scroll-snap-stop: always;"></div>
|
|
<!-- Add a snap point where the snap area covers the snapport entirely -->
|
|
<div class="target" style="left: 100px; width: 500px; scroll-snap-stop: always;"></div>
|
|
<!-- Add a snap point where the distance between this and the 100px point is
|
|
larger than the snapport size (400px) -->
|
|
<div class="target" style="left: 600px;"></div>
|
|
</div>
|
|
|
|
<!--
|
|
A test case that a `scroll-snap-stop: always` snap point is further than the
|
|
scroll destination.
|
|
-->
|
|
<div class="scroller" id="scroller6">
|
|
<div id="space"></div>
|
|
<div class="target" style="left: 0px;"></div>
|
|
<div class="target" style="left: 400px;"></div>
|
|
<div class="target" style="left: 700px; scroll-snap-stop: always;"></div
|
|
</div>
|
|
|
|
<!--
|
|
Similar to above but a snap area covers the snapport.
|
|
-->
|
|
<div class="scroller" id="scroller7">
|
|
<div id="space"></div>
|
|
<div class="target" style="left: 0px;"></div>
|
|
<div class="target" style="left: 400px; width: 900px;"></div>
|
|
<div class="target" style="left: 900px; scroll-snap-stop: always;"></div
|
|
</div>
|
|
|
|
<script>
|
|
|
|
test(() => {
|
|
assert_equals(scroller1.scrollLeft, 0);
|
|
assert_equals(scroller1.scrollTop, 0);
|
|
|
|
// start dest closest always
|
|
// |------------------------------|--------|--------|
|
|
// 0 100 110 120
|
|
scroller1.scrollBy(100, 0);
|
|
assert_equals(scroller1.scrollLeft, 110);
|
|
assert_equals(scroller1.scrollTop, 0);
|
|
}, "The closest snap point is preferred than scroll-snap-stop: always where " +
|
|
"it's further than the destination (the closest one is closer to the " +
|
|
"scroll start position than the destination)");
|
|
|
|
test(() => {
|
|
assert_equals(scroller2.scrollLeft, 0);
|
|
assert_equals(scroller2.scrollTop, 0);
|
|
|
|
// start closest dest always
|
|
// |------------------------------|------|--------|
|
|
// 0 95 100 120
|
|
scroller2.scrollBy(100, 0);
|
|
assert_equals(scroller2.scrollLeft, 95);
|
|
assert_equals(scroller2.scrollTop, 0);
|
|
}, "The closest snap point is preferred than scroll-snap-stop: always where " +
|
|
"it's further than the destination (the closest one is futrher than the " +
|
|
"destination from the start position)");
|
|
|
|
test(() => {
|
|
assert_equals(scroller3.scrollLeft, 0);
|
|
assert_equals(scroller3.scrollTop, 0);
|
|
|
|
// start dest always
|
|
// |-----|===|============================|------|
|
|
// 0 100 150 600 700
|
|
|
|
// Scoll on the element whose snap area is larger than the snapport.
|
|
scroller3.scrollBy(150, 0);
|
|
assert_equals(scroller3.scrollLeft, 150);
|
|
assert_equals(scroller3.scrollTop, 0);
|
|
}, "The scroll destination on a large element whose snap area covers " +
|
|
"the snapport entirely is a valid snap position");
|
|
|
|
test(() => {
|
|
assert_equals(scroller4.scrollLeft, 0);
|
|
assert_equals(scroller4.scrollTop, 0);
|
|
|
|
// start dest always always
|
|
// |-----|====|============================|------|
|
|
// 0 100 150 600 700
|
|
|
|
// Scoll on the element whose snap area is larger than the snapport.
|
|
scroller4.scrollBy(150, 0);
|
|
assert_equals(scroller4.scrollLeft, 150);
|
|
assert_equals(scroller4.scrollTop, 0);
|
|
}, "The scroll destination on a large element whose snap area covers " +
|
|
"the snapport entirely is a valid snap position (with two " +
|
|
"`scroll-snap-stop: always` snap points");
|
|
|
|
test(() => {
|
|
assert_equals(scroller5.scrollLeft, 0);
|
|
assert_equals(scroller5.scrollTop, 0);
|
|
|
|
// start always dest always
|
|
// |-----|=====|============================|------|
|
|
// 0 100 150 600 700
|
|
|
|
// Scoll on the element whose snap area is larger than the snapport, but
|
|
// the scroll-snap-stop property is `always`.
|
|
scroller5.scrollBy(150, 0);
|
|
assert_equals(scroller5.scrollLeft, 100);
|
|
assert_equals(scroller5.scrollTop, 0);
|
|
|
|
// Scroll the direction further, it should NOT be trapped by the
|
|
// `scroll-snap-stop: always` snap point.
|
|
scroller5.scrollBy(50, 0);
|
|
assert_equals(scroller5.scrollLeft, 150);
|
|
assert_equals(scroller5.scrollTop, 0);
|
|
}, "`scroll-snap-stop: always` snap point is preferred even if the snap area " +
|
|
"entire snapport");
|
|
|
|
test(() => {
|
|
assert_equals(scroller6.scrollLeft, 0);
|
|
assert_equals(scroller6.scrollTop, 0);
|
|
|
|
// start dest always
|
|
// |-------------------------|-----------------|------|
|
|
// 0 400 600 700
|
|
|
|
// Scroll to a point where it's closer to a `scroll-snap-stop: always` snap
|
|
// position.
|
|
scroller6.scrollBy(600, 0);
|
|
assert_equals(scroller6.scrollLeft, 700);
|
|
assert_equals(scroller6.scrollTop, 0);
|
|
}, "`scroll-snap-stop: always` snap point is further than the scroll " +
|
|
"destination");
|
|
|
|
test(() => {
|
|
assert_equals(scroller7.scrollLeft, 0);
|
|
assert_equals(scroller7.scrollTop, 0);
|
|
|
|
// start dest always
|
|
// |-------------------------|================|=====|=====
|
|
// 0 400 700 900
|
|
|
|
// Scoll on the element whose snap area is larger than the snapport.
|
|
scroller7.scrollBy(700, 0);
|
|
assert_equals(scroller7.scrollLeft, 700);
|
|
assert_equals(scroller7.scrollTop, 0);
|
|
}, "`scroll-snap-stop: always` snap point is further than the scroll " +
|
|
"destination and a snap area covers the snapport");
|
|
|
|
</script>
|