OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <script src="../resources/testharness.js"></script> | 2 <script src="../resources/testharness.js"></script> |
3 <script src="../resources/testharnessreport.js"></script> | 3 <script src="../resources/testharnessreport.js"></script> |
4 <script src="resources/shadow-dom.js"></script> | 4 <script src="resources/shadow-dom.js"></script> |
5 | 5 |
6 <div id="test1"> | 6 <div id="test1"> |
7 <div id="d1"> | 7 <div id="d1"> |
8 <div id="target"></div> | 8 <div id="target"></div> |
9 </div> | 9 </div> |
10 </div> | 10 </div> |
11 | 11 |
12 <script> | 12 <script> |
13 test(() => { | 13 test(() => { |
14 let n = createTestTree(test1); | 14 let n = createTestTree(test1); |
15 let log = dispatchEventWithLog(n, n.target, new Event('my-event', { bubbles: t
rue, composed: true })); | 15 let log = dispatchEventWithLog(n, n.target, new Event('my-event', { bubbles: t
rue, composed: true })); |
16 assert_event_path_equals(log, makeExpectedEventPathLog(['target', 'd1', 'test1
'])); | 16 let path = ['target', 'd1', 'test1']; |
| 17 assert_event_path_equals(log, |
| 18 [['target', 'target', null, path], |
| 19 ['d1', 'target', null, path], |
| 20 ['test1', 'target', null, path]]); |
17 }, 'Event Path without ShadowRoots.'); | 21 }, 'Event Path without ShadowRoots.'); |
18 </script> | 22 </script> |
19 | 23 |
20 <div id="test2"> | 24 <div id="test2"> |
21 <div id="host"> | 25 <div id="host"> |
22 <template id="sr" data-mode="open"> | 26 <template id="sr" data-mode="open"> |
23 <div id="target"></div> | 27 <div id="target"></div> |
24 </template> | 28 </template> |
25 </div> | 29 </div> |
26 </div> | 30 </div> |
27 | 31 |
28 <script> | 32 <script> |
29 test(() => { | 33 test(() => { |
30 let n = createTestTree(test2); | 34 let n = createTestTree(test2); |
31 let log = dispatchEventWithLog(n, n.target, new Event('my-event', { bubbles: t
rue, composed: true })); | 35 let log = dispatchEventWithLog(n, n.target, new Event('my-event', { bubbles: t
rue, composed: true })); |
32 assert_event_path_equals(log, makeExpectedEventPathLog(['target', 'sr', 'host'
, 'test2'])); | 36 let path = ['target', 'sr', 'host', 'test2']; |
| 37 assert_event_path_equals(log, |
| 38 [['target', 'target', null, path], |
| 39 ['sr', 'target', null, path], |
| 40 ['host', 'host', null, path], |
| 41 ['test2', 'host', null, path]]); |
33 }, 'Event Path with an open ShadowRoot.'); | 42 }, 'Event Path with an open ShadowRoot.'); |
34 </script> | 43 </script> |
35 | 44 |
36 <div id="test3"> | 45 <div id="test3"> |
37 <div id="host"> | 46 <div id="host"> |
38 <template id="sr" data-mode="closed"> | 47 <template id="sr" data-mode="closed"> |
39 <div id="target"></div> | 48 <div id="target"></div> |
40 </template> | 49 </template> |
41 </div> | 50 </div> |
42 </div> | 51 </div> |
43 | 52 |
44 <script> | 53 <script> |
45 test(() => { | 54 test(() => { |
46 let n = createTestTree(test3); | 55 let n = createTestTree(test3); |
47 let log = dispatchEventWithLog(n, n.target, new Event('my-event', { bubbles: t
rue, composed: true })); | 56 let log = dispatchEventWithLog(n, n.target, new Event('my-event', { bubbles: t
rue, composed: true })); |
48 let path = ['target','sr', 'host', 'test3']; | 57 let path = ['target','sr', 'host', 'test3']; |
49 let path1 = ['host', 'test3']; | 58 let path1 = ['host', 'test3']; |
50 assert_event_path_equals(log, [['target', null, path], | 59 assert_event_path_equals(log, [['target', 'target', null, path], |
51 ['sr', null, path], | 60 ['sr', 'target', null, path], |
52 ['host', null, path1], | 61 ['host', 'host', null, path1], |
53 ['test3', null, path1]]); | 62 ['test3', 'host', null, path1]]); |
54 }, 'Event Path with a closed ShadowRoot.'); | 63 }, 'Event Path with a closed ShadowRoot.'); |
55 </script> | 64 </script> |
56 | 65 |
57 <div id="test4"> | 66 <div id="test4"> |
58 <div id="host1"> | 67 <div id="host1"> |
59 <template id="sr1" data-mode="open"> | 68 <template id="sr1" data-mode="open"> |
60 <div id="host2"> | 69 <div id="host2"> |
61 <template id="sr2" data-mode="open"> | 70 <template id="sr2" data-mode="open"> |
62 <div id="target"></div> | 71 <div id="target"></div> |
63 </template> | 72 </template> |
64 </div> | 73 </div> |
65 </template> | 74 </template> |
66 </div> | 75 </div> |
67 </div> | 76 </div> |
68 | 77 |
69 <script> | 78 <script> |
70 test(() => { | 79 test(() => { |
71 let n = createTestTree(test4); | 80 let n = createTestTree(test4); |
72 let log = dispatchEventWithLog(n, n.target, new Event('my-event', { bubbles: t
rue, composed: true })); | 81 let log = dispatchEventWithLog(n, n.target, new Event('my-event', { bubbles: t
rue, composed: true })); |
73 assert_event_path_equals(log, makeExpectedEventPathLog(['target', 'sr2', 'host
2', 'sr1', 'host1', 'test4'])); | 82 let path = ['target', 'sr2', 'host2', 'sr1', 'host1', 'test4']; |
| 83 assert_event_path_equals(log, [['target', 'target', null, path], |
| 84 ['sr2', 'target', null, path], |
| 85 ['host2', 'host2', null, path], |
| 86 ['sr1', 'host2', null, path], |
| 87 ['host1', 'host1', null, path], |
| 88 ['test4', 'host1', null, path]]); |
74 }, 'Event Path with nested ShadowRoots: open > open.'); | 89 }, 'Event Path with nested ShadowRoots: open > open.'); |
75 </script> | 90 </script> |
76 | 91 |
77 <div id="test5"> | 92 <div id="test5"> |
78 <div id="host1"> | 93 <div id="host1"> |
79 <template id="sr1" data-mode="open"> | 94 <template id="sr1" data-mode="open"> |
80 <div id="host2"> | 95 <div id="host2"> |
81 <template id="sr2" data-mode="closed"> | 96 <template id="sr2" data-mode="closed"> |
82 <div id="target"></div> | 97 <div id="target"></div> |
83 </template> | 98 </template> |
84 </div> | 99 </div> |
85 </template> | 100 </template> |
86 </div> | 101 </div> |
87 </div> | 102 </div> |
88 | 103 |
89 <script> | 104 <script> |
90 test(() => { | 105 test(() => { |
91 let n = createTestTree(test5); | 106 let n = createTestTree(test5); |
92 let log = dispatchEventWithLog(n, n.target, new Event('my-event', { bubbles: t
rue, composed: true })); | 107 let log = dispatchEventWithLog(n, n.target, new Event('my-event', { bubbles: t
rue, composed: true })); |
93 let path = ['target', 'sr2', 'host2', 'sr1', 'host1', 'test5']; | 108 let path = ['target', 'sr2', 'host2', 'sr1', 'host1', 'test5']; |
94 let path1 = ['host2', 'sr1', 'host1', 'test5']; | 109 let path1 = ['host2', 'sr1', 'host1', 'test5']; |
95 assert_event_path_equals(log, [['target', null, path], | 110 assert_event_path_equals(log, [['target', 'target', null, path], |
96 ['sr2', null, path], | 111 ['sr2', 'target', null, path], |
97 ['host2', null, path1], | 112 ['host2', 'host2', null, path1], |
98 ['sr1', null, path1], | 113 ['sr1', 'host2', null, path1], |
99 ['host1', null, path1], | 114 ['host1', 'host1', null, path1], |
100 ['test5', null, path1]]); | 115 ['test5', 'host1', null, path1]]); |
101 }, 'Event Path with nested ShadowRoots: open > closed.'); | 116 }, 'Event Path with nested ShadowRoots: open > closed.'); |
102 </script> | 117 </script> |
103 | 118 |
104 <div id="test6"> | 119 <div id="test6"> |
105 <div id="host1"> | 120 <div id="host1"> |
106 <template id="sr1" data-mode="closed"> | 121 <template id="sr1" data-mode="closed"> |
107 <div id="host2"> | 122 <div id="host2"> |
108 <template id="sr2" data-mode="open"> | 123 <template id="sr2" data-mode="open"> |
109 <div id="target"></div> | 124 <div id="target"></div> |
110 </template> | 125 </template> |
111 </div> | 126 </div> |
112 </template> | 127 </template> |
113 </div> | 128 </div> |
114 </div> | 129 </div> |
115 | 130 |
116 <script> | 131 <script> |
117 test(() => { | 132 test(() => { |
118 let n = createTestTree(test6); | 133 let n = createTestTree(test6); |
119 let log = dispatchEventWithLog(n, n.target, new Event('my-event', { bubbles: t
rue, composed: true })); | 134 let log = dispatchEventWithLog(n, n.target, new Event('my-event', { bubbles: t
rue, composed: true })); |
120 let path = ['target', 'sr2', 'host2', 'sr1', 'host1', 'test6']; | 135 let path = ['target', 'sr2', 'host2', 'sr1', 'host1', 'test6']; |
121 let path1 = ['host1', 'test6']; | 136 let path1 = ['host1', 'test6']; |
122 assert_event_path_equals(log, [['target', null, path], | 137 assert_event_path_equals(log, [['target', 'target', null, path], |
123 ['sr2', null, path], | 138 ['sr2', 'target', null, path], |
124 ['host2', null, path], | 139 ['host2', 'host2', null, path], |
125 ['sr1', null, path], | 140 ['sr1', 'host2', null, path], |
126 ['host1', null, path1], | 141 ['host1', 'host1', null, path1], |
127 ['test6', null, path1]]); | 142 ['test6', 'host1', null, path1]]); |
128 }, 'Event Path with nested ShadowRoots: closed > open.'); | 143 }, 'Event Path with nested ShadowRoots: closed > open.'); |
129 </script> | 144 </script> |
130 | 145 |
131 <div id="test7"> | 146 <div id="test7"> |
132 <div id="host1"> | 147 <div id="host1"> |
133 <template id="sr1" data-mode="closed"> | 148 <template id="sr1" data-mode="closed"> |
134 <div id="host2"> | 149 <div id="host2"> |
135 <template id="sr2" data-mode="closed"> | 150 <template id="sr2" data-mode="closed"> |
136 <div id="target"></div> | 151 <div id="target"></div> |
137 </template> | 152 </template> |
138 </div> | 153 </div> |
139 </template> | 154 </template> |
140 </div> | 155 </div> |
141 </div> | 156 </div> |
142 | 157 |
143 <script> | 158 <script> |
144 test(() => { | 159 test(() => { |
145 let n = createTestTree(test7); | 160 let n = createTestTree(test7); |
146 let log = dispatchEventWithLog(n, n.target, new Event('my-event', { bubbles: t
rue, composed: true })); | 161 let log = dispatchEventWithLog(n, n.target, new Event('my-event', { bubbles: t
rue, composed: true })); |
147 let path = ['target', 'sr2', 'host2', 'sr1', 'host1', 'test7']; | 162 let path = ['target', 'sr2', 'host2', 'sr1', 'host1', 'test7']; |
148 let path1 = ['host2', 'sr1', 'host1', 'test7']; | 163 let path1 = ['host2', 'sr1', 'host1', 'test7']; |
149 let path2 = ['host1', 'test7']; | 164 let path2 = ['host1', 'test7']; |
150 assert_event_path_equals(log, [['target', null, path], | 165 assert_event_path_equals(log, [['target', 'target', null, path], |
151 ['sr2', null, path], | 166 ['sr2', 'target', null, path], |
152 ['host2', null, path1], | 167 ['host2', 'host2', null, path1], |
153 ['sr1', null, path1], | 168 ['sr1', 'host2', null, path1], |
154 ['host1', null, path2], | 169 ['host1', 'host1', null, path2], |
155 ['test7', null, path2]]); | 170 ['test7', 'host1', null, path2]]); |
156 }, 'Event Path with nested ShadowRoots: closed > closed.'); | 171 }, 'Event Path with nested ShadowRoots: closed > closed.'); |
157 </script> | 172 </script> |
158 | 173 |
159 <div id="test8"> | 174 <div id="test8"> |
160 <div id="host1"> | 175 <div id="host1"> |
161 <template id="sr1" data-mode="open"> | 176 <template id="sr1" data-mode="open"> |
162 <slot id="slot"></slot> | 177 <slot id="slot"></slot> |
163 </template> | 178 </template> |
164 <div id="target"></div> | 179 <div id="target"></div> |
165 </div> | 180 </div> |
166 </div> | 181 </div> |
167 | 182 |
168 <script> | 183 <script> |
169 test(() => { | 184 test(() => { |
170 let n = createTestTree(test8); | 185 let n = createTestTree(test8); |
171 let log = dispatchEventWithLog(n, n.target, new Event('my-event', { bubbles: t
rue, composed: true })); | 186 let log = dispatchEventWithLog(n, n.target, new Event('my-event', { bubbles: t
rue, composed: true })); |
172 let path = ['target', 'slot', 'sr1', 'host1', 'test8']; | 187 let path = ['target','slot', 'sr1', 'host1', 'test8']; |
173 assert_event_path_equals(log, makeExpectedEventPathLog(path)); | 188 assert_event_path_equals(log, [['target', 'target', null, path], |
| 189 ['slot', 'target', null, path], |
| 190 ['sr1', 'target', null, path], |
| 191 ['host1', 'target', null, path], |
| 192 ['test8', 'target', null, path]]); |
174 }, 'Event Path with a slot in an open Shadow Root.'); | 193 }, 'Event Path with a slot in an open Shadow Root.'); |
175 </script> | 194 </script> |
176 | 195 |
177 <div id="test9"> | 196 <div id="test9"> |
178 <div id="host1"> | 197 <div id="host1"> |
179 <template id="sr1" data-mode="closed"> | 198 <template id="sr1" data-mode="closed"> |
180 <slot id="slot"></slot> | 199 <slot id="slot"></slot> |
181 </template> | 200 </template> |
182 <div id="target"></div> | 201 <div id="target"></div> |
183 </div> | 202 </div> |
184 </div> | 203 </div> |
185 | 204 |
186 <script> | 205 <script> |
187 test(() => { | 206 test(() => { |
188 let n = createTestTree(test9); | 207 let n = createTestTree(test9); |
189 let log = dispatchEventWithLog(n, n.target, new Event('my-event', { bubbles: t
rue, composed: true })); | 208 let log = dispatchEventWithLog(n, n.target, new Event('my-event', { bubbles: t
rue, composed: true })); |
190 let path = ['target', 'slot', 'sr1', 'host1', 'test9']; | 209 let path = ['target', 'slot', 'sr1', 'host1', 'test9']; |
191 let path1 = ['target', 'host1', 'test9']; | 210 let path1 = ['target', 'host1', 'test9']; |
192 assert_event_path_equals(log, [['target', null, path1], | 211 assert_event_path_equals(log, [['target', 'target', null, path1], |
193 ['slot', null, path], | 212 ['slot', 'target', null, path], |
194 ['sr1', null, path], | 213 ['sr1', 'target', null, path], |
195 ['host1', null, path1], | 214 ['host1', 'target', null, path1], |
196 ['test9', null, path1]]); | 215 ['test9', 'target', null, path1]]); |
197 }, 'Event Path with a slot in a closed Shadow Root.'); | 216 }, 'Event Path with a slot in a closed Shadow Root.'); |
198 </script> | 217 </script> |
199 | 218 |
200 <div id="test10"> | 219 <div id="test10"> |
201 <div id="host1"> | 220 <div id="host1"> |
202 <template id="sr1" data-mode="open"> | 221 <template id="sr1" data-mode="open"> |
203 <div id="host2"> | 222 <div id="host2"> |
204 <template id="sr2" data-mode="open"> | 223 <template id="sr2" data-mode="open"> |
205 <slot id="slot2"></slot> | 224 <slot id="slot2"></slot> |
206 </template> | 225 </template> |
207 <slot id="slot1"></slot> | 226 <slot id="slot1"></slot> |
208 </div> | 227 </div> |
209 </template> | 228 </template> |
210 <div id="target"></div> | 229 <div id="target"></div> |
211 </div> | 230 </div> |
212 </div> | 231 </div> |
213 | 232 |
214 <script> | 233 <script> |
215 test(() => { | 234 test(() => { |
216 let n = createTestTree(test10); | 235 let n = createTestTree(test10); |
217 let log = dispatchEventWithLog(n, n.target, new Event('my-event', { bubbles: t
rue, composed: true })); | 236 let log = dispatchEventWithLog(n, n.target, new Event('my-event', { bubbles: t
rue, composed: true })); |
218 let path = ['target', 'slot1', 'slot2', 'sr2', 'host2', 'sr1', 'host1', 'test1
0']; | 237 let path = ['target','slot1', 'slot2', 'sr2', 'host2', 'sr1', 'host1', 'test10
']; |
219 assert_event_path_equals(log, makeExpectedEventPathLog(path)); | 238 assert_event_path_equals(log, [['target', 'target', null, path], |
| 239 ['slot1', 'target', null, path], |
| 240 ['slot2', 'target', null, path], |
| 241 ['sr2', 'target', null, path], |
| 242 ['host2', 'target', null, path], |
| 243 ['sr1', 'target', null, path], |
| 244 ['host1', 'target', null, path], |
| 245 ['test10', 'target', null, path]]); |
220 }, 'Event Path with slots in nested ShadowRoots: open > open.'); | 246 }, 'Event Path with slots in nested ShadowRoots: open > open.'); |
221 </script> | 247 </script> |
222 | 248 |
223 <div id="test11"> | 249 <div id="test11"> |
224 <div id="host1"> | 250 <div id="host1"> |
225 <template id="sr1" data-mode="closed"> | 251 <template id="sr1" data-mode="closed"> |
226 <div id="host2"> | 252 <div id="host2"> |
227 <template id="sr2" data-mode="closed"> | 253 <template id="sr2" data-mode="closed"> |
228 <slot id="slot2"></slot> | 254 <slot id="slot2"></slot> |
229 </template> | 255 </template> |
230 <slot id="slot1"></slot> | 256 <slot id="slot1"></slot> |
231 </div> | 257 </div> |
232 </template> | 258 </template> |
233 <div id="target"></div> | 259 <div id="target"></div> |
234 </div> | 260 </div> |
235 </div> | 261 </div> |
236 | 262 |
237 <script> | 263 <script> |
238 test(() => { | 264 test(() => { |
239 let n = createTestTree(test11); | 265 let n = createTestTree(test11); |
240 let log = dispatchEventWithLog(n, n.target, new Event('my-event', { bubbles: t
rue, composed: true })); | 266 let log = dispatchEventWithLog(n, n.target, new Event('my-event', { bubbles: t
rue, composed: true })); |
241 let path = ['target', 'slot1', 'slot2', 'sr2', 'host2', 'sr1', 'host1', 'test1
1']; | 267 let path = ['target', 'slot1', 'slot2', 'sr2', 'host2', 'sr1', 'host1', 'test1
1']; |
242 let path1 = ['target', 'slot1', 'host2', 'sr1', 'host1', 'test11']; | 268 let path1 = ['target', 'slot1', 'host2', 'sr1', 'host1', 'test11']; |
243 let path2 = ['target', 'host1', 'test11']; | 269 let path2 = ['target', 'host1', 'test11']; |
244 assert_event_path_equals(log, [['target', null, path2], | 270 assert_event_path_equals(log, [['target', 'target', null, path2], |
245 ['slot1', null, path1], | 271 ['slot1', 'target', null, path1], |
246 ['slot2', null, path], | 272 ['slot2', 'target', null, path], |
247 ['sr2', null, path], | 273 ['sr2', 'target', null, path], |
248 ['host2', null, path1], | 274 ['host2', 'target', null, path1], |
249 ['sr1', null, path1], | 275 ['sr1', 'target', null, path1], |
250 ['host1', null, path2], | 276 ['host1', 'target', null, path2], |
251 ['test11', null, path2]]); | 277 ['test11', 'target', null, path2]]); |
252 }, 'Event Path with slots in nested ShadowRoots: closed > closed.'); | 278 }, 'Event Path with slots in nested ShadowRoots: closed > closed.'); |
253 </script> | 279 </script> |
OLD | NEW |