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
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
|
<!doctype html>
<title>touch-action behavior with swipe direction changes</title>
<meta name="variant" content="?touch">
<meta name="viewport" content="width=device-width">
<link rel="help" href="https://w3c.github.io/pointerevents/#determining-supported-direct-manipulation-behavior" />
<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="pointerevent_support.js"></script>
<style>
#target {
width: 200px;
height: 200px;
overflow: scroll;
}
#spacer {
width: 400px;
height: 400px;
}
#done {
width: 100px;
height: 100px;
}
</style>
<div id="target">
<div id="spacer"></div>
</div>
<div id="done"></div>
<script>
"use strict";
const pointer_type = "touch";
const target = document.getElementById("target");
const done = document.getElementById("done");
assert_true(location.search.length > 0 &&
location.search.substring(1) === pointer_type,
"Test URL has 'touch' pointer-type");
/*
For each promise_test, we have these 5 parameters in order:
- touch-action value to test,
- a list of directions ("right" or "down") in the swipe to test,
- whether scrollLeft change is expected, and
- whether scrollTop change is expected.
*/
const promise_test_params = [
["auto", ["right", "down"], true, true ],
["auto", ["down", "right"], true, true ],
["pan-x", ["right", "down"], true, false],
["pan-x", ["down", "right"], false, false],
["pan-y", ["right", "down"], false, false],
["pan-y", ["down", "right"], false, true ],
["none" , ["right", "down"], false, false],
["none" , ["down", "right"], false, false],
];
function appendSwipeActions(actions, directions) {
const deltas = {
"right": [30, 0],
"down": [0, 30],
}
let pos = [0, 0];
for (const direction of directions) {
// Move three steps along each direction.
for (let i = 0; i < 3; i++) {
pos[0] += deltas[direction][0];
pos[1] += deltas[direction][1];
actions = actions.pointerMove(pos[0], pos[1], {origin: target});
}
}
return actions;
}
for (let i = 0; i < promise_test_params.length; i++) {
let [touch_action, directions, left_change_expected, top_change_expected]
= promise_test_params[i];
promise_test(async () => {
target.style.touchAction = touch_action;
// Reset the scroll position to 50% mark on both axes.
target.scrollLeft = 100;
target.scrollTop = 100;
const done_pointerup_promise = getEvent("pointerup", done);
let actions = new test_driver.Actions()
.addPointer("TestPointer", pointer_type)
.pointerMove(0, 0, {origin: target})
.pointerDown();
actions = appendSwipeActions(actions, directions);
actions = actions.pointerUp()
.pointerMove(0, 0, {origin: done})
.pointerDown()
.pointerUp()
await actions.send();
await done_pointerup_promise;
if (left_change_expected) {
assert_less_than(target.scrollLeft, 100, "scrollLeft should change");
} else {
assert_equals(target.scrollLeft, 100, "scrollLeft should not change");
}
if (top_change_expected) {
assert_less_than(target.scrollTop, 100, "scrollTop should change");
} else {
assert_equals(target.scrollTop, 100, "scrollTop should not change");
}
}, `touch-action:${touch_action} with ${directions} swipe`);
}
</script>
|
