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>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width; initial-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 type="application/javascript" 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");
}
function* test(testDriver) {
var target = document.getElementById('target');
document.body.addEventListener('touchend', testDriver, { passive: true });
// drag the page up to scroll down by 50px
yield ok(synthesizeNativeTouchDrag(target, 10, 100, 0, -(50 + TOUCH_SLOP)),
"Synthesized native vertical drag (1), waiting for touch-end event...");
yield flushApzRepaints(testDriver);
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...");
yield waitForAllPaintsFlushed(function() {
flushApzRepaints(testDriver);
});
// drag the page up to scroll down by 50px, but it won't happen because pan-x
yield ok(synthesizeNativeTouchDrag(target, 10, 100, 0, -(50 + TOUCH_SLOP)),
"Synthesized native vertical drag (2), waiting for touch-end event...");
yield flushApzRepaints(testDriver);
checkScroll(0, 50, "After second vertical drag, with pan-x");
// drag the page left to scroll right by 50px
yield ok(synthesizeNativeTouchDrag(target, 100, 10, -(50 + TOUCH_SLOP), 0),
"Synthesized horizontal drag (1), waiting for touch-end event...");
yield flushApzRepaints(testDriver);
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
yield ok(synthesizeNativeTouchDrag(target, 10, 10, (40 + TOUCH_SLOP), (40 + TOUCH_SLOP)),
"Synthesized diagonal drag (1), waiting for touch-end event...");
yield flushApzRepaints(testDriver);
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...");
yield waitForAllPaintsFlushed(function() {
flushApzRepaints(testDriver);
});
// drag the page diagonally right/down to scroll up/left by 40px each axis;
// only the y-axis will actually scroll because pan-y
yield ok(synthesizeNativeTouchDrag(target, 10, 10, (40 + TOUCH_SLOP), (40 + TOUCH_SLOP)),
"Synthesized diagonal drag (2), waiting for touch-end event...");
yield flushApzRepaints(testDriver);
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...");
yield waitForAllPaintsFlushed(function() {
flushApzRepaints(testDriver);
});
// drag the page diagonally up/left to scroll down/right by 40px each axis;
// neither will scroll because of touch-action
yield ok(synthesizeNativeTouchDrag(target, 100, 100, -(40 + TOUCH_SLOP), -(40 + TOUCH_SLOP)),
"Synthesized diagonal drag (3), waiting for touch-end event...");
yield flushApzRepaints(testDriver);
checkScroll(10, 10, "After third diagonal drag, with none");
document.body.style.touchAction = 'manipulation';
ok(true, "Waiting for manipulation to propagate...");
yield waitForAllPaintsFlushed(function() {
flushApzRepaints(testDriver);
});
// drag the page diagonally up/left to scroll down/right by 40px each axis;
// both will scroll because of touch-action
yield ok(synthesizeNativeTouchDrag(target, 100, 100, -(40 + TOUCH_SLOP), -(40 + TOUCH_SLOP)),
"Synthesized diagonal drag (4), waiting for touch-end event...");
yield flushApzRepaints(testDriver);
checkScroll(50, 50, "After fourth diagonal drag, with manipulation");
}
waitUntilApzStable()
.then(runContinuation(test))
.then(subtestDone);
</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>
|
