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
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
|
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Redundant "mouseenter" shouldn't be fired without "mouseleave"s</title>
<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>
"use strict";
function stringifyEvents(eventArray) {
if (!eventArray.length) {
return "[]";
}
let result = "";
eventArray.forEach(event => {
if (result != "") {
result += ", ";
}
result += `${event.type}@${
event.target?.nodeType == Node.ELEMENT_NODE
? `${event.target.localName}${
event.target.id ? `#${event.target.id}` : ""
}`
: event.target?.localName
}`;
});
return result;
}
function eventsAfterClick(eventArray) {
const indexAtClick = eventArray.findIndex(e => e.type == "click");
if (indexAtClick >= 0) {
return eventArray.slice(indexAtClick + 1);
}
return [];
}
addEventListener("load", () => {
promise_test(async () => {
const div1 = document.createElement("div");
div1.setAttribute("id", "grandparent");
div1.setAttribute("style", "width: 32px; height: 32px");
const div2 = document.createElement("div");
div2.setAttribute("id", "parent");
div2.setAttribute("style", "width: 32px; height: 32px");
const div3 = document.createElement("div");
div3.setAttribute("id", "child");
div3.setAttribute("style", "width: 32px; height: 32px");
div1.appendChild(div2);
div2.appendChild(div3);
document.body.appendChild(div1);
const bodyRect = document.body.getBoundingClientRect();
const div3Rect = div3.getBoundingClientRect();
let events = [];
for (const type of ["mouseenter", "mouseleave", "mouseover", "mouseout", "mousemove"]) {
for (const node of [document.body, div1, div2, div3]) {
node.addEventListener(type, event => {
if (event.target == node) {
events.push({type: event.type, target: event.target});
}
}, {capture: true});
}
}
div3.addEventListener("click", event => {
div3.remove();
events.push({type: event.type, target: event.target});
}, {once: true});
await new test_driver.Actions()
.pointerMove(div3Rect.x + 10, div3Rect.y + 10, {})
.pointerDown()
.pointerUp() // The clicked in the child, then it's removed from the DOM tree
.pointerMove(bodyRect.x + 10, bodyRect.y + 10, {}) // Then, move onto the <body>
.send();
// FYI: Comparing `mouseenter`s before `click` requires additional
// initialization, but it's out of scope of this bug. Therefore, we
// compare only events after `click`.
const expectedEvents = [ // no events should be fired on the child due to disconnected
{ type: "mouseover", target: div2 }, // mouseover should be fired because of the mutation
{ type: "mouseout", target: div2}, // mouseout should be fired because of the mutation
{ type: "mouseleave", target: div2},
{ type: "mouseleave", target: div1},
{ type: "mouseover", target: document.body},
{ type: "mousemove", target: document.body},
];
assert_equals(
stringifyEvents(eventsAfterClick(events)),
stringifyEvents(expectedEvents),
);
div1.remove();
}, "After removing the last over element, redundant mouseenter events should not be fired on the ancestors");
promise_test(async () => {
const hostContainer = document.createElement("div");
hostContainer.setAttribute("id", "containerOfShadowHost");
hostContainer.setAttribute("style", "margin-top: 32px; height: 32px");
const host = document.createElement("div");
host.setAttribute("id", "shadowHost");
host.setAttribute("style", "width: 32px; height: 32px");
const root = host.attachShadow({mode: "open"});
const rootElementInShadow = document.createElement("div");
root.appendChild(rootElementInShadow);
rootElementInShadow.setAttribute("id", "divInShadow");
rootElementInShadow.setAttribute("style", "width: 32px; height: 32px");
hostContainer.appendChild(host);
document.body.appendChild(hostContainer);
const bodyRect = document.body.getBoundingClientRect();
const rootElementInShadowRect = rootElementInShadow.getBoundingClientRect();
let events = [];
for (const type of ["mouseenter", "mouseleave", "mouseover", "mouseout", "mousemove"]) {
for (const node of [document.body, hostContainer, host, root, rootElementInShadow]) {
node.addEventListener(type, event => {
if (event.target == node) {
events.push({type: event.type, target: event.target});
}
}, {capture: true});
}
}
rootElementInShadow.addEventListener("click", event => {
rootElementInShadow.remove();
events.push({type: event.type, target: event.target});
}, {once: true});
await new test_driver.Actions()
.pointerMove(rootElementInShadowRect.x + 10, rootElementInShadowRect.y + 10, {})
.pointerDown()
.pointerUp() // The clicked root element in the shadow is removed here.
.pointerMove(bodyRect.x + 10, bodyRect.y + 10, {}) // Then, move onto the <body>
.send();
// FYI: Comparing `mouseenter`s before `click` requires additional
// initialization, but it's out of scope of this bug. Therefore, we
// compare only events after `click`.
const expectedEvents = [ // no events should be fired on rootElementInShadow due to disconnected
{ type: "mouseover", target: host}, // mouseover should be fired because of the mutation
{ type: "mouseout", target: host}, // mouseout should be fired because of the mutation
{ type: "mouseleave", target: host},
{ type: "mouseleave", target: hostContainer},
{ type: "mouseover", target: document.body},
{ type: "mousemove", target: document.body},
];
assert_equals(
stringifyEvents(eventsAfterClick(events)),
stringifyEvents(expectedEvents),
);
hostContainer.remove();
}, "After removing the root element in the shadow under the cursor, mouseleave events should be targeted outside the shadow, but redundant mouseenter events should not be fired");
}, {once: true});
</script>
</head>
<body style="padding-top: 32px"></body>
</html>
|
