summaryrefslogtreecommitdiffstats
path: root/testing/web-platform/tests/css/css-scroll-snap/scroll-snap-stop-002.html
diff options
context:
space:
mode:
authorDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-19 01:47:29 +0000
committerDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-19 01:47:29 +0000
commit0ebf5bdf043a27fd3dfb7f92e0cb63d88954c44d (patch)
treea31f07c9bcca9d56ce61e9a1ffd30ef350d513aa /testing/web-platform/tests/css/css-scroll-snap/scroll-snap-stop-002.html
parentInitial commit. (diff)
downloadfirefox-esr-0ebf5bdf043a27fd3dfb7f92e0cb63d88954c44d.tar.xz
firefox-esr-0ebf5bdf043a27fd3dfb7f92e0cb63d88954c44d.zip
Adding upstream version 115.8.0esr.upstream/115.8.0esr
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/css/css-scroll-snap/scroll-snap-stop-002.html')
-rw-r--r--testing/web-platform/tests/css/css-scroll-snap/scroll-snap-stop-002.html238
1 files changed, 238 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-scroll-snap/scroll-snap-stop-002.html b/testing/web-platform/tests/css/css-scroll-snap/scroll-snap-stop-002.html
new file mode 100644
index 0000000000..cadafe2a82
--- /dev/null
+++ b/testing/web-platform/tests/css/css-scroll-snap/scroll-snap-stop-002.html
@@ -0,0 +1,238 @@
+<!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>
generated by cgit v1.2.3 (git 2.39.1) at 2024-12-17 11:12:53 +0000