Google Git
Sign in
chromium / external / w3c / web-platform-tests / c16fbd434e195839ee5b1af0aac98a93646adb85 / . / shadow-dom / event-composed-path-with-related-target.html
blob: 675a7d7b12f80a6f4b51874097527c02c5aa86cc [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]]);
134}, 'Event path for an event with a relatedTarget. relaterTarget is a shadow-including ancestor of target.');
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 Ito758d3382016-10-05 02:30:47[diff] [blame]139 let path = ['host1', 'test4'];
140 assert_event_path_equals(log, [['host1', 'host1', 'host1', path],
141 ['test4', 'host1', 'host1', path]]);
Hayato Ito4bcdc1e2016-06-20 08:11:25[diff] [blame]142}, 'Event path for an event with a relatedTarget. target is a shadow-including ancestor of relatedTarget.');
143</script>
144
145<div id="test5">
146 <div id="host">
147 <template id="sr" data-mode="open">
148 <slot id="slot"></slot>
149 <div id="related"></div>
150 </template>
151 <div id="target"></div>
152 </div>
153</div>
154
155<script>
156test(() => {
157 let n = createTestTree(test5);
158 let log = dispatchEventWithLog(n, n.target, new FocusEvent('my-focus', { bubbles: true, composed: true, relatedTarget: n.related }));
159 let path = ['target', 'slot', 'sr', 'host', 'test5'];
160 assert_event_path_equals(log, [['target', 'target', 'host', path],
161 ['slot', 'target', 'related', path],
162 ['sr', 'target', 'related', path],
163 ['host', 'target', 'host', path],
164 ['test5', 'target', 'host', path]]);
165}, 'Event path for an event with a relatedTarget. target is assigned to a slot.');
166
167test(() => {
168 let n = createTestTree(test5);
169 let log = dispatchEventWithLog(n, n.related, new FocusEvent('my-focus', { bubbles: true, composed: true, relatedTarget: n.target }));
170 let path = ['related', 'sr', 'host', 'test5'];
171 assert_event_path_equals(log, [['related', 'related', 'target', path],
172 ['sr', 'related', 'target', path],
173 ['host', 'host', 'target', path],
174 ['test5', 'host', 'target', path]]);
175}, 'Event path for an event with a relatedTarget. relatedTarget is assigned to a slot.');
176</script>
177
178<div id="test6">
179 <div id="host0">
180 <template id="sr0" data-mode="open">
181 <div id="host1">
182 <template id="sr1" data-mode="open">
183 <div id="host2">
184 <template id="sr2" data-mode="open">
185 <slot id="slot2"></slot>
186 <div id="related2"></div>
187 </template>
188 <div id="related1"></div>
189 <div id="d1">
190 <slot id="slot1"></slot>
191 </div>
192 </div>
193 </template>
194 <div id="host3">
195 <template id="sr3" data-mode="open">
196 <div id="host4">
197 <template id="sr4" data-mode="open">
198 <div id="host5">
199 <template id="sr5" data-mode="open">
200 <slot id="slot5"></slot>
201 </template>
202 <slot id="slot4"></slot>
203 </div>
204 </template>
205 <div id="target"></div>
206 </div>
207 </template>
208 </div>
209 </div>
210 </template>
211 </div>
212</div>
213
214<script>
215test(() => {
216 let n = createTestTree(test6);
217 let log = dispatchEventWithLog(n, n.target, new FocusEvent('my-focus', { bubbles: true, composed: true, relatedTarget: n.related1 }));
218 let path = ['target', 'slot4', 'slot5', 'sr5', 'host5', 'sr4', 'host4', 'sr3', 'host3', 'slot1', 'd1', 'slot2', 'sr2', 'host2', 'sr1', 'host1', 'sr0'];
219 assert_event_path_equals(log, [['target', 'target', 'host1', path],
220 ['slot4', 'target', 'host1', path],
221 ['slot5', 'target', 'host1', path],
222 ['sr5', 'target', 'host1', path],
223 ['host5', 'target', 'host1', path],
224 ['sr4', 'target', 'host1', path],
225 ['host4', 'target', 'host1', path],
226 ['sr3', 'target', 'host1', path],
227 ['host3', 'host3', 'host1', path],
228 ['slot1', 'host3', 'related1', path],
229 ['d1' , 'host3', 'related1', path],
230 ['slot2', 'host3', 'related1', path],
231 ['sr2', 'host3', 'related1', path],
232 ['host2', 'host3', 'related1', path],
233 ['sr1', 'host3', 'related1', path],
234 ['host1', 'host3', 'host1', path],
235 ['sr0', 'host3', 'host1' , path]]);
236}, 'Event path for an event with a relatedTarget. Event should be dispatched at every slots.');
237
238test(() => {
239 let n = createTestTree(test6);
240 let log = dispatchEventWithLog(n, n.target, new FocusEvent('my-focus', { bubbles: true, composed: true, relatedTarget: n.related2 }));
241 let path = ['target', 'slot4', 'slot5', 'sr5', 'host5', 'sr4', 'host4', 'sr3', 'host3', 'slot1', 'd1', 'slot2', 'sr2', 'host2', 'sr1', 'host1', 'sr0'];
242 assert_event_path_equals(log, [['target', 'target', 'host1', path],
243 ['slot4', 'target', 'host1', path],
244 ['slot5', 'target', 'host1', path],
245 ['sr5', 'target', 'host1', path],
246 ['host5', 'target', 'host1', path],
247 ['sr4', 'target', 'host1', path],
248 ['host4', 'target', 'host1', path],
249 ['sr3', 'target', 'host1', path],
250 ['host3', 'host3', 'host1', path],
251 ['slot1', 'host3', 'host2', path],
252 ['d1' , 'host3', 'host2', path],
253 ['slot2', 'host3', 'related2', path],
254 ['sr2', 'host3', 'related2', path],
255 ['host2', 'host3', 'host2', path],
256 ['sr1', 'host3', 'host2', path],
257 ['host1', 'host3', 'host1', path],
258 ['sr0', 'host3', 'host1' , path]]);
259}, 'Event path for an event with a relatedTarget. Event should be dispatched at every slots. relatedTarget should be correctly retargeted.');
260</script>