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
|
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Temporary removal of "mouseover" target should not be considered as the last over element is changed</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;
}
addEventListener("load", () => {
function promiseTick() {
return new Promise(resolve => requestAnimationFrame(() => requestAnimationFrame(resolve)));
}
function append3NestedDivElementsToBody() {
const div1 = document.createElement("div");
div1.setAttribute("id", "grandparent");
div1.setAttribute("style", "width: 32px; height: 32px; margin: 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);
return { div1, div2, div3 };
}
promise_test(async () => {
const {div1, div2, div3} = append3NestedDivElementsToBody();
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});
}
}
let firstMouseOver = true;
div3.addEventListener("mouseover", event => {
// Temporarily remove div3 from div2, but append to the same position.
div2.appendChild(div3);
events = [];
events.push({type: event.type, target: event.target});
}, {once: true});
await new test_driver.Actions()
.pointerMove(1, 1, {})
.pointerMove(div3Rect.x + 10, div3Rect.y + 10, {})
.send();
const expectedEvents = [
{ type: "mouseover", target: div3 },
{ type: "mouseenter", target: document.body },
{ type: "mouseenter", target: div1 },
{ type: "mouseenter", target: div2 },
{ type: "mouseenter", target: div3 },
{ type: "mousemove", target: div3 },
// Removing the node temporarily should not cause mouse boundary events.
];
assert_equals(
stringifyEvents(events),
stringifyEvents(expectedEvents),
);
div1.remove();
await new test_driver.Actions()
.pointerMove(1, 1, {})
.send();
},
"After re-appending the last over element at mouseover, " +
"mouse boundary events should be fired as just over on the target");
promise_test(async () => {
const {div1, div2, div3} = append3NestedDivElementsToBody();
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("mouseover", event => {
div3.addEventListener("mouseenter", () => {
// Temporarily remove div3 from div2, but append to the same position.
div2.appendChild(div3);
}, {once: true});
events = [];
events.push({type: event.type, target: event.target});
}, {once: true});
await new test_driver.Actions()
.pointerMove(1, 1, {})
.pointerMove(div3Rect.x + 10, div3Rect.y + 10, {})
.send();
const expectedEvents = [
{ type: "mouseover", target: div3 },
{ type: "mouseenter", target: document.body },
{ type: "mouseenter", target: div1 },
{ type: "mouseenter", target: div2 },
{ type: "mouseenter", target: div3 },
{ type: "mousemove", target: div3 },
// Removing the node temporarily should not cause mouse boundary events.
];
assert_equals(
stringifyEvents(events),
stringifyEvents(expectedEvents),
);
div1.remove();
await new test_driver.Actions()
.pointerMove(1, 1, {})
.send();
},
"After re-appending the last over element at mouseenter, " +
"mouse boundary events should not be fired");
}, {once: true});
</script>
</head>
<body style="padding-top: 32px"></body>
</html>
|
