| <!DOCTYPE html> |
| <script src="../../../../resources/testharness.js"></script> |
| <script src="../../../../resources/testharnessreport.js"></script> |
| <script src="../../../../resources/compositor-controls.js"></script> |
| <script src="../../../../resources/gesture-util.js"></script> |
| <body style="margin:0"> |
| <div id="container" style="width: 500px; height: 200px; overflow-y: scroll; overflow-x: scroll"> |
| <form> |
| <input id="box" size="10" style="height:100px; font-size:xx-large" type="text" value="asasd;flkajsd;flkasjdf;alksdjf;alskdfja;lksdja;sdlfjkas;ldkf"></input> |
| </form> |
| <div style="background: green; height: 1000px; width: 1000px"></div> |
| </div> |
| </body> |
| |
| <script type="text/javascript"> |
| setAnimationRequiresRaster(); |
| var gestureX = 100; |
| var gestureY = 50; |
| var box = document.getElementById("box"); |
| var container = document.getElementById("container"); |
| var fullyScrolled; |
| |
| function calculateFullScroll() { |
| fullyScrolled = box.scrollWidth - box.clientWidth; |
| |
| // FIXME: Mac has a quirk where the text box text can actually be scrolled a little bit |
| // past the end. That is, scrollLeft = (scrollWidth - clientWidth) + 2 on Mac. Once |
| // this is fixed we can remove this adjustment. |
| box.scrollLeft = 100000; |
| fullyScrolled += box.scrollLeft - fullyScrolled; |
| |
| resetScroll(); |
| } |
| |
| calculateFullScroll(); |
| |
| function resetScroll() { |
| container.scrollLeft = 0; |
| box.scrollLeft = 0; |
| container.scrollTop = 0; |
| box.scrollTop = 0; |
| } |
| |
| promise_test (async () => { |
| resetScroll(); |
| assert_equals(box.scrollLeft, 0); |
| assert_equals(container.scrollLeft, 0); |
| |
| await swipe(40, gestureX, gestureY, "left", SPEED_INSTANT); |
| await waitFor(() => { return box.scrollLeft > 40} ); |
| assert_equals(container.scrollLeft, 0); |
| |
| resetScroll(); |
| assert_equals(box.scrollTop, 0); |
| |
| // Flinging input text past the scrollable width shouldn't scroll containing |
| // div. |
| await swipe(fullyScrolled + 500, gestureX, gestureY, "left", SPEED_INSTANT); |
| await waitFor(() => { return box.scrollLeft == fullyScrolled; }); |
| // Wait for 100 RAFs to make sure the scroll does not propagate to the |
| // container. |
| await conditionHolds(() => { return container.scrollLeft == 0; }); |
| |
| // Flinging fully scrolled input text should fling containing div. |
| await swipe(60, gestureX, gestureY, "left", SPEED_INSTANT); |
| await waitForAnimationEnd(() => { return container.scrollLeft; }, 700, 20); |
| assert_greater_than(container.scrollLeft, 60); |
| assert_equals(box.scrollLeft, fullyScrolled); |
| }, "gesture fling on input field"); |
| |
| promise_test (async () => { |
| resetScroll(); |
| assert_equals(box.scrollLeft, 0); |
| assert_equals(container.scrollLeft, 0); |
| |
| // Gesture scrolling input text should scroll text the specified amount. |
| await smoothScroll(60, gestureX, gestureY, GestureSourceType.TOUCH_INPUT, |
| "right"); |
| await waitFor(() => { |
| return approx_equals(60, box.scrollLeft, 2); |
| }); |
| assert_equals(container.scrollLeft, 0); |
| |
| resetScroll(); |
| |
| // Gesture scrolling input text past scroll width shouldn't scroll container |
| // div. |
| await smoothScroll(fullyScrolled + 50, gestureX, gestureY, |
| GestureSourceType.TOUCH_INPUT, "right"); |
| await waitFor(() => { return box.scrollLeft == fullyScrolled; }); |
| assert_equals(container.scrollLeft, 0); |
| }, "gesture scroll on input field"); |
| |
| promise_test (async () => { |
| resetScroll(); |
| assert_equals(box.scrollTop, 0); |
| assert_equals(container.scrollTop, 0); |
| |
| // Vertically gesture scrolling input text should scroll containing div the |
| // specified amount. |
| await smoothScroll(60, gestureX, gestureY, GestureSourceType.TOUCH_INPUT, |
| "down"); |
| await waitFor(() => { |
| return approx_equals(60, container.scrollTop, 2); |
| }); |
| assert_equals(box.scrollTop, 0); |
| |
| resetScroll(); |
| assert_equals(box.scrollTop, 0); |
| assert_equals(container.scrollTop, 0); |
| // Vertically flinging input text should scroll the containing div the |
| // specified amount. |
| 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, 0); |
| }, "vertical scroll on input feild"); |
| |
| promise_test (async () => { |
| box.value = "short"; |
| assert_equals(box.scrollLeft, 0); |
| assert_equals(container.scrollLeft, 0); |
| assert_greater_than_equal(box.clientWidth, box.scrollWidth); |
| |
| await smoothScroll(60, gestureX, gestureY, GestureSourceType.TOUCH_INPUT, |
| "right"); |
| await waitFor(() => { |
| return approx_equals(60, container.scrollLeft, 2); |
| }); |
| assert_equals(box.scrollLeft, 0); |
| }, "non-overflow scroll behavior"); |
| </script> |
