summaryrefslogtreecommitdiffstats
path: root/testing/web-platform/tests/css/css-scroll-snap/input
diff options
context:
space:
mode:
authorDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-07 09:22:09 +0000
committerDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-07 09:22:09 +0000
commit43a97878ce14b72f0981164f87f2e35e14151312 (patch)
tree620249daf56c0258faa40cbdcf9cfba06de2a846 /testing/web-platform/tests/css/css-scroll-snap/input
parentInitial commit. (diff)
downloadfirefox-43a97878ce14b72f0981164f87f2e35e14151312.tar.xz
firefox-43a97878ce14b72f0981164f87f2e35e14151312.zip
Adding upstream version 110.0.1.upstream/110.0.1upstream
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/css/css-scroll-snap/input')
-rw-r--r--testing/web-platform/tests/css/css-scroll-snap/input/keyboard.html149
-rw-r--r--testing/web-platform/tests/css/css-scroll-snap/input/mouse-wheel.html70
-rw-r--r--testing/web-platform/tests/css/css-scroll-snap/input/snap-area-overflow-boundary.html150
3 files changed, 369 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-scroll-snap/input/keyboard.html b/testing/web-platform/tests/css/css-scroll-snap/input/keyboard.html
new file mode 100644
index 0000000000..7b0c6c0574
--- /dev/null
+++ b/testing/web-platform/tests/css/css-scroll-snap/input/keyboard.html
@@ -0,0 +1,149 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1/#scroll-snap-type" />
+<title>Arrow key scroll snapping</title>
+<meta name="flags" content="should">
+<meta name="assert"
+ content="Test passes if keyboard scrolling correctly snaps on a snap
+ container">
+
+<link rel="stylesheet" href="../support/common.css">
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+<script src="/resources/testdriver-actions.js"></script>
+<script src="../support/common.js"></script>
+
+
+<div id="scroller" tabindex="0">
+ <div id="space"></div>
+ <div class="snap left top" id="top-left"></div>
+ <div class="snap right top" id="top-right"></div>
+ <div class="snap left bottom" id="bottom-left"></div>
+</div>
+
+<script>
+const scroller = document.getElementById("scroller");
+const topLeft = document.getElementById("top-left");
+const topRight = document.getElementById("top-right");
+
+scrollLeft = () => scroller.scrollLeft;
+scrollTop = () => scroller.scrollTop;
+
+function ScrollCounter(test, eventTarget) {
+ this.count = 0;
+ const scrollListener = () => {
+ this.count++;
+ }
+ eventTarget.addEventListener('scroll', scrollListener);
+ test.add_cleanup(() => {
+ eventTarget.removeEventListener('scroll', scrollListener);
+ });
+}
+
+promise_test(async t => {
+ scroller.scrollTo(0, 0);
+ assert_equals(scroller.scrollTop, 0, "verify test pre-condition");
+ const scrollCounter = new ScrollCounter(t, scroller);
+ await keyPress(scroller, "ArrowDown");
+ await waitForScrollEnd(scroller, scrollTop, 400);
+ // Make sure we don't jump directly to the new snap position.
+ assert_greater_than(scrollCounter.count, 2);
+}, "Snaps to bottom-left after pressing ArrowDown");
+
+promise_test(async t => {
+ scroller.scrollTo(0, 400);
+ assert_equals(scroller.scrollTop, 400, "verify test pre-condition");
+ const scrollCounter = new ScrollCounter(t, scroller);
+ await keyPress(scroller, "ArrowUp");
+ await waitForScrollEnd(scroller, scrollTop, 0);
+ // Make sure we don't jump directly to the new snap position.
+ assert_greater_than(scrollCounter.count, 2);
+}, "Snaps to top-left after pressing ArrowUp");
+
+promise_test(async t => {
+ scroller.scrollTo(0, 0);
+ assert_equals(scroller.scrollTop, 0, "verify test pre-condition");
+ const scrollCounter = new ScrollCounter(t, scroller);
+ await keyPress(scroller, "ArrowRight");
+ await waitForScrollEnd(scroller, scrollLeft, 400);
+ // Make sure we don't jump directly to the new snap position.
+ assert_greater_than(scrollCounter.count, 2);
+}, "Snaps to top-right after pressing ArrowRight");
+
+promise_test(async t => {
+ scroller.scrollTo(400, 0);
+ assert_equals(scroller.scrollLeft, 400, "verify test pre-condition");
+ const scrollCounter = new ScrollCounter(t, scroller);
+ await keyPress(scroller, "ArrowLeft");
+ await waitForScrollEnd(scroller, scrollLeft, 0);
+ // Make sure we don't jump directly to the new snap position.
+ assert_greater_than(scrollCounter.count, 2);
+}, "Snaps to top-left after pressing ArrowLeft");
+
+promise_test(async t => {
+ t.add_cleanup(function() {
+ topLeft.style.width = "";
+ topRight.style.left = "400px";
+ });
+
+ // Make the snap area cover the snapport.
+ topLeft.style.width = "800px";
+ // Make the distance between the previous and the next snap position larger
+ // than snapport.
+ topRight.style.left = "500px";
+ scroller.scrollTo(0, 0);
+ assert_equals(scroller.scrollLeft, 0, "verify test pre-condition");
+ const scrollPromise = waitForScrollEvent(scroller);
+ await keyPress(scroller, "ArrowRight");
+ await scrollPromise;
+ await waitForAnimationEnd(scrollLeft);
+ assert_between_exclusive(scroller.scrollLeft, 0, 500);
+}, "If the original intended offset is valid as making a snap area cover the"
++ "snapport, and there's no other snap offset in between, use the original"
++ "intended offset");
+
+promise_test(async t => {
+ t.add_cleanup(function() {
+ topLeft.style.width = "";
+ topRight.style.left = "400px";
+ });
+
+ // Make the snap area cover the snapport.
+ topLeft.style.width = "800px";
+ // Make the next snap offset closer than the original intended offset.
+ topRight.style.left = "20px";
+ scroller.scrollTo(0, 0);
+ assert_equals(scroller.scrollLeft, 0, "verify test pre-condition");
+ await keyPress(scroller, "ArrowRight");
+ await waitForScrollEnd(scroller, scrollLeft, 20);
+}, "If the original intended offset is valid as making a snap area cover the "
++ "snapport, but there's a defined snap offset in between, use the defined snap"
++ " offset.");
+
+promise_test(async t => {
+ scroller.scrollTo(400, 0);
+ await keyPress(scroller, "ArrowRight");
+ await waitForScrollEnd(scroller, scrollLeft, 400);
+}, "If there is no valid snap offset on the arrow key's direction other than "
++ "the current offset, and the scroll-snap-type is mandatory, stay at the "
++ "current offset.");
+
+promise_test(async t => {
+ t.add_cleanup(function() {
+ scroller.style.scrollSnapType = "both mandatory";
+ });
+
+ scroller.style.scrollSnapType = "both proximity";
+ scroller.scrollTo(400, 0);
+ assert_equals(scroller.scrollLeft, 400, "verify test pre-condition");
+ const scrollPromise = waitForScrollEvent(scroller);
+ await keyPress(scroller, "ArrowRight");
+ await scrollPromise;
+ await waitForAnimationEnd(scrollLeft);
+ assert_greater_than(scroller.scrollLeft, 400);
+}, "If there is no valid snap offset on the arrow key's direction other than "
++ "the current offset, and the scroll-snap-type is proximity, go to the "
++ "original intended offset");
+</script>
diff --git a/testing/web-platform/tests/css/css-scroll-snap/input/mouse-wheel.html b/testing/web-platform/tests/css/css-scroll-snap/input/mouse-wheel.html
new file mode 100644
index 0000000000..287e594cab
--- /dev/null
+++ b/testing/web-platform/tests/css/css-scroll-snap/input/mouse-wheel.html
@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1/#scroll-snap-type" />
+<title>Mouse-wheel scroll snapping speed</title>
+<meta name="assert"
+ content="Test passes if mousewheel snaps without pausing">
+<style>
+ #scroller {
+ scroll-snap-type: block mandatory;
+ overflow: scroll;
+ height: 400px;
+ width: 400px
+ }
+ #space {
+ width: 200px;
+ height: 4000px;
+ }
+ .box {
+ scroll-snap-align: start;
+ background: blue;
+ margin-bottom: 10px;
+ width: 100px;
+ height: 100px;
+ }
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+<script src="/resources/testdriver-actions.js"></script>
+<script src="../support/common.js"></script>
+<div id="scroller">
+ <div class="box"></div>
+ <div class="box"></div>
+ <div id="space"></div>
+</div>
+<script>
+promise_test(async t => {
+ const scroller = document.getElementById("scroller");
+ scroller.scrollTo(0, 0);
+ assert_equals(scroller.scrollTop, 0, "verify test pre-condition");
+ const scrollTop = () => {
+ return scroller.scrollTop;
+ };
+ const scrollPromise = waitForScrollEvent(scroller);
+ const wheelPromise = waitForWheelEvent(scroller);
+ const actions = new test_driver.Actions()
+ .scroll(50, 50, 0, 50, {origin: scroller, duration: 100});
+ await actions.send();
+ await wheelPromise;
+ await scrollPromise;
+ let scrollEndTime;
+ let snapEndTime;
+ // Detect first pause in scrolling.
+ const scrollStabilizedPromise =
+ waitForAnimationEnd(scrollTop).then((timestamp) => {
+ scrollEndTime = timestamp;
+ });
+ const snapEndPromise =
+ waitForScrollTo(scroller, () => {
+ return scroller.scrollTop;
+ }, 110).then((evt) => {
+ snapEndTime = evt.timestamp;
+ });
+ await Promise.all([scrollStabilizedPromise, snapEndPromise]);
+ assert_equals(scroller.scrollTop, 110,
+ 'Failed to advance to next snap target');
+ assert_true(snapEndTime < scrollEndTime,
+ 'Detected pause in scrolling before reaching snap target');
+}, "Wheel-scroll triggers snap to target position immediately.");
+</script>
diff --git a/testing/web-platform/tests/css/css-scroll-snap/input/snap-area-overflow-boundary.html b/testing/web-platform/tests/css/css-scroll-snap/input/snap-area-overflow-boundary.html
new file mode 100644
index 0000000000..c497845263
--- /dev/null
+++ b/testing/web-platform/tests/css/css-scroll-snap/input/snap-area-overflow-boundary.html
@@ -0,0 +1,150 @@
+<!DOCTYPE html>
+<link rel="help" href="https://www.w3.org/TR/css-scroll-snap-1/#snap-overflow" />
+<title></title>
+<meta name="assert" content="Test passes if snap is to the nearest edge">
+<style>
+ #scroller {
+ scroll-snap-type: block mandatory;
+ overflow-y: scroll;
+ height: 400px;
+ width: 400px
+ }
+ #space {
+ width: 200px;
+ height: 4000px;
+ }
+ .box {
+ scroll-snap-align: start;
+ background: #ccccff;
+ margin-bottom: 10px;
+ width: 300px;
+ height: 500px;
+ position: relative;
+ }
+ .header {
+ top: 0;
+ position: absolute;
+ }
+ .footer {
+ bottom: 0;
+ position: absolute;
+ }
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+<script src="/resources/testdriver-actions.js"></script>
+<script src="../support/common.js"></script>
+
+<div id="scroller" tabindex="0">
+ <div id="target" class="box">
+ <div class="header">Header 1</div>
+ <div class="footer">Footer 1</div>
+ </div>
+ <div id="next" class="box">
+ <div class="header">Header 2</div>
+ <div class="footer">Footer 2</div>
+ </div>
+ <div id="space"></div>
+</div>
+
+<script>
+// If all of the following conditions are met:
+// 1. the snap area is larger than the snapport along the scroll axis, and
+// 2. the distance between the previous and subsequent snap positions along
+// the axis is greater then the snapport size.
+//
+// Then any scroll position in which the snap area covers the snapport is
+// valid snap position. This rule facilitates scrolling around in oversized
+// elements.
+//
+// These test covers edge cases with snap-areas that overflow the snapport.
+// It should be possible to scroll to the end of an oversized snap-area.
+
+const scroller = document.getElementById("scroller");
+const target = document.getElementById("target");
+const next = document.getElementById("next");
+const scrollTop = () => {
+ return scroller.scrollTop;
+};
+const cleanup = () => {
+ target.style.height = '500px';
+};
+
+promise_test(async t => {
+ t.add_cleanup(cleanup);
+ scroller.scrollTo(0, 0);
+ assert_equals(scroller.scrollTop, 0, "verify test pre-condition");
+
+ // Ensure we can freely scroll in an oversized element.
+ const scrollPromise = waitForScrollEvent(scroller);
+ await keyPress(scroller, "ArrowDown");
+ await scrollPromise;
+ await waitForAnimationEnd(scrollTop);
+ assert_greater_than(scroller.scrollTop, 0,
+ 'Arrowkey scroll moved scroll position');
+ assert_less_than_equal(scroller.scrollTop, target.clientHeight,
+ 'Scroll within snap-area overflow');
+
+ // Resize the element so it is oversized by less than the line scroll amount.
+ // The next keyboard-triggered scroll should stop at the end of the snap-area.
+ // Otherwise it is not possible to scroll to the last line of the snap-area
+ // via keyboard.
+ const scrollAmount = scroller.scrollTop;
+ target.style.height = `${scroller.clientHeight + scrollAmount - 1}px`;
+ assert_equals(scroller.scrollTop, 0, "Verify snap on relayout");
+ await keyPress(scroller, "ArrowDown");
+ await waitForAnimationEnd(scrollTop);
+ assert_equals(scroller.scrollTop,
+ target.clientHeight - scroller.clientHeight,
+ 'End boundary of snap-area is valid snap target');
+
+ // Must not get stuck at a snap position. Since already at the end of the
+ // snap area, we should advance to the next.
+ await keyPress(scroller, "ArrowDown");
+ await waitForAnimationEnd(scrollTop);
+ assert_equals(scroller.scrollTop,
+ next.clientTop,
+ 'Advance to next snap-area');
+
+}, "Keyboard scrolling with vertical snap-area overflow");
+
+promise_test(async t => {
+ scroller.scrollTo(0, 0);
+ assert_equals(scroller.scrollTop, 0, "verify test pre-condition");
+
+ // Ensure we can freely scroll in an oversized element.
+ const scrollPromise = waitForScrollEvent(scroller);
+ await new test_driver.Actions()
+ .scroll(50, 50, 0, 50, {origin: scroller})
+ .send();
+ await scrollPromise;
+ await waitForAnimationEnd(scrollTop);
+ assert_equals(scroller.scrollTop, 50,
+ 'Wheel-scroll moved scroll position');
+
+ // Target position for wheel scroll overshoots the boundary of the snap-area.
+ // Ensure that we stop at the boundary.
+ const scrollAmount =
+ target.clientHeight - scroller.clientHeight - scroller.scrollTop + 1;
+
+ await new test_driver.Actions()
+ .scroll(50, 50, 0, scrollAmount, {origin: scroller})
+ .send();
+ await waitForAnimationEnd(scrollTop);
+ assert_equals(scroller.scrollTop, 100,
+ 'End boundary of snap-area is valid snap target');
+
+ // Must not get stuck at a snap position. Since already at the end of the
+ // snap area, we should advance to the next.
+ await new test_driver.Actions()
+ .scroll(50, 50, 0, 50, {origin: scroller})
+ .send();
+ await waitForAnimationEnd(scrollTop);
+ assert_equals(scroller.scrollTop,
+ next.clientTop,
+ 'Advance to next snap-area');
+
+}, "Mouse-wheel scrolling with vertical snap-area overflow");
+</script>
generated by cgit v1.2.3 (git 2.39.1) at 2025-01-18 07:23:31 +0000