| <!DOCTYPE HTML> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <script src="/resources/testdriver.js"></script> |
| <script src="/resources/testdriver-actions.js"></script> |
| <script src="/resources/testdriver-vendor.js"></script> |
| <script src="scroll_support.js"></script> |
| <style> |
| #targetDiv { |
| width: 500px; |
| height: 500px; |
| background: red; |
| } |
| html, body { |
| /* Prevent any built-in browser overscroll features from consuming the scroll |
| * deltas */ |
| overscroll-behavior: none; |
| } |
| |
| </style> |
| |
| <body style="margin:0;" onload=runTest()> |
| <div id="targetDiv"> |
| </div> |
| </body> |
| |
| <script> |
| var target_div = document.getElementById('targetDiv'); |
| var overscrolled_x_deltas = []; |
| var overscrolled_y_deltas = []; |
| var scrollend_received = false; |
| |
| function onOverscroll(event) { |
| overscrolled_x_deltas.push(event.deltaX); |
| overscrolled_y_deltas.push(event.deltaY); |
| } |
| |
| function onScrollend(event) { |
| scrollend_received = true; |
| } |
| |
| document.addEventListener("overscroll", onOverscroll); |
| document.addEventListener("scrollend", onScrollend); |
| |
| function runTest() { |
| promise_test (async (t) => { |
| await waitForCompositorCommit(); |
| |
| // Scroll up on target div and wait for the doc to get overscroll event. |
| await touchScrollInTarget(300, target_div, 'up'); |
| await waitFor(() => { return scrollend_received; }, |
| 'Document did not receive scrollend event.'); |
| |
| // Even though we request 300 pixels of scroll, the API above doesn't |
| // guarantee how much scroll delta will be generated - different browsers |
| // can consume different amounts for "touch slop" (for example). Ensure the |
| // overscroll reaches at least 100 pixels which is a fairly conservative |
| // value. |
| assert_greater_than(overscrolled_y_deltas.length, 0, "There should be at least one overscroll events when overscrolling."); |
| assert_equals(overscrolled_x_deltas.filter(function(x){ return x!=0; }).length, 0, "The deltaX attribute must be 0 when there is no scrolling in x direction."); |
| assert_less_than_equal(Math.max(...overscrolled_y_deltas), 0, "The deltaY attribute must be <= 0 when there is overscrolling in up direction."); |
| assert_less_than_equal(Math.min(...overscrolled_y_deltas),-100, "The deltaY attribute must be the number of pixels overscrolled."); |
| |
| await waitForCompositorCommit(); |
| overscrolled_x_deltas = []; |
| overscrolled_y_deltas = []; |
| scrollend_received = false; |
| |
| // Scroll left on target div and wait for the doc to get overscroll event. |
| await touchScrollInTarget(300, target_div, 'left'); |
| await waitFor(() => { return scrollend_received; }, |
| 'Document did not receive scrollend event.'); |
| |
| // TODO(bokan): It looks like Chrome inappropriately filters some scroll |
| // events despite |overscroll-behavior| being set to none. The overscroll |
| // amount here has been loosened but this should be fixed in Chrome. |
| // https://crbug.com/1112183. |
| assert_greater_than(overscrolled_y_deltas.length, 0, "There should be at least one overscroll events when overscrolling."); |
| assert_equals(overscrolled_y_deltas.filter(function(x){ return x!=0; }).length, 0, "The deltaY attribute must be 0 when there is no scrolling in y direction."); |
| assert_less_than_equal(Math.max(...overscrolled_x_deltas), 0, "The deltaX attribute must be <= 0 when there is overscrolling in left direction."); |
| assert_less_than_equal(Math.min(...overscrolled_x_deltas),-50, "The deltaX attribute must be the number of pixels overscrolled."); |
| |
| }, 'Tests that the document gets overscroll event with right deltaX/Y attributes.'); |
| } |
| </script> |
