1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
|
<!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>
|
