event-composed-path-with-related-target.html (12034B)
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"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 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> 14 test(() => { 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> 24 test(() => { 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]]); 30 }, 'Event path for an event with a relatedTarget. Event should be dispatched even when target and relatedTarget are same.'); 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> 43 test(() => { 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 51 test(() => { 52 let n = createTestTree(test2); 53 let log = dispatchEventWithLog(n, n.target, new FocusEvent('my-focus', { bubbles: true, composed: true, relatedTarget: n.target })); 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.'); 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> 77 test(() => { 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 88 test(() => { 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> 116 test(() => { 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 126 test(() => { 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. relatedTarget is a shadow-including ancestor of target.'); 135 136 test(() => { 137 let n = createTestTree(test4); 138 let log = dispatchEventWithLog(n, n.host1, new FocusEvent('my-focus', { bubbles: true, composed: true, relatedTarget: n.target })); 139 assert_event_path_equals(log, []); 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> 154 test(() => { 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 165 test(() => { 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> 213 test(() => { 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 236 test(() => { 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>