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
|
<!doctype html>
<html>
<head>
<title>Pointer Events boundary events in capturing tests</title>
<meta name="viewport" content="width=device-width">
<meta name="variant" content="?mouse">
<meta name="variant" content="?touch">
<meta name="variant" content="?pen">
<link rel="stylesheet" type="text/css" href="pointerevent_styles.css">
<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>
</head>
<body>
<h1>Pointer Events boundary events in capturing</h1>
<h2 id="pointerTypeDescription"></h2>
<h4 id="desc">
This automated test checks the boundary events of pointer events while the capturing
changes. This test cannot be run manually.
</h4>
<div id="target0" class="touchActionNone"></div>
<div id="capturer">Do not hover over or touch this element.</div>
<div id="log"></div>
</body>
<script>
let input_source = location.search.substring(1);
let events_received = [];
let log_events = false;
// The events are handled as follows:
// - When "target0" receives a "pointerdown", the pointer is captured to "capturer" and event
// logging starts.
// - During event logging, all boundary events and "got/lostpointercapture" events to both
// "target0" and "capturer" are logged.
// - The first "pointermove" at "capturer" releases the pointer capture, so that subsequent
// "pointermove"/"pointerup" events go to "target0".
// - Event logging ends when "target0" receives a "pointerup".
function logEvent(event, element) {
if (log_events)
events_received.push(event.type + "@" + element.id);
}
let target0 = document.getElementById("target0");
let capturer = document.getElementById("capturer");
target0.addEventListener("pointerdown", event => {
capturer.setPointerCapture(event.pointerId);
});
capturer.addEventListener("pointermove", event => {
if (capturer.hasPointerCapture(event.pointerId))
capturer.releasePointerCapture(event.pointerId);
});
let other_event_types = [ "pointercancel",
"pointerover", "pointerout", "pointerenter", "pointerleave",
"gotpointercapture", "lostpointercapture" ];
other_event_types.forEach(event_name => {
[target0, capturer].forEach(target => {
target.addEventListener(event_name, event => logEvent(event, target));
});
});
promise_test(async () => {
// Start logging events after the pointerdown in the drag.
getEvent("pointerdown", target0).then(() => {
log_events = true;
});
let pointerup_promise = getEvent("pointerup", target0);
pointerup_promise.then(() => {
log_events = false;
});
await pointerDragInTarget(input_source, target0, "right");
// Wait for all events in the drag to have been dispatched.
await pointerup_promise;
const expected_events = [
"pointerout@target0", "pointerleave@target0",
"pointerover@capturer", "pointerenter@capturer",
"gotpointercapture@capturer",
"lostpointercapture@capturer",
"pointerout@capturer", "pointerleave@capturer",
"pointerover@target0", "pointerenter@target0"
];
assert_array_equals(events_received, expected_events);
updateDescriptionComplete();
}, "Boundary events around pointer capture and release");
</script>
</html>
|
