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#targetDiv {
11  width: 200px;
12  height: 200px;
13  overflow: scroll;
14}
15
16#innerDiv {
17  width: 500px;
18  height: 4000px;
19}
20</style>
21
22<body style="margin:0" onload=runTest()>
23<div id="targetDiv">
24  <div id="innerDiv">
25  </div>
26</div>
27</body>
28
29<script>
30const target_div = document.getElementById('targetDiv');
31let scrollend_arrived = false;
32let scrollend_event_count = 0;
33
34function onScrollEnd(event) {
35  assert_false(event.cancelable);
36  assert_false(event.bubbles);
37  scrollend_arrived = true;
38  scrollend_event_count += 1;
39}
40
41function runTest() {
42  promise_test (async (t) => {
43    // Make sure that no scrollend event is sent to document.
44    document.addEventListener("scrollend",
45        t.unreached_func("document got unexpected scrollend event."));
46    await waitForCompositorCommit();
47
48    // Scroll down & up & down on target div and wait for the target_div to get scrollend event.
49    target_div.addEventListener("scrollend", onScrollEnd);
50    const move_path = [
51      { x: 0, y: -300}, // down
52      { x: 0, y: -100}, // up
53      { x: 0, y: -400}, // down
54      { x: 0, y: -200}, // up
55    ];
56    await touchScrollInTargetSequentiallyWithPause(target_div, move_path, 150);
57
58    await waitFor(() => {return scrollend_arrived;},
59        'target_div did not receive scrollend event after sequence of scrolls on target.');
60    assert_equals(scrollend_event_count, 1);
61  }, "Move down, up and down again, receive scrollend event only once");
62}
63</script>
64