| <!DOCTYPE html> |
| <script src="../../../../resources/testharness.js"></script> |
| <script src="../../../../resources/testharnessreport.js"></script> |
| <script src="../../../../resources/gesture-util.js"></script> |
| |
| <body style="margin:0"> |
| <div id="container" style="height: 500px; overflow-x: scroll; overflow-y: scroll"> |
| <select id="box" style="width=200px" size="5"> |
| <option>Option 1</option> |
| <option>Option 2</option> |
| <option>Option 3</option> |
| <option>Option 4</option> |
| <option>Option 5</option> |
| <option>Option 6</option> |
| <option>Option 7</option> |
| <option>Option 8</option> |
| <option>Option 9</option> |
| <option>Option 10</option> |
| <option>Option 11</option> |
| </select> |
| <div style="background: green; height: 1000px; width: 1000px"></div> |
| </div> |
| </body> |
| |
| <script type="text/javascript"> |
| var gestureX = 30; |
| var gestureY = 30; |
| var box = document.getElementById("box"); |
| var container = document.getElementById("container"); |
| var itemHeight = box.clientHeight / box.size; |
| var fullyScrolled = box.scrollHeight - box.clientHeight; |
| |
| function resetScroll() { |
| container.scrollTop = 0; |
| box.scrollTop = 0; |
| container.scrollLeft = 0; |
| box.scrollLeft = 0; |
| } |
| |
| promise_test (async () => { |
| resetScroll(); |
| assert_equals(box.scrollTop, 0); |
| assert_equals(container.scrollTop, 0); |
| |
| await swipe(2 * itemHeight + 10, gestureX, gestureY, "up", SPEED_INSTANT); |
| await waitForAnimationEnd(() => { return box.scrollTop; }, 700, 20); |
| assert_greater_than(box.scrollTop, 2 * itemHeight + 10); |
| assert_equals(container.scrollTop, 0); |
| |
| resetScroll(); |
| assert_equals(box.scrollTop, 0); |
| |
| await swipe(fullyScrolled + 500, gestureX, gestureY, "up", SPEED_INSTANT); |
| await waitFor(() => { return box.scrollTop == fullyScrolled; }); |
| // Wait for 100 RAFs to make sure the scroll does not propagate to the |
| // container. |
| await conditionHolds(() => { return container.scrollTop == 0; }); |
| |
| // Flinging list past the end should scroll container div when starting at |
| // scroll extent. |
| await swipe(60, gestureX, gestureY, "up", SPEED_INSTANT); |
| await waitForAnimationEnd(() => { return container.scrollTop; }, 700, 20); |
| assert_greater_than(container.scrollTop, 60); |
| assert_equals(box.scrollTop, fullyScrolled); |
| }, "fling gestures on a list box"); |
| |
| promise_test (async () => { |
| resetScroll(); |
| assert_equals(box.scrollTop, 0); |
| assert_equals(container.scrollTop, 0); |
| |
| await smoothScroll(3 * itemHeight + 6, gestureX, gestureY, |
| GestureSourceType.TOUCH_INPUT, "down"); |
| await waitFor(() => { |
| return approx_equals(3 * itemHeight + 6, box.scrollTop, 2); |
| }); |
| assert_equals(container.scrollTop, 0); |
| |
| resetScroll(); |
| assert_equals(box.scrollTop, 0); |
| |
| await smoothScroll(fullyScrolled + 50, gestureX, gestureY, |
| GestureSourceType.TOUCH_INPUT, "down"); |
| await waitFor(() => { return box.scrollTop == fullyScrolled; }); |
| // Wait for 100 RAFs to make sure the scroll does not propagate to the main |
| // frame. |
| await conditionHolds(() => { return container.scrollTop == 0; }); |
| |
| // Gesture scrolling list past the end should scroll container div when |
| // starting at scroll extent. |
| await smoothScroll(fullyScrolled + 50, gestureX, gestureY, |
| GestureSourceType.TOUCH_INPUT, "down"); |
| await waitFor(() => { |
| return approx_equals(fullyScrolled + 50, container.scrollTop, 2); |
| }); |
| }, "gesture scroll on a list box"); |
| |
| promise_test (async () => { |
| resetScroll(); |
| assert_equals(box.scrollTop, 0); |
| assert_equals(container.scrollTop, 0); |
| |
| await smoothScroll(60, gestureX, gestureY, |
| GestureSourceType.TOUCH_INPUT, "right"); |
| await waitFor(() => { return approx_equals(60, container.scrollLeft, 2); }); |
| assert_equals(box.scrollLeft, 0, |
| "Horizontal scrolls should not affect listbox"); |
| }, "Horizontal scroll on a list box"); |
| </script> |
