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