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
|
<!doctype html>
<html>
<head>
<title>Manual test for the target of predicted and coalesced events</title>
<script>
let counter = 0;
let host;
let shadowDiv;
function end(succeeded, txt) {
host.removeEventListener("pointermove", moveListener);
shadowDiv.removeEventListener("pointermove", moveListener);
host.firstChild.textContent = txt;
if (succeeded) {
host.style.backgroundColor = "green";
} else {
host.style.backgroundColor = "red";
}
}
function moveListener(event) {
if (++counter > 50) {
host.removeEventListener("pointermove", moveListener);
shadowDiv.removeEventListener("pointermove", moveListener);
host.firstChild.textContent = "done";
end(true, "succeeded");
}
let cEvents = event.getCoalescedEvents();
for (e of cEvents) {
if (e.target != event.target) {
end(false, "Coalesced events should have the same target as the parent event! " + e.target.id + "!=" + event.target.id);
return;
}
}
let pEvents = event.getPredictedEvents();
for (e of pEvents) {
if (e.target != event.target) {
end(false, "Predicted events should have the same target as the parent event! " + e.target.id + "!=" + event.target.id);
return;
}
}
}
function init() {
host = document.getElementsByTagName("div")[0];
let sr = host.attachShadow({mode: "open"});
sr.innerHTML = '<div id="shadowDiv" style="border: 2px solid green; width: 200px; height: 200px;""><slot></slot></div>';
shadowDiv = sr.firstChild;
host.addEventListener("pointermove", moveListener);
shadowDiv.addEventListener("pointermove", moveListener);
}
</script>
</head>
<body onload="init()">
<div id="host" style="border: 2px solid blue; width: 204px; height: 204px;">
Move the pointer fast over this area.
</div>
</body>
</html>
|
