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
|
<!DOCTYPE HTML>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/testdriver.js"></script>
<script src="/resources/testdriver-vendor.js"></script>
<script src="/resources/testdriver-actions.js"></script>
<script type="text/javascript" src="../pointerevent_support.js"></script>
<!-- There are significant differences in how browsers fire pointer events and
compat mouse events when elements are removed from the dom.
There is a discussion about the order of pointer events and mouse compat events
for this scenario in the pointer event working group (See link below)-->
<link rel="help" href="https://github.com/w3c/pointerevents/issues/285">
<style>
div.box {
margin: 5px;
padding: 20px;
float: left;
background-color:green;
}
#grey {
width: 50px;
height: 50px;
}
</style>
<h1>Verifies the compatibility mouse events are sent correctly when the node is deleted on pointer event handler.</h1>
<div id="grey" class="box" style="background-color:grey">
</div>
<button id="done">Done</button>
<div id="console"></div>
<script>
var receivedEvents = [];
var done_clicked = false;
var eventList = ["mousedown", "mouseup", "mousemove",
"pointerdown", "pointerup", "pointermove"];
var removeNodeEvent = "";
var greyDiv = document.getElementById("grey");
eventList.forEach(function(eventName) {
greyDiv.addEventListener(eventName, function(event) {
if (event.eventPhase == Event.AT_TARGET) {
receivedEvents.push(event.type+"@grey");
}
});
});
function createGreenBoxAndAddListeners() {
var greenDiv = document.createElement("div");
greenDiv.setAttribute("class", "box");
greenDiv.id = "green";
greyDiv.innerHTML = "";
greyDiv.appendChild(greenDiv);
eventList.forEach(function(eventName) {
greenDiv.addEventListener(eventName, function(event) {
if (event.eventPhase == Event.AT_TARGET) {
receivedEvents.push(event.type+"@green");
if (event.type == removeNodeEvent) {
greenDiv.parentNode.removeChild(greenDiv);
}
}
});
});
}
var done_button = document.getElementById("done");
done_button.addEventListener("click",()=>done_clicked=true);
function performActions() {
var rect = document.getElementById("green").getBoundingClientRect();
var x1 = Math.ceil(rect.left + 5);
var y1 = Math.ceil(rect.top + 5);
return new test_driver.Actions()
.pointerMove(0, 0)
.pointerMove(x1, y1)
.pointerDown()
.pointerUp()
.send()
.then(()=> test_driver.click(done_button));
}
function testScenario(targetEvent, expectedEvents, description) {
promise_test(async () => {
receivedEvents = [];
removeNodeEvent = targetEvent;
createGreenBoxAndAddListeners();
await performActions();
assert_array_equals(receivedEvents, expectedEvents);
}, description);
}
testScenario("", ["pointermove@green", "mousemove@green", "pointerdown@green", "mousedown@green", "pointerup@green", "mouseup@green"],
"Compat mouse events with no node removal");
testScenario("pointermove", ["pointermove@green", "mousemove@grey", "pointerdown@grey", "mousedown@grey", "pointerup@grey", "mouseup@grey"],
"Compat mouse events with node removal on pointermove");
testScenario("pointerdown", ["pointermove@green", "mousemove@green", "pointerdown@green", "mousedown@grey", "pointerup@grey", "mouseup@grey"],
"Compat mouse events with node removal on pointerdown");
testScenario("pointerup", ["pointermove@green", "mousemove@green", "pointerdown@green", "mousedown@green", "pointerup@green", "mouseup@grey"],
"Compat mouse events with node removal on pointerup");
</script>
|
