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
116
117
118
119
120
121
122
123
|
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width; initial-scale=1.0,minimum-scale=1.0">
<title>Sanity touch-action test</title>
<script type="application/javascript" src="apz_test_native_event_utils.js"></script>
<script type="application/javascript" src="apz_test_utils.js"></script>
<script src="/tests/SimpleTest/paint_listener.js"></script>
<script type="application/javascript">
function checkScroll(x, y, desc) {
is(window.scrollX, x, desc + " - x axis");
is(window.scrollY, y, desc + " - y axis");
}
async function test() {
var target = document.getElementById("target");
// drag the page up to scroll down by 50px
let touchEndPromise = promiseTouchEnd(document.body);
ok(synthesizeNativeTouchDrag(target, 10, 100, 0, -50),
"Synthesized native vertical drag (1), waiting for touch-end event...");
await touchEndPromise;
await promiseApzRepaintsFlushed();
checkScroll(0, 50, "After first vertical drag, with pan-y" );
// switch style to pan-x
document.body.style.touchAction = "pan-x";
ok(true, "Waiting for pan-x to propagate...");
await promiseAllPaintsDone(null, true);
await promiseApzRepaintsFlushed();
// drag the page up to scroll down by 50px, but it won't happen because pan-x
touchEndPromise = promiseTouchEnd(document.body);
ok(synthesizeNativeTouchDrag(target, 10, 100, 0, -50),
"Synthesized native vertical drag (2), waiting for touch-end event...");
await touchEndPromise;
await promiseApzRepaintsFlushed();
checkScroll(0, 50, "After second vertical drag, with pan-x");
// drag the page left to scroll right by 50px
touchEndPromise = promiseTouchEnd(document.body);
ok(synthesizeNativeTouchDrag(target, 100, 10, -50, 0),
"Synthesized horizontal drag (1), waiting for touch-end event...");
await touchEndPromise;
await promiseApzRepaintsFlushed();
checkScroll(50, 50, "After first horizontal drag, with pan-x");
// drag the page diagonally right/down to scroll up/left by 40px each axis;
// only the x-axis will actually scroll because pan-x
touchEndPromise = promiseTouchEnd(document.body);
ok(synthesizeNativeTouchDrag(target, 10, 10, 40, 40),
"Synthesized diagonal drag (1), waiting for touch-end event...");
await touchEndPromise;
await promiseApzRepaintsFlushed();
checkScroll(10, 50, "After first diagonal drag, with pan-x");
// switch style back to pan-y
document.body.style.touchAction = "pan-y";
ok(true, "Waiting for pan-y to propagate...");
await promiseAllPaintsDone(null, true);
await promiseApzRepaintsFlushed();
// drag the page diagonally right/down to scroll up/left by 40px each axis;
// only the y-axis will actually scroll because pan-y
touchEndPromise = promiseTouchEnd(document.body);
ok(synthesizeNativeTouchDrag(target, 10, 10, 40, 40),
"Synthesized diagonal drag (2), waiting for touch-end event...");
await touchEndPromise;
await promiseApzRepaintsFlushed();
checkScroll(10, 10, "After second diagonal drag, with pan-y");
// switch style to none
document.body.style.touchAction = "none";
ok(true, "Waiting for none to propagate...");
await promiseAllPaintsDone(null, true);
await promiseApzRepaintsFlushed();
// drag the page diagonally up/left to scroll down/right by 40px each axis;
// neither will scroll because of touch-action
touchEndPromise = promiseTouchEnd(document.body);
ok(synthesizeNativeTouchDrag(target, 100, 100, -40, -40),
"Synthesized diagonal drag (3), waiting for touch-end event...");
await touchEndPromise;
await promiseApzRepaintsFlushed();
checkScroll(10, 10, "After third diagonal drag, with none");
document.body.style.touchAction = "manipulation";
ok(true, "Waiting for manipulation to propagate...");
await promiseAllPaintsDone(null, true);
await promiseApzRepaintsFlushed();
// drag the page diagonally up/left to scroll down/right by 40px each axis;
// both will scroll because of touch-action
touchEndPromise = promiseTouchEnd(document.body);
ok(synthesizeNativeTouchDrag(target, 100, 100, -40, -40),
"Synthesized diagonal drag (4), waiting for touch-end event...");
await touchEndPromise;
await promiseApzRepaintsFlushed();
checkScroll(50, 50, "After fourth diagonal drag, with manipulation");
}
waitUntilApzStable()
.then(test)
.then(subtestDone, subtestFailed);
</script>
</head>
<body style="touch-action: pan-y">
<div style="width: 5000px; height: 5000px; background-color: lightgreen;">
This div makes the page scrollable on both axes.<br>
This is the second line of text.<br>
This is the third line of text.<br>
This is the fourth line of text.
</div>
<!-- This fixed-position div remains in the same place relative to the browser chrome, so we
can use it as a targeting device for synthetic touch events. The body will move around
as we scroll, so we'd have to be constantly adjusting the synthetic drag coordinates
if we used that as the target element. -->
<div style="position:fixed; left: 10px; top: 10px; width: 1px; height: 1px" id="target"></div>
</body>
</html>
|
