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
|
<!DOCTYPE HTML>
<html>
<!--
https://bugzilla.mozilla.org/show_bug.cgi?id=887541
-->
<head>
<title>Test for event retargeting in web components</title>
<script type="text/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
<link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
</head>
<body>
<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=887541">Bug 887541</a>
<script>
/*
* Creates an event listener with an expected event target.
*/
function createEventListener(expectedTarget, msg) {
return function(e) {
is(e.target, expectedTarget, msg);
};
}
/*
* Test of event retargeting through a basic ShadowRoot with a content insertion point.
*
* <div elemThree> ---- <shadow-root shadowOne>
* | |
* <div elemOne> <content elemTwo>
*
* Dispatch event on elemOne
*/
var elemOne = document.createElement("div");
var elemTwo = document.createElement("content");
var elemThree = document.createElement("div");
var shadowOne = elemThree.createShadowRoot();
elemThree.appendChild(elemOne);
shadowOne.appendChild(elemTwo);
elemOne.addEventListener("custom", createEventListener(elemOne, "elemOne is in common ancestor tree of elemOne."));
elemTwo.addEventListener("custom", createEventListener(elemOne, "elemOne is in common ancestor tree of elemTwo."));
elemThree.addEventListener("custom", createEventListener(elemOne, "elemOne is in common ancestor tree of elemThree."));
shadowOne.addEventListener("custom", createEventListener(elemOne, "elemOne is in common ancestor tree of shadowOne."));
var customEvent = new CustomEvent("custom", { "bubbles" : true });
elemOne.dispatchEvent(customEvent);
/*
* Test of event retargeting through a basic ShadowRoot with a content insertion point.
*
* <div elemThree> ---- <shadow-root shadowOne>
* | |
* <div elemOne> <content elemTwo>
*
* Dispatch event on elemTwo
*/
elemOne = document.createElement("div");
elemTwo = document.createElement("content");
elemThree = document.createElement("div");
shadowOne = elemThree.createShadowRoot();
elemThree.appendChild(elemOne);
shadowOne.appendChild(elemTwo);
elemTwo.addEventListener("custom", createEventListener(elemTwo, "elemTwo is in common ancestor tree of elemTwo."));
elemThree.addEventListener("custom", createEventListener(elemThree, "elemThree is in common ancestor tree of elemThree."));
shadowOne.addEventListener("custom", createEventListener(elemTwo, "elemTwo is in common ancestor tree of shadowOne."));
customEvent = new CustomEvent("custom", { "bubbles" : true });
elemTwo.dispatchEvent(customEvent);
/*
* Test of event retargeting through a nested ShadowRoots with content insertion points.
*
* <div elemFive> --- <shadow-root shadowTwo>
* | |
* <div elemOne> <div elemFour> ----- <shadow-root shadowOne>
* | |
* <content elemTwo> <content elemThree>
*
* Dispatch custom event on elemOne.
*/
elemOne = document.createElement("div");
elemTwo = document.createElement("content");
elemThree = document.createElement("content");
var elemFour = document.createElement("div");
var elemFive = document.createElement("div");
var shadowTwo = elemFive.createShadowRoot();
shadowOne = elemFour.createShadowRoot();
elemFive.appendChild(elemOne);
shadowTwo.appendChild(elemFour);
elemFour.appendChild(elemTwo);
shadowOne.appendChild(elemThree);
elemOne.addEventListener("custom", createEventListener(elemOne, "elemOne is in common ancestor tree of elemOne."));
elemTwo.addEventListener("custom", createEventListener(elemOne, "elemOne is in common ancestor tree of elemTwo."));
elemThree.addEventListener("custom", createEventListener(elemOne, "elemOne is in common ancestor tree of elemThree."));
elemFour.addEventListener("custom", createEventListener(elemOne, "elemOne is in common ancestor tree of elemFour."));
elemFive.addEventListener("custom", createEventListener(elemOne, "elemOne is in common ancestor tree of elemFive."));
shadowOne.addEventListener("custom", createEventListener(elemOne, "elemOne is in common ancestor tree of shadowOne."));
shadowTwo.addEventListener("custom", createEventListener(elemOne, "elemOne is in common ancestor tree of shadowTwo."));
customEvent = new CustomEvent("custom", { "bubbles" : true });
elemOne.dispatchEvent(customEvent);
/*
* Test of event retargeting through a nested ShadowRoots with content insertion points.
*
* <div elemFive> --- <shadow-root shadowTwo>
* | |
* <div elemOne> <div elemFour> ----- <shadow-root shadowOne>
* | |
* <content elemTwo> <content elemThree>
*
* Dispatch custom event on elemThree.
*/
elemOne = document.createElement("div");
elemTwo = document.createElement("content");
elemThree = document.createElement("content");
elemFour = document.createElement("div");
elemFive = document.createElement("div");
shadowTwo = elemFive.createShadowRoot();
shadowOne = elemFour.createShadowRoot();
elemFive.appendChild(elemOne);
shadowTwo.appendChild(elemFour);
elemFour.appendChild(elemTwo);
shadowOne.appendChild(elemThree);
elemThree.addEventListener("custom", createEventListener(elemThree, "elemThree is in common ancestor tree of elemThree."));
elemFour.addEventListener("custom", createEventListener(elemFour, "elemFour is in common ancestor tree of elemFour."));
elemFive.addEventListener("custom", createEventListener(elemFive, "elemFive is in common ancestor tree of elemFive."));
shadowOne.addEventListener("custom", createEventListener(elemThree, "elemThree is in common ancestor tree of shadowOne."));
shadowTwo.addEventListener("custom", createEventListener(elemFour, "elemFour is in common ancestor tree of shadowTwo."));
customEvent = new CustomEvent("custom", { "bubbles" : true });
elemThree.dispatchEvent(customEvent);
</script>
</body>
</html>
|
