1<!DOCTYPE HTML>
2<script src="/resources/testharness.js"></script>
3<script src="/resources/testharnessreport.js"></script>
4<script src="/resources/testdriver.js"></script>
5<script src="/resources/testdriver-actions.js"></script>
6<script src="/resources/testdriver-vendor.js"></script>
7<script src="scroll_support.js"></script>
8<style>
9#targetDiv {
10  width: 500px;
11  height: 500px;
12  background: red;
13}
14html, body {
15  /* Prevent any built-in browser overscroll features from consuming the scroll
16   * deltas */
17  overscroll-behavior: none;
18}
19
20</style>
21
22<body style="margin:0;" onload=runTest()>
23<div id="targetDiv">
24</div>
25</body>
26
27<script>
28var target_div = document.getElementById('targetDiv');
29var overscrolled_x_deltas = [];
30var overscrolled_y_deltas = [];
31var scrollend_received = false;
32
33function onOverscroll(event) {
34  overscrolled_x_deltas.push(event.deltaX);
35  overscrolled_y_deltas.push(event.deltaY);
36}
37
38function onScrollend(event) {
39  scrollend_received = true;
40}
41
42document.addEventListener("overscroll", onOverscroll);
43document.addEventListener("scrollend", onScrollend);
44
45function runTest() {
46  promise_test (async (t) => {
47    await waitForCompositorCommit();
48
49    // Scroll up on target div and wait for the doc to get overscroll event.
50    await touchScrollInTarget(300, target_div, 'up');
51    await waitFor(() => { return scrollend_received; },
52        'Document did not receive scrollend event.');
53
54    // Even though we request 300 pixels of scroll, the API above doesn't
55    // guarantee how much scroll delta will be generated - different browsers
56    // can consume different amounts for "touch slop" (for example). Ensure the
57    // overscroll reaches at least 100 pixels which is a fairly conservative
58    // value.
59    assert_greater_than(overscrolled_y_deltas.length, 0, "There should be at least one overscroll events when overscrolling.");
60    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.");
61    assert_less_than_equal(Math.max(...overscrolled_y_deltas), 0, "The deltaY attribute must be <= 0 when there is overscrolling in up direction.");
62    assert_less_than_equal(Math.min(...overscrolled_y_deltas),-100, "The deltaY attribute must be the number of pixels overscrolled.");
63
64    await waitForCompositorCommit();
65    overscrolled_x_deltas = [];
66    overscrolled_y_deltas = [];
67    scrollend_received = false;
68
69    // Scroll left on target div and wait for the doc to get overscroll event.
70    await touchScrollInTarget(300, target_div, 'left');
71    await waitFor(() => { return scrollend_received; },
72        'Document did not receive scrollend event.');
73
74    // TODO(bokan): It looks like Chrome inappropriately filters some scroll
75    // events despite |overscroll-behavior| being set to none. The overscroll
76    // amount here has been loosened but this should be fixed in Chrome.
77    // https://crbug.com/1112183.
78    assert_greater_than(overscrolled_y_deltas.length, 0, "There should be at least one overscroll events when overscrolling.");
79    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.");
80    assert_less_than_equal(Math.max(...overscrolled_x_deltas), 0, "The deltaX attribute must be <= 0 when there is overscrolling in left direction.");
81    assert_less_than_equal(Math.min(...overscrolled_x_deltas),-50, "The deltaX attribute must be the number of pixels overscrolled.");
82
83  }, 'Tests that the document gets overscroll event with right deltaX/Y attributes.');
84}
85</script>
86