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>
10html, body {
11  margin: 0
12}
13
14body {
15  height: 3000px;
16  width: 3000px;
17}
18
19#targetDiv {
20  width: 200px;
21  height: 200px;
22  overflow: scroll;
23}
24
25#innerDiv {
26  width: 400px;
27  height: 400px;
28}
29</style>
30
31<body onload=runTest() onscrollend="failOnScrollEnd(event)">
32<div id="targetDiv" onscrollend="onElementScrollEnd(event)">
33  <div id="innerDiv">
34  </div>
35</div>
36</body>
37<script>
38let element_scrollend_arrived = false;
39
40function onElementScrollEnd(event) {
41  assert_false(event.cancelable);
42  assert_false(event.bubbles);
43  element_scrollend_arrived = true;
44}
45
46function failOnScrollEnd(event) {
47  assert_true(false, "Scrollend should not be called on: " + event.target);
48}
49
50function runTest() {
51  let target_div = document.getElementById("targetDiv");
52
53  promise_test (async (t) => {
54    await waitForCompositorCommit();
55
56    target_div.scrollTo({top: 200, left: 200});
57    await waitFor(() => { return element_scrollend_arrived; },
58                  target_div.tagName + " did not receive scrollend event.");
59    assert_equals(target_div.scrollLeft, 200, target_div.tagName + " scrollLeft");
60    assert_equals(target_div.scrollTop, 200, target_div.tagName + " scrollTop");
61  }, "Tests scrollend event is handled by event handler content attribute.");
62
63  promise_test (async (t) => {
64    await waitForCompositorCommit();
65
66    document.scrollingElement.scrollTo({top: 200, left: 200});
67    // The document body onscrollend event handler content attribute will fail
68    // here, if it is fired.
69    await waitForCompositorCommit();
70    assert_equals(document.scrollingElement.scrollLeft, 200,
71                  "Document scrolled on horizontal axis");
72    assert_equals(document.scrollingElement.scrollTop, 200,
73                  "Document scrolled on vertical axis");
74  }, "Tests scrollend event is not fired to document body event handler content attribute.");
75
76  promise_test (async (t) => {
77    await waitForCompositorCommit();
78
79    // Reset the scroll position.
80    document.scrollingElement.scrollTo({top: 0, left: 0});
81
82    let scrollend_event = new Promise(resolve => document.onscrollend = resolve);
83    document.scrollingElement.scrollTo({top: 200, left: 200});
84    await scrollend_event;
85
86    assert_equals(document.scrollingElement.scrollTop, 200,
87                  "Document scrolled on horizontal axis");
88    assert_equals(document.scrollingElement.scrollLeft, 200,
89                  "Document scrolled on vertical axis");
90  }, "Tests scrollend event is fired to document event handler property");
91
92  promise_test (async (t) => {
93    await waitForCompositorCommit();
94
95    // Reset the scroll position.
96    target_div.scrollTo({top: 0, left: 0});
97
98    let scrollend_event = new Promise(resolve => target_div.onscrollend = resolve);
99    target_div.scrollTo({top: 200, left: 200});
100    await scrollend_event;
101
102    assert_equals(target_div.scrollLeft, 200,
103                  target_div.tagName + " scrolled on horizontal axis");
104    assert_equals(target_div.scrollLeft, 200,
105                  target_div.tagName + " scrolled on vertical axis");
106  }, "Tests scrollend event is fired to element event handler property");
107}
108</script>
109