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 <template id="shadowroot" data-mode="open"> | 7 <div id="d1"> |
8 <slot id="slot" name="slot"></slot> | 8 <div id="target"></div> |
9 </template> | 9 </div> |
10 <input id="input" slot="slot"> | 10 </div> |
11 </div> | 11 |
12 <script> | |
13 test(() => { | |
14 let n = createTestTree(test1); | |
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 '])); | |
17 }, 'Event Path test1'); | |
tkent
2016/06/15 13:07:55
'Event Path testN' isn't a good description. Pleas
hayato
2016/06/16 06:06:58
Done. Added descriptive names to every tests.
| |
18 </script> | |
12 | 19 |
13 <div id="test2"> | 20 <div id="test2"> |
14 <template id="shadowroot" data-mode="open"> | 21 <div id="host"> |
15 <slot id="slot" name="slot"></slot> | 22 <template id="sr" data-mode="open"> |
16 </template> | 23 <div id="target"></div> |
17 <div id="input-parent" slot="slot"> | 24 </template> |
18 <input id="input"> | 25 </div> |
19 </div> | 26 </div> |
20 </div> | 27 |
28 <script> | |
29 test(() => { | |
30 let n = createTestTree(test2); | |
31 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'])); | |
33 }, 'Event Path test2'); | |
34 </script> | |
21 | 35 |
22 <div id="test3"> | 36 <div id="test3"> |
23 <template id="open_shadow" data-mode="open"> | 37 <div id="host"> |
24 <div id="inner_open"> | 38 <template id="sr" data-mode="closed"> |
25 <template id="open_shadow_in_open_shadow" data-mode="open"> | 39 <div id="target"></div> |
26 <spen id="target_open" tabindex="0">open</spen> | 40 </template> |
27 </template> | 41 </div> |
28 </div> | 42 </div> |
29 </template> | 43 |
30 </div> | 44 <script> |
45 test(() => { | |
46 let n = createTestTree(test3); | |
47 let log = dispatchEventWithLog(n, n.target, new Event('my-event', { bubbles: t rue, composed: true })); | |
48 let path = ['target','sr', 'host', 'test3']; | |
tkent
2016/06/15 13:07:55
nit: add a space after the first comma.
hayato
2016/06/16 06:06:57
Done
| |
49 let path1 = ['host', 'test3']; | |
50 assert_event_path_equals(log, [['target', null, path], | |
51 ['sr', null, path], | |
52 ['host', null, path1], | |
53 ['test3', null, path1]]); | |
54 }, 'Event Path test3'); | |
55 </script> | |
31 | 56 |
32 <div id="test4"> | 57 <div id="test4"> |
33 <template id="closed_shadow" data-mode="closed"> | 58 <div id="host1"> |
34 <div id="inner_closed"> | 59 <template id="sr1" data-mode="open"> |
35 <template id="open_shadow_in_closed_shadow" data-mode="open"> | 60 <div id="host2"> |
36 <spen id="target_closed" tabindex="0">closed</spen> | 61 <template id="sr2" data-mode="open"> |
37 </template> | 62 <div id="target"></div> |
38 </div> | 63 </template> |
39 </template> | 64 </div> |
40 </div> | 65 </template> |
41 | 66 </div> |
42 <script> | 67 </div> |
43 function makeExpectedEventPathLog(path) { | 68 |
44 let expectedLog = []; | 69 <script> |
45 for (let i of path) { | 70 test(() => { |
46 expectedLog.push([i, null, path]); | 71 let n = createTestTree(test4); |
47 } | 72 let log = dispatchEventWithLog(n, n.target, new Event('my-event', { bubbles: t rue, composed: true })); |
48 return expectedLog; | 73 assert_event_path_equals(log, makeExpectedEventPathLog(['target', 'sr2', 'host 2', 'sr1', 'host1', 'test4'])); |
49 } | 74 }, 'Event Path test4'); |
50 | 75 </script> |
51 test(() => { | 76 |
52 const event = new Event('my-event'); | 77 <div id="test5"> |
53 let dispatched = false; | 78 <div id="host1"> |
54 let target = document.createElement('div'); | 79 <template id="sr1" data-mode="open"> |
55 target.addEventListener('my-event', (e) => { | 80 <div id="host2"> |
56 assert_array_equals(e.composedPath(), [target]); | 81 <template id="sr2" data-mode="closed"> |
57 dispatched = true; | 82 <div id="target"></div> |
58 }); | 83 </template> |
59 assert_array_equals(event.composedPath(), []); | 84 </div> |
60 target.dispatchEvent(event); | 85 </template> |
61 assert_true(dispatched); | 86 </div> |
62 assert_array_equals(event.composedPath(), []); | 87 </div> |
63 }, "Event.composedPath() should return an empty array before/after dispatching a n event"); | 88 |
64 | 89 <script> |
65 test(() => { | 90 test(() => { |
66 let n = createTestTree(test1); | 91 let n = createTestTree(test5); |
67 removeWhiteSpaceOnlyTextNodes(n.test1); | 92 let log = dispatchEventWithLog(n, n.target, new Event('my-event', { bubbles: t rue, composed: true })); |
68 let log = dispatchEventWithLog(n, n.input, new Event('my-event', { bubbles: tr ue, composed: true })); | 93 let path = ['target','sr2', 'host2', 'sr1', 'host1', 'test5']; |
tkent
2016/06/15 13:07:55
nit: add a space after the first comma.
hayato
2016/06/16 06:06:57
Done
| |
69 assert_event_path_equals(log, makeExpectedEventPathLog(['input', 'slot', 'shad owroot', 'test1'])); | 94 let path1 = ['host2', 'sr1', 'host1', 'test5']; |
70 }, 'Triggered in a slotted element, eventPath should go through shadow tree.'); | 95 assert_event_path_equals(log, [['target', null, path], |
71 | 96 ['sr2', null, path], |
72 test(() => { | 97 ['host2', null, path1], |
73 let n = createTestTree(test2); | 98 ['sr1', null, path1], |
74 removeWhiteSpaceOnlyTextNodes(n.test2); | 99 ['host1', null, path1], |
75 let log = dispatchEventWithLog(n, n.input, new Event('my-event', { bubbles: tr ue, composed: true })); | 100 ['test5', null, path1]]); |
76 assert_event_path_equals(log, makeExpectedEventPathLog(['input', 'input-parent ', 'slot', 'shadowroot', 'test2'])); | 101 }, 'Event Path test5'); |
77 }, 'EventPath works fine when event happens to a descendant of a slotted element .'); | 102 </script> |
78 | 103 |
79 test(() => { | 104 <div id="test6"> |
80 let n = createTestTree(test3); | 105 <div id="host1"> |
81 removeWhiteSpaceOnlyTextNodes(n.test3); | 106 <template id="sr1" data-mode="closed"> |
82 let log = dispatchEventWithLog(n, n.target_open, new Event('my-event', { bubbl es: true, composed: true })); | 107 <div id="host2"> |
83 let path = ['target_open', 'open_shadow_in_open_shadow', 'inner_open', 'open_s hadow', 'test3'] | 108 <template id="sr2" data-mode="open"> |
109 <div id="target"></div> | |
110 </template> | |
111 </div> | |
112 </template> | |
113 </div> | |
114 </div> | |
115 | |
116 <script> | |
117 test(() => { | |
118 let n = createTestTree(test6); | |
119 let log = dispatchEventWithLog(n, n.target, new Event('my-event', { bubbles: t rue, composed: true })); | |
120 let path = ['target','sr2', 'host2', 'sr1', 'host1', 'test6']; | |
tkent
2016/06/15 13:07:55
nit: add a space after the first comma.
hayato
2016/06/16 06:06:57
Done
| |
121 let path1 = ['host1', 'test6']; | |
122 assert_event_path_equals(log, [['target', null, path], | |
123 ['sr2', null, path], | |
124 ['host2', null, path], | |
125 ['sr1', null, path], | |
126 ['host1', null, path1], | |
127 ['test6', null, path1]]); | |
128 }, 'Event Path test6'); | |
129 </script> | |
130 | |
131 <div id="test7"> | |
132 <div id="host1"> | |
133 <template id="sr1" data-mode="closed"> | |
134 <div id="host2"> | |
135 <template id="sr2" data-mode="closed"> | |
136 <div id="target"></div> | |
137 </template> | |
138 </div> | |
139 </template> | |
140 </div> | |
141 </div> | |
142 | |
143 <script> | |
144 test(() => { | |
145 let n = createTestTree(test7); | |
146 let log = dispatchEventWithLog(n, n.target, new Event('my-event', { bubbles: t rue, composed: true })); | |
147 let path = ['target','sr2', 'host2', 'sr1', 'host1', 'test7']; | |
tkent
2016/06/15 13:07:55
nit: add a space after the first comma.
hayato
2016/06/16 06:06:57
Done
| |
148 let path1 = ['host2', 'sr1', 'host1', 'test7']; | |
149 let path2 = ['host1', 'test7']; | |
150 assert_event_path_equals(log, [['target', null, path], | |
151 ['sr2', null, path], | |
152 ['host2', null, path1], | |
153 ['sr1', null, path1], | |
154 ['host1', null, path2], | |
155 ['test7', null, path2]]); | |
156 }, 'Event Path test7'); | |
157 </script> | |
158 | |
159 <div id="test8"> | |
160 <div id="host1"> | |
161 <template id="sr1" data-mode="open"> | |
162 <slot id="slot"></slot> | |
163 </template> | |
164 <div id="target"></div> | |
165 </div> | |
166 </div> | |
167 | |
168 <script> | |
169 test(() => { | |
170 let n = createTestTree(test8); | |
171 let log = dispatchEventWithLog(n, n.target, new Event('my-event', { bubbles: t rue, composed: true })); | |
172 let path = ['target','slot', 'sr1', 'host1', 'test8']; | |
tkent
2016/06/15 13:07:55
nit: add a space after the first comma.
hayato
2016/06/16 06:06:57
Done
| |
84 assert_event_path_equals(log, makeExpectedEventPathLog(path)); | 173 assert_event_path_equals(log, makeExpectedEventPathLog(path)); |
85 }, 'EventPath for Open > Open'); | 174 }, 'Event Path test8'); |
86 | 175 </script> |
87 test(() => { | 176 |
88 let n = createTestTree(test4); | 177 <div id="test9"> |
89 removeWhiteSpaceOnlyTextNodes(n.test4); | 178 <div id="host1"> |
90 let log = dispatchEventWithLog(n, n.target_closed, new Event('my-event', { bub bles: true, composed: true })); | 179 <template id="sr1" data-mode="closed"> |
91 let path = ['target_closed', 'open_shadow_in_closed_shadow', 'inner_closed', ' closed_shadow', 'test4'] | 180 <slot id="slot"></slot> |
92 assert_event_path_equals(log, | 181 </template> |
93 [['target_closed', null, path], | 182 <div id="target"></div> |
94 ['open_shadow_in_closed_shadow', null, path], | 183 </div> |
95 ['inner_closed', null, path], | 184 </div> |
96 ['closed_shadow', null, path], | 185 |
97 ['test4', null, ['test4']]]); | 186 <script> |
98 }, 'EventPath for Closed > Open'); | 187 test(() => { |
99 </script> | 188 let n = createTestTree(test9); |
189 let log = dispatchEventWithLog(n, n.target, new Event('my-event', { bubbles: t rue, composed: true })); | |
190 let path = ['target','slot', 'sr1', 'host1', 'test9']; | |
tkent
2016/06/15 13:07:55
nit: add a space after the first comma.
hayato
2016/06/16 06:06:57
Done
| |
191 let path1 = ['target', 'host1', 'test9']; | |
192 assert_event_path_equals(log, [['target', null, path1], | |
193 ['slot', null, path], | |
194 ['sr1', null, path], | |
195 ['host1', null, path1], | |
196 ['test9', null, path1]]); | |
197 }, 'Event Path test9'); | |
198 </script> | |
199 | |
200 <div id="test10"> | |
201 <div id="host1"> | |
202 <template id="sr1" data-mode="open"> | |
203 <div id="host2"> | |
204 <template id="sr2" data-mode="open"> | |
205 <slot id="slot2"></slot> | |
206 </template> | |
207 <slot id="slot1"></slot> | |
208 </div> | |
209 </template> | |
210 <div id="target"></div> | |
211 </div> | |
212 </div> | |
213 | |
214 <script> | |
215 test(() => { | |
216 let n = createTestTree(test10); | |
217 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', 'test10 ']; | |
tkent
2016/06/15 13:07:55
nit: add a space after the first comma.
hayato
2016/06/16 06:06:57
Done
| |
219 assert_event_path_equals(log, makeExpectedEventPathLog(path)); | |
220 }, 'Event Path test10'); | |
221 </script> | |
222 | |
223 <div id="test11"> | |
224 <div id="host1"> | |
225 <template id="sr1" data-mode="closed"> | |
226 <div id="host2"> | |
227 <template id="sr2" data-mode="closed"> | |
228 <slot id="slot2"></slot> | |
229 </template> | |
230 <slot id="slot1"></slot> | |
231 </div> | |
232 </template> | |
233 <div id="target"></div> | |
234 </div> | |
235 </div> | |
236 | |
237 <script> | |
238 test(() => { | |
239 let n = createTestTree(test11); | |
240 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', 'test11 ']; | |
tkent
2016/06/15 13:07:55
nit: add a space after the first comma
hayato
2016/06/16 06:06:57
Done
| |
242 let path1 = ['target','slot1', 'host2', 'sr1', 'host1', 'test11']; | |
tkent
2016/06/15 13:07:55
Ditto.
hayato
2016/06/16 06:06:57
Done
| |
243 let path2 = ['target', 'host1', 'test11']; | |
244 assert_event_path_equals(log, [['target', null, path2], | |
245 ['slot1', null, path1], | |
246 ['slot2', null, path], | |
247 ['sr2', null, path], | |
248 ['host2', null, path1], | |
249 ['sr1', null, path1], | |
250 ['host1', null, path2], | |
251 ['test11', null, path2]]); | |
252 }, 'Event Path test11'); | |
253 </script> | |
OLD | NEW |