| <!DOCTYPE html> |
| <script src="../../resources/testharness.js"></script> |
| <script src="../../resources/testharnessreport.js"></script> |
| <script src="../../resources/gesture-util.js"></script> |
| <style> |
| div { |
| position: absolute; |
| } |
| #scroller { |
| width: 500px; |
| height: 500px; |
| overflow: scroll; |
| scroll-snap-type: both mandatory; |
| border: solid black 5px; |
| } |
| #space { |
| width: 2000px; |
| height: 2000px; |
| } |
| .target { |
| width: 200px; |
| height: 200px; |
| scroll-snap-align: start; |
| background-color: blue; |
| } |
| </style> |
| |
| <div id="scroller"> |
| <div id="space"></div> |
| <div class="target" style="left: 0px; top: 0px;"></div> |
| <div class="target" style="left: 80px; top: 80px;"></div> |
| <div class="target" style="left: 200px; top: 200px;"></div> |
| </div> |
| |
| <script> |
| var body = document.body; |
| var scroller = document.getElementById("scroller"); |
| var space = document.getElementById("space"); |
| |
| function scrollLeft() { |
| return scroller.scrollLeft; |
| } |
| |
| promise_test (async () => { |
| scroller.scrollTo(0, 0); |
| await smoothScroll(100, 200, 200, GestureSourceType.TOUCH_INPUT, 'downright', SPEED_INSTANT); |
| await waitForAnimationEnd(scrollLeft, 700, 10); |
| assert_approx_equals(scroller.scrollLeft, 80, 1); |
| assert_approx_equals(scroller.scrollTop, 80, 1); |
| }, "Without fling enabled, the scroll ends at the closest snap point to the scroll destination."); |
| |
| promise_test (async () => { |
| scroller.scrollTo(0, 0); |
| await swipe(100, 200, 200, 'upleft', 900); |
| await waitForAnimationEnd(scrollLeft, 1000, 30); |
| assert_approx_equals(scroller.scrollLeft, 200, 1); |
| assert_approx_equals(scroller.scrollTop, 200, 1); |
| }, "Fling scroll ends at the closest snap point to the fling destination.") |
| |
| promise_test (async () => { |
| scroller.scrollTo(0, 0); |
| // Scroll horizontally to (100, 0) with momentum. |
| await swipe(100, 200, 200, 'left', 900); |
| await waitForAnimationEnd(scrollLeft, 1000, 30); |
| assert_approx_equals(scroller.scrollLeft, 200, 1); |
| assert_approx_equals(scroller.scrollTop, 0, 1); |
| }, "Fling scroll in one direction ends at closest snap point to the fling destination."); |
| |
| promise_test (async () => { |
| scroller.scrollTo(0, 0); |
| // Scroll right and up. Going up vertically is not possible since it is outside the bound. The |
| // expectation in this case is to snap as if user scrolled horizontally to (100, 0) with |
| // momentun. |
| await swipe(100, 200, 200, 'downleft', 900); |
| await waitForAnimationEnd(scrollLeft, 1000, 30); |
| assert_approx_equals(scroller.scrollLeft, 200, 1); |
| // TODO(823998): Scroll top may land either at 0px or 80px which are both valid snap targets. |
| // My expectation was that it would be at 0. Needs more investigation to deflake. |
| // assert_approx_equals(scroller.scrollTop, 0, 1); |
| }, "Fling scroll that goes outside the boundary ends at the closest snap point to the fling destination."); |
| |
| function MakeUnscrollable() { |
| scroller.removeChild(space); |
| } |
| function MakeScrollable() { |
| scroller.appendChild(space); |
| } |
| promise_test (async () => { |
| scroller.scrollTo(0, 0); |
| await swipe(100, 200, 200, 'upleft', 1000); |
| await waitFor( () => { |
| return scroller.scrollLeft > 120; |
| }); |
| MakeUnscrollable(); |
| await waitForAnimationEnd(scrollLeft, 1000, 20); |
| MakeScrollable(); |
| }, "Should not crash if the scroller becomes unscrollable during fling."); |
| |
| promise_test (async () => { |
| scroller.scrollTo(0, 0); |
| await swipe(100, 200, 200, 'upleft', 1000); |
| await waitFor( () => { |
| return scroller.scrollLeft > 120; |
| }); |
| body.removeChild(scroller); |
| await waitForAnimationEnd(scrollLeft, 1000, 20); |
| body.appendChild(scroller); |
| }, "Should not crash if the scroller is removed during fling."); |
| |
| </script> |
