Google Git
Sign in
chromium / external / w3c / web-platform-tests / fd0429f0b45f975b25d85256dac33762134952c5 / . / shadow-dom / event-composed-path-with-related-target.html
blob: f6dff13a93e55437246c94be3f708e79af513f95 [file] [log] [blame]
Hayato Ito4bcdc1e2016-06-20 08:11:25[diff] [blame]1<!DOCTYPE html>
2<title>Shadow DOM: Event path and Event.composedPath() (with related target)</title>
3<meta name="author" title="Hayato Ito" href="mailto:hayato@google.com">
Ms2ger526656f2016-08-24 16:26:20[diff] [blame]4<script src="/resources/testharness.js"></script>
5<script src="/resources/testharnessreport.js"></script>
Hayato Ito4bcdc1e2016-06-20 08:11:25[diff] [blame]6<script src="resources/shadow-dom.js"></script>
7
8<div id="test1">
9 <div id="target"></div>
10 <div id="related"></div>
11</div>
12
13<script>
14test(() => {
15 let n = createTestTree(test1);
16 let log = dispatchEventWithLog(n, n.target, new FocusEvent('my-focus', { bubbles: true, composed: true, relatedTarget: n.related }));
17 let path = ['target', 'test1'];
18 assert_event_path_equals(log, [['target', 'target', 'related', path],
19 ['test1', 'target', 'related', path]]);
20}, 'Event path for an event with a relatedTarget. relatedTarget != target.');
21</script>
22
23<script>
24test(() => {
25 let n = createTestTree(test1);
26 let log = dispatchEventWithLog(n, n.target, new FocusEvent('my-focus', { bubbles: true, composed: true, relatedTarget: n.target }));
27 let path = ['target', 'test1'];
28 assert_event_path_equals(log, [['target', 'target', 'target', path],
29 ['test1', 'target', 'target', path]]);
Hayato Ito758d3382016-10-05 02:30:47[diff] [blame]30}, 'Event path for an event with a relatedTarget. Event should be dispatched even when target and relatedTarget are same.');
Hayato Ito4bcdc1e2016-06-20 08:11:25[diff] [blame]31</script>
32
33<div id="test2">
34 <div id="host">
35 <template id="sr" data-mode="open">
36 <div id="target"></div>
37 <div id="related"></div>
38 </template>
39 </div>
40</div>
41
42<script>
43test(() => {
44 let n = createTestTree(test2);
45 let log = dispatchEventWithLog(n, n.target, new FocusEvent('my-focus', { bubbles: true, composed: true, relatedTarget: n.related }));
46 let path = ['target', 'sr'];
47 assert_event_path_equals(log, [['target', 'target', 'related', path],
48 ['sr', 'target', 'related', path]]);
49}, 'Event path for an event with a relatedTarget. Event should stop at the shadow root');
50
51test(() => {
52 let n = createTestTree(test2);
53 let log = dispatchEventWithLog(n, n.target, new FocusEvent('my-focus', { bubbles: true, composed: true, relatedTarget: n.target }));
Hayato Ito758d3382016-10-05 02:30:47[diff] [blame]54 let path = ['target', 'sr'];
55 assert_event_path_equals(log, [['target', 'target', 'target', path],
56 ['sr', 'target', 'target', path]]);
57}, 'Event path for an event with a relatedTarget which is identical to target. Event should be dispatched and should stop at the shadow root.');
Hayato Ito4bcdc1e2016-06-20 08:11:25[diff] [blame]58</script>
59
60<div id="test3_1">
61 <div id="host1">
62 <template id="sr1" data-mode="open">
63 <div id="target1"></div>
64 </template>
65 </div>
66</div>
67
68<div id="test3_2">
69 <div id="host2">
70 <template id="sr2" data-mode="open">
71 <div id="target2"></div>
72 </template>
73 </div>
74</div>
75
76<script>
77test(() => {
78 let n1 = createTestTree(test3_1);
79 let n2 = createTestTree(test3_2);
80 let log = dispatchEventWithLog(n1, n1.target1, new FocusEvent('my-focus', { bubbles: true, composed: true, relatedTarget: n2.target2 }));
81 let path = ['target1', 'sr1', 'host1', 'test3_1'];
82 assert_event_path_equals(log, [['target1', 'target1', 'host2', path],
83 ['sr1', 'target1', 'host2', path],
84 ['host1', 'host1', 'host2', path],
85 ['test3_1', 'host1', 'host2', path]]);
86}, 'Event path for an event with a relatedTarget. target and relaterTarget do not share any shadow-including ancestor. target is in a shadow tree.');
87
88test(() => {
89 let n1 = createTestTree(test3_1);
90 let n2 = createTestTree(test3_2);
91 let log = dispatchEventWithLog(n1, n1.host1, new FocusEvent('my-focus', { bubbles: true, composed: true, relatedTarget: n2.target2 }));
92 let path = ['host1', 'test3_1'];
93 assert_event_path_equals(log, [['host1', 'host1', 'host2', path],
94 ['test3_1', 'host1', 'host2', path]]);
95}, 'Event path for an event with a relatedTarget. target and relaterTarget do not share any shadow-including ancestor. target is not in a shadow tree');
96</script>
97
98<div id="test4">
99 <div id="host1">
100 <template id="sr1" data-mode="open">
101 <div id="host2">
102 <template id="sr2" data-mode="open">
103 <div id="target"></div>
104 </template>
105 </div>
106 <div id="host3">
107 <template id="sr3" data-mode="open">
108 <div id="related"></div>
109 </template>
110 </div>
111 </template>
112 </div>
113</div>
114
115<script>
116test(() => {
117 let n = createTestTree(test4);
118 let log = dispatchEventWithLog(n, n.target, new FocusEvent('my-focus', { bubbles: true, composed: true, relatedTarget: n.related }));
119 let path = ['target', 'sr2', 'host2', 'sr1'];
120 assert_event_path_equals(log, [['target', 'target', 'host3', path],
121 ['sr2', 'target', 'host3', path],
122 ['host2', 'host2', 'host3', path],
123 ['sr1', 'host2', 'host3', path]]);
124}, 'Event path for an event with a relatedTarget. target and relaterTarget share the same shadow-including ancestor. Both are in shadow trees.');
125
126test(() => {
127 let n = createTestTree(test4);
128 let log = dispatchEventWithLog(n, n.target, new FocusEvent('my-focus', { bubbles: true, composed: true, relatedTarget: n.host1 }));
129 let path = ['target', 'sr2', 'host2', 'sr1'];
130 assert_event_path_equals(log, [['target', 'target', 'host1', path],
131 ['sr2', 'target', 'host1', path],
132 ['host2', 'host2', 'host1', path],
133 ['sr1', 'host2', 'host1', path]]);
Hayato Ito2edfb502018-01-19 02:17:11[diff] [blame]134}, 'Event path for an event with a relatedTarget. relatedTarget is a shadow-including ancestor of target.');
Hayato Ito4bcdc1e2016-06-20 08:11:25[diff] [blame]135
136test(() => {
137 let n = createTestTree(test4);
138 let log = dispatchEventWithLog(n, n.host1, new FocusEvent('my-focus', { bubbles: true, composed: true, relatedTarget: n.target }));
Hayato Ito2edfb502018-01-19 02:17:11[diff] [blame]139 assert_event_path_equals(log, []);
Hayato Ito4bcdc1e2016-06-20 08:11:25[diff] [blame]140}, 'Event path for an event with a relatedTarget. target is a shadow-including ancestor of relatedTarget.');
141</script>
142
143<div id="test5">
144 <div id="host">
145 <template id="sr" data-mode="open">
146 <slot id="slot"></slot>
147 <div id="related"></div>
148 </template>
149 <div id="target"></div>
150 </div>
151</div>
152
153<script>
154test(() => {
155 let n = createTestTree(test5);
156 let log = dispatchEventWithLog(n, n.target, new FocusEvent('my-focus', { bubbles: true, composed: true, relatedTarget: n.related }));
157 let path = ['target', 'slot', 'sr', 'host', 'test5'];
158 assert_event_path_equals(log, [['target', 'target', 'host', path],
159 ['slot', 'target', 'related', path],
160 ['sr', 'target', 'related', path],
161 ['host', 'target', 'host', path],
162 ['test5', 'target', 'host', path]]);
163}, 'Event path for an event with a relatedTarget. target is assigned to a slot.');
164
165test(() => {
166 let n = createTestTree(test5);
167 let log = dispatchEventWithLog(n, n.related, new FocusEvent('my-focus', { bubbles: true, composed: true, relatedTarget: n.target }));
168 let path = ['related', 'sr', 'host', 'test5'];
169 assert_event_path_equals(log, [['related', 'related', 'target', path],
170 ['sr', 'related', 'target', path],
171 ['host', 'host', 'target', path],
172 ['test5', 'host', 'target', path]]);
173}, 'Event path for an event with a relatedTarget. relatedTarget is assigned to a slot.');
174</script>
175
176<div id="test6">
177 <div id="host0">
178 <template id="sr0" data-mode="open">
179 <div id="host1">
180 <template id="sr1" data-mode="open">
181 <div id="host2">
182 <template id="sr2" data-mode="open">
183 <slot id="slot2"></slot>
184 <div id="related2"></div>
185 </template>
186 <div id="related1"></div>
187 <div id="d1">
188 <slot id="slot1"></slot>
189 </div>
190 </div>
191 </template>
192 <div id="host3">
193 <template id="sr3" data-mode="open">
194 <div id="host4">
195 <template id="sr4" data-mode="open">
196 <div id="host5">
197 <template id="sr5" data-mode="open">
198 <slot id="slot5"></slot>
199 </template>
200 <slot id="slot4"></slot>
201 </div>
202 </template>
203 <div id="target"></div>
204 </div>
205 </template>
206 </div>
207 </div>
208 </template>
209 </div>
210</div>
211
212<script>
213test(() => {
214 let n = createTestTree(test6);
215 let log = dispatchEventWithLog(n, n.target, new FocusEvent('my-focus', { bubbles: true, composed: true, relatedTarget: n.related1 }));
216 let path = ['target', 'slot4', 'slot5', 'sr5', 'host5', 'sr4', 'host4', 'sr3', 'host3', 'slot1', 'd1', 'slot2', 'sr2', 'host2', 'sr1', 'host1', 'sr0'];
217 assert_event_path_equals(log, [['target', 'target', 'host1', path],
218 ['slot4', 'target', 'host1', path],
219 ['slot5', 'target', 'host1', path],
220 ['sr5', 'target', 'host1', path],
221 ['host5', 'target', 'host1', path],
222 ['sr4', 'target', 'host1', path],
223 ['host4', 'target', 'host1', path],
224 ['sr3', 'target', 'host1', path],
225 ['host3', 'host3', 'host1', path],
226 ['slot1', 'host3', 'related1', path],
227 ['d1' , 'host3', 'related1', path],
228 ['slot2', 'host3', 'related1', path],
229 ['sr2', 'host3', 'related1', path],
230 ['host2', 'host3', 'related1', path],
231 ['sr1', 'host3', 'related1', path],
232 ['host1', 'host3', 'host1', path],
233 ['sr0', 'host3', 'host1' , path]]);
234}, 'Event path for an event with a relatedTarget. Event should be dispatched at every slots.');
235
236test(() => {
237 let n = createTestTree(test6);
238 let log = dispatchEventWithLog(n, n.target, new FocusEvent('my-focus', { bubbles: true, composed: true, relatedTarget: n.related2 }));
239 let path = ['target', 'slot4', 'slot5', 'sr5', 'host5', 'sr4', 'host4', 'sr3', 'host3', 'slot1', 'd1', 'slot2', 'sr2', 'host2', 'sr1', 'host1', 'sr0'];
240 assert_event_path_equals(log, [['target', 'target', 'host1', path],
241 ['slot4', 'target', 'host1', path],
242 ['slot5', 'target', 'host1', path],
243 ['sr5', 'target', 'host1', path],
244 ['host5', 'target', 'host1', path],
245 ['sr4', 'target', 'host1', path],
246 ['host4', 'target', 'host1', path],
247 ['sr3', 'target', 'host1', path],
248 ['host3', 'host3', 'host1', path],
249 ['slot1', 'host3', 'host2', path],
250 ['d1' , 'host3', 'host2', path],
251 ['slot2', 'host3', 'related2', path],
252 ['sr2', 'host3', 'related2', path],
253 ['host2', 'host3', 'host2', path],
254 ['sr1', 'host3', 'host2', path],
255 ['host1', 'host3', 'host1', path],
256 ['sr0', 'host3', 'host1' , path]]);
257}, 'Event path for an event with a relatedTarget. Event should be dispatched at every slots. relatedTarget should be correctly retargeted.');
258</script>