| <!DOCTYPE html> |
| <link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1" /> |
| <link rel="stylesheet" href="resources/simple-snap.css"> |
| <script src="../../resources/testharness.js"></script> |
| <script src="../../resources/testharnessreport.js"></script> |
| <script src="../../resources/gesture-util.js"></script> |
| |
| <div id='scroller'> |
| <div id="space"></div> |
| <div class="snap left top"></div> |
| <div class="snap right top"></div> |
| <div class="snap left bottom"></div> |
| </div> |
| |
| <script> |
| var scroller = document.getElementById("scroller"); |
| |
| function scrollLeft() { |
| return scroller.scrollLeft; |
| } |
| |
| function scrollTop() { |
| return scroller.scrollTop; |
| } |
| |
| promise_test (async () => { |
| scroller.scrollTo(0, 0); |
| await mouseDragAndDrop(398, 20, 398, 120); |
| await waitForAnimationEnd(scrollTop, 500, 5); |
| await waitFor( () => { |
| return scroller.scrollTop == 400; |
| }); |
| }, "Snaps after dragging the vertical scrollbar."); |
| |
| promise_test (async () => { |
| scroller.scrollTo(0, 0); |
| await mouseDragAndDrop(20, 398, 120, 398); |
| await waitForAnimationEnd(scrollLeft, 500, 5); |
| await waitFor( () => { |
| return scroller.scrollLeft == 400; |
| }); |
| }, "Snaps after dragging the horizontal scrollbar."); |
| |
| promise_test (async () => { |
| scroller.scrollTo(0, 0); |
| await mousePressOn(398, 350, 1000); |
| await waitForAnimationEnd(scrollTop, 500, 5); |
| await waitFor( () => { |
| return scroller.scrollTop == 400; |
| }); |
| }, "Snaps after clicking the vertical scrollbar."); |
| |
| promise_test (async () => { |
| scroller.scrollTo(0, 0); |
| await mousePressOn(350, 398, 1000); |
| await waitForAnimationEnd(scrollLeft, 500, 5); |
| await waitFor( () => { |
| return scroller.scrollLeft == 400; |
| }); |
| }, "Snaps after clicking the horizontal scrollbar."); |
| |
| </script> |
