1<!DOCTYPE HTML>
2<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1">
3<script src="/resources/testharness.js"></script>
4<script src="/resources/testharnessreport.js"></script>
5<script src="/resources/testdriver.js"></script>
6<script src="/resources/testdriver-actions.js"></script>
7<script src="/resources/testdriver-vendor.js"></script>
8<script src="scroll_support.js"></script>
9<style>
10#overscrollXDiv {
11  width: 600px;
12  height: 600px;
13  overflow: scroll;
14  overscroll-behavior-x: contain;
15}
16#overscrollYDiv {
17  width: 500px;
18  height: 500px;
19  overflow: scroll;
20  overscroll-behavior-y: none;
21}
22#targetDiv {
23  width: 400px;
24  height: 400px;
25  overflow: scroll;
26}
27.content {
28  width:800px;
29  height:800px;
30}
31</style>
32
33<body style="margin:0" onload=runTest()>
34<div id="overscrollXDiv">
35  <div class=content>
36    <div id="overscrollYDiv">
37      <div class=content>
38        <div id="targetDiv">
39          <div class="content">
40          </div>
41        </div>
42      </div>
43    </div>
44  </div>
45</div>
46</body>
47
48<script>
49var target_div = document.getElementById('targetDiv');
50var horizontal_scrollend_arrived = false;
51var vertical_scrollend_arrived = false;
52function onHorizontalScrollEnd(event) {
53  assert_false(event.cancelable);
54  assert_false(event.bubbles);
55  horizontal_scrollend_arrived = true;
56}
57function onVerticalScrollEnd(event) {
58  assert_false(event.cancelable);
59  assert_false(event.bubbles);
60  vertical_scrollend_arrived = true;
61}
62// Test that both "onscrollend" and addEventListener("scrollend"... work.
63document.getElementById('overscrollXDiv').onscrollend = onHorizontalScrollEnd;
64document.getElementById('overscrollYDiv').
65    addEventListener("scrollend", onVerticalScrollEnd);
66
67function runTest() {
68  promise_test (async (t) => {
69    // Make sure that no scrollend event is sent to document or target_div.
70    document.addEventListener("scrollend",
71        t.unreached_func("Document got unexpected scrollend event."));
72    target_div.addEventListener("scrollend",
73        t.unreached_func("target_div got unexpected scrollend event."));
74    await waitForCompositorCommit();
75
76    // Scroll left on target div and wait for the element with overscroll-x to
77    // get scrollend event.
78    await touchScrollInTarget(300, target_div, 'left');
79    await waitFor(() => { return horizontal_scrollend_arrived; },
80        'Expected element did not receive scrollend event after scroll left ' +
81        'on target.');
82    assert_equals(target_div.scrollLeft, 0);
83
84    let touchEndPromise = new Promise((resolve) => {
85      target_div.addEventListener("touchend", resolve);
86    });
87    await touchScrollInTarget(300, target_div, 'up');
88
89    // The scrollend event should never be fired before the gesture has completed.
90    await touchEndPromise;
91
92    // Ensure we wait at least a tick after the touch end.
93    await waitForCompositorCommit();
94
95    // We should not trigger a scrollend event for a scroll that did not change
96    // the scroll position.
97    assert_equals(vertical_scrollend_arrived, false);
98    assert_equals(target_div.scrollTop, 0);
99  }, 'Tests that the last element in the cut scroll chain gets scrollend ' +
100     'event when no element scrolls by touch.');
101}
102</script>
103