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
|
<html>
<head>
<script src="/tests/SimpleTest/EventUtils.js"></script>
<script>
function lazyRequestAnimationFrame(fn) {
requestAnimationFrame(
function() {
setTimeout(fn);
});
}
var tests = [ removeHost, removeShadowElement ];
function nextTest() {
if (tests.length) {
var test = tests.shift();
lazyRequestAnimationFrame(test);
} else {
parent.SimpleTest.finish();
}
}
function removeHost() {
var hostgrandparent = document.getElementById("hostgrandparent");
var hostparent = document.getElementById("hostparent");
hostparent.innerHTML = "<div id='host'></div>";
var host = document.getElementById("host");
var sr = document.getElementById("host").attachShadow({mode: "open"});
sr.innerHTML = "<input type='button' value='click'>";
sr.firstChild.onclick = function() {
parent.is(hostparent.querySelector("div:hover"), host, "host should be hovered.");
host.remove();
parent.is(hostgrandparent.querySelector("div:hover"), hostparent,
"hostgrandparent element should have descendants marked in :hover state.");
synthesizeMouseAtCenter(document.getElementById('light'), { type: "mousemove" });
lazyRequestAnimationFrame(
function() {
parent.is(hostgrandparent.querySelector("div:hover"), null,
"hostgrandparent element shouldn't have descendants marked in :hover state anymore.");
nextTest();
}
);
}
lazyRequestAnimationFrame(
function() {
synthesizeMouseAtCenter(sr.firstChild, { type: "mousemove" });
synthesizeMouseAtCenter(sr.firstChild, {});
}
);
}
function removeShadowElement() {
var hostgrandparent = document.getElementById("hostgrandparent");
var hostparent = document.getElementById("hostparent");
hostparent.innerHTML = "<div id='host'><input id='input' slot='slot' type='button' value='click'></div>";
var host = document.getElementById("host");
var input = document.getElementById("input");
var sr = document.getElementById("host").attachShadow({mode: "open"});
sr.innerHTML = "<div><div><slot name='slot'></slot></div></div>";
var shadowOuterDiv = sr.firstChild;
var shadowInnerDiv = shadowOuterDiv.firstChild;
var slot = shadowInnerDiv.firstChild;
sr.firstChild.onclick = function() {
parent.is(hostparent.querySelector("div:hover"), host, "host should be hovered.");
slot.remove();
parent.is(shadowOuterDiv.querySelector("div:hover"), shadowInnerDiv,
"Elements in shadow DOM should stay hovered");
synthesizeMouseAtCenter(document.getElementById('light'), { type: "mousemove" });
lazyRequestAnimationFrame(
function() {
parent.is(shadowOuterDiv.querySelector("div:hover"), null,
"Shadow DOM shouldn't be marked to be hovered anymore.");
nextTest();
}
);
}
lazyRequestAnimationFrame(
function() {
synthesizeMouseAtCenter(input, { type: "mousemove" });
synthesizeMouseAtCenter(input, {});
}
);
}
</script>
<style>
</style>
</head>
<body onload="nextTest()">
<div id="hostgrandparent">
<div id="hostparent">
</div>
foo
</div>
<div id="light">light dom</div>
</body>
</html>
|
