| <!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); |
| const scrollWatcher = waitForScrollEvent(scroller); |
| await keyPress("ArrowDown"); |
| await scrollWatcher; |
| assert_equals(scroller.scrollTop, 200); |
| }, "Snaps to page1-line1 after pressing ArrowDown at page1."); |
| |
| promise_test (async () => { |
| await mouseClickOn(10, 10); |
| scroller.scrollTo(0, 1200); |
| const scrollWatcher = waitForScrollEvent(scroller); |
| await keyPress("ArrowUp"); |
| await scrollWatcher; |
| assert_equals(scroller.scrollTop, 1000); |
| }, "Snaps to page2-line2 after pressing ArrowUp at page3."); |
| |
| promise_test (async () => { |
| await mouseClickOn(10, 10); |
| scroller.scrollTo(0, 0); |
| const scrollWatcher = waitForScrollEvent(scroller); |
| await keyPress("PageDown"); |
| await scrollWatcher; |
| assert_equals(scroller.scrollTop, 600); |
| }, "Snaps to page2 after pressing PageDown at page1."); |
| |
| promise_test (async () => { |
| await mouseClickOn(10, 10); |
| scroller.scrollTo(0, 1200); |
| const scrollWatcher = waitForScrollEvent(scroller); |
| await keyPress("PageUp"); |
| await scrollWatcher; |
| assert_equals(scroller.scrollTop, 600); |
| }, "Snaps to page2 after pressing PageUp at page3."); |
| |
| promise_test (async () => { |
| await mouseClickOn(10, 10); |
| scroller.scrollTo(0, 0); |
| const scrollWatcher = waitForScrollEvent(scroller); |
| await keyPress("End"); |
| await scrollWatcher; |
| assert_equals(scroller.scrollTop, 1200); |
| }, "Snaps to page3 after pressing End at page1."); |
| |
| promise_test (async () => { |
| await mouseClickOn(10, 10); |
| scroller.scrollTo(0, 1200); |
| const scrollWatcher = waitForScrollEvent(scroller); |
| await keyPress("Home"); |
| await scrollWatcher; |
| assert_equals(scroller.scrollTop, 0); |
| }, "Snaps to page1 after pressing Home at page3."); |
| </script> |
