1 files changed, 182 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..79d0fc9f36
--- /dev/null
+++ b/testing/web-platform/tests/css/css-scroll-snap/input/keyboard.html
@@ -0,0 +1,182 @@
+<!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="viewport" content="width=device-width,initial-scale=1,minimum-scale=1">
+<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="/dom/events/scrolling/scroll_support.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);
+  });
+}
+
+async function initializeScrollPosition(scroller, x, y) {
+  return new Promise(async (resolve) => {
+    if (scroller.scrollLeft != x || scroller.scrollTop != y) {
+      const scrollEndPromise = waitForScrollEnd(scroller);
+      scroller.scrollTo(x, y);
+      await scrollEndPromise;
+    }
+    resolve();
+  });
+}
+
+promise_test(async t => {
+  await initializeScrollPosition(scroller, 0, 0);
+  assert_equals(scroller.scrollTop, 0, "verify test pre-condition");
+  const scrollCounter = new ScrollCounter(t, scroller);
+  const scrollEndPromise = waitForScrollEnd(scroller);
+  await keyPress(scroller, "ArrowDown");
+  await scrollEndPromise;
+  assert_equals(scroller.scrollTop, 400);
+  // Make sure we don't jump directly to the new snap position.
+  assert_greater_than(scrollCounter.count, 1);
+}, "Snaps to bottom-left after pressing ArrowDown");
+
+promise_test(async t => {
+  await initializeScrollPosition(scroller, 0, 400);
+  assert_equals(scroller.scrollTop, 400, "verify test pre-condition");
+  const scrollCounter = new ScrollCounter(t, scroller);
+  const scrollEndPromise = waitForScrollEnd(scroller);
+  await keyPress(scroller, "ArrowUp");
+  await scrollEndPromise;
+  assert_equals(scroller.scrollTop, 0);
+  // Make sure we don't jump directly to the new snap position.
+  assert_greater_than(scrollCounter.count, 1);
+}, "Snaps to top-left after pressing ArrowUp");
+
+promise_test(async t => {
+  await initializeScrollPosition(scroller, 0, 0);
+  assert_equals(scroller.scrollTop, 0, "verify test pre-condition");
+  const scrollCounter = new ScrollCounter(t, scroller);
+  const scrollEndPromise = waitForScrollEnd(scroller);
+  await keyPress(scroller, "ArrowRight");
+  await scrollEndPromise;
+  assert_equals(scroller.scrollLeft, 400);
+  // Make sure we don't jump directly to the new snap position.
+  assert_greater_than(scrollCounter.count, 1);
+}, "Snaps to top-right after pressing ArrowRight");
+
+promise_test(async t => {
+  await initializeScrollPosition(scroller, 400, 0);
+  assert_equals(scroller.scrollLeft, 400, "verify test pre-condition");
+  const scrollCounter = new ScrollCounter(t, scroller);
+  const scrollEndPromise = waitForScrollEnd(scroller);
+  await keyPress(scroller, "ArrowLeft");
+  await scrollEndPromise;
+  assert_equals(scroller.scrollLeft, 0);
+  // Make sure we don't jump directly to the new snap position.
+  assert_greater_than(scrollCounter.count, 1);
+}, "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";
+  await initializeScrollPosition(scroller, 0, 0);
+  assert_equals(scroller.scrollLeft, 0, "verify test pre-condition");
+  const scrollEndPromise = waitForScrollEnd(scroller);
+  await keyPress(scroller, "ArrowRight");
+  await scrollEndPromise;
+  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";
+    topRight.style.scrollSnapStop = "";
+  });
+
+  // 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";
+  topRight.style.scrollSnapStop = "always";
+  await initializeScrollPosition(scroller, 0, 0);
+  assert_equals(scroller.scrollLeft, 0, "verify test pre-condition");
+  const scrollEndPromise = waitForScrollEnd(scroller);
+  await keyPress(scroller, "ArrowRight");
+  await scrollEndPromise;
+  assert_equals(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 => {
+  await initializeScrollPosition(scroller, 400, 0);
+  await keyPress(scroller, "ArrowRight");
+  await waitForScrollStop(scroller);
+  assert_equals(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.width = "";
+    topLeft.style.width = "";
+  });
+
+  scroller.style.scrollSnapType = "both proximity";
+
+  // This test case works only if the scroll amount of pressing "ArrowRight" is
+  // greater than the scroll snap proximity value of the scroll container.
+  // "100px" width of the scroll container works on major browsers.
+  scroller.style.width = "100px";
+  topLeft.style.width = "80px";
+
+  await initializeScrollPosition(scroller, 400, 0);
+  assert_equals(scroller.scrollLeft, 400, "verify test pre-condition");
+  const scrollEndPromise = waitForScrollEnd(scroller);
+  await keyPress(scroller, "ArrowRight");
+  await scrollEndPromise;
+  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>