snaps-for-different-key-granularity.html

<!DOCTYPE html>
<link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1" />
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script src="../../resources/gesture-util.js"></script>

<style>
:root {
  --page-size: 600px;
  --line-size: 200px;
}

div {
  position: absolute;
}

#scroller {
  width: 600px;
  height: var(--page-size);
  overflow: scroll;
  scroll-snap-type: both mandatory;
}
#space {
  width: 2000px;
  height: 2000px;
}
.snap {
  width: 100px;
  height: 100px;
  background-color: blue;
  scroll-snap-align: start;
}
</style>

<div id="scroller">
  <div id="space"></div>
  <div class="snap" id="page1" style="left: 0px; top: 0px;"></div>
  <div class="snap" id="page1-line1" style="left: 0px; top: var(--line-size);"></div>
  <div class="snap" id="page2" style="left: 0px; top: var(--page-size);"></div>
  <div class="snap" id="page2-line1" style="left: 0px; top: calc(var(--page-size) + var(--line-size));"></div>
  <div class="snap" id="page2-line2" style="left: 0px; top: calc(2 * var(--page-size) - var(--line-size));"></div>
  <div class="snap" id="page3" style="left: 0px; top: calc(2 * var(--page-size));"></div>
</div>

<script>
if (window.internals) {
  // Jump directly to the snap position. Otherwise, we need to wait until X ms
  // goes by without a change to the scroll position, which leads to either slow
  // running tests or flakes when the test machines get bogged down.
  internals.settings.setScrollAnimatorEnabled(false);
}

var scroller = document.getElementById("scroller");

function scrollLeft() {
  return scroller.scrollLeft;
}

function scrollTop() {
  return scroller.scrollTop;
}

function keyPress(key) {
  return new Promise((resolve, reject) => {
    if (window.eventSender) {
      eventSender.keyDown(key);
      resolve();
    }
    else {
      reject('This test requires window.eventSender');
    }
  })
}

promise_test (async () => {
  await mouseClickOn(10, 10);
  scroller.scrollTo(0, 0);
  await keyPress("ArrowDown");
  await waitForScrollEnd(scroller, scrollTop, 200);
}, "Snaps to page1-line1 after pressing ArrowDown at page1.");

promise_test (async () => {
  await mouseClickOn(10, 10);
  scroller.scrollTo(0, 1200);
  await keyPress("ArrowUp");
  await waitForScrollEnd(scroller, scrollTop, 1000);
}, "Snaps to page2-line2 after pressing ArrowUp at page3.");

promise_test (async () => {
  await mouseClickOn(10, 10);
  scroller.scrollTo(0, 0);
  await keyPress("PageDown");
  await waitForScrollEnd(scroller, scrollTop, 600);
}, "Snaps to page2 after pressing PageDown at page1.");

promise_test (async () => {
  await mouseClickOn(10, 10);
  scroller.scrollTo(0, 1200);
  await keyPress("PageUp");
  await waitForScrollEnd(scroller, scrollTop, 600);
}, "Snaps to page2 after pressing PageUp at page3.");

promise_test (async () => {
  await mouseClickOn(10, 10);
  scroller.scrollTo(0, 0);
  await keyPress("End");
  await waitForScrollEnd(scroller, scrollTop, 1200);
}, "Snaps to page3 after pressing End at page1.");

promise_test (async () => {
  await mouseClickOn(10, 10);
  scroller.scrollTo(0, 1200);
  await keyPress("Home");
  await waitForScrollEnd(scroller, scrollTop, 0);
}, "Snaps to page1 after pressing Home at page3.");
</script>
chromium/third_party/blink/web_tests/fast/scroll-snap/snaps-for-different-key-granularity.html
