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
|
<html>
<head>
<script src="/tests/SimpleTest/EventUtils.js"></script>
<script>
var mouseEnterCount = 0;
function mouseEnter() {
++mouseEnterCount;
}
var mouseLeaveCount = 0;
function mouseLeave() {
++mouseLeaveCount;
}
var pointerEnterCount = 0;
function pointerEnter() {
++pointerEnterCount;
}
var pointerLeaveCount = 0;
function pointerLeave() {
++pointerLeaveCount;
}
function pointerEventsEnabled() {
return "onpointerenter" in document.body;
}
function checkEventCounts(expected, msg) {
parent.is(mouseEnterCount, expected.mouseEnterCount, msg + ": mouseenter event count");
parent.is(mouseLeaveCount, expected.mouseLeaveCount, msg + ": mouseleave event count");
if (pointerEventsEnabled()) {
parent.is(pointerEnterCount, expected.pointerEnterCount, msg + ": pointerenter event count");
parent.is(pointerLeaveCount, expected.pointerLeaveCount, msg + ": pointerleave event count");
}
}
function test() {
var lightDiv = document.getElementById("lightDiv");
var host = document.getElementById("host");
var sr = host.attachShadow({mode: "closed"});
sr.innerHTML = "<div>shadow DOM<div>";
var shadowDiv = sr.firstChild;
host.addEventListener("mouseenter", mouseEnter, true);
host.addEventListener("mouseleave", mouseLeave, true);
host.addEventListener("pointerenter", pointerEnter, true);
host.addEventListener("pointerleave", pointerLeave, true);
shadowDiv.addEventListener("mouseenter", mouseEnter, true);
shadowDiv.addEventListener("mouseleave", mouseLeave, true);
shadowDiv.addEventListener("pointerenter", pointerEnter, true);
shadowDiv.addEventListener("pointerleave", pointerLeave, true);
synthesizeMouseAtCenter(lightDiv, { type: "mousemove" });
checkEventCounts({ mouseEnterCount: 0,
mouseLeaveCount: 0,
pointerEnterCount: 0,
pointerLeaveCount: 0
},
"Entered light DOM"
);
synthesizeMouseAtCenter(shadowDiv, { type: "mousemove" })
checkEventCounts({ mouseEnterCount: 2,
mouseLeaveCount: 0,
pointerEnterCount: 2,
pointerLeaveCount: 0
},
"Entered shadow DOM");
synthesizeMouseAtCenter(lightDiv, { type: "mousemove" })
checkEventCounts({ mouseEnterCount: 2,
mouseLeaveCount: 2,
pointerEnterCount: 2,
pointerLeaveCount: 2
},
"Left shadow DOM"
);
parent.SimpleTest.finish();
}
function lazyRequestAnimationFrame(fn) {
requestAnimationFrame(
function() {
setTimeout(fn);
});
}
</script>
</head>
<body onload="lazyRequestAnimationFrame(test)">
<div id="lightDiv">light DOM</div>
<div id="host"></div>
</body>
</html>
|
