event-composed-path-after-dom-mutation.html (1934B)
1 <!DOCTYPE html> 2 <title>Shadow DOM: Event.composedPath() should return the same result even if DOM is mutated</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="host"> 10 <template id="sr" data-mode="closed"> 11 <div id="target"></div> 12 </template> 13 </div> 14 </div> 15 16 <script> 17 async_test((t) => { 18 const n = createTestTree(document.querySelector('#test1')); 19 n.host.addEventListener('my-event', t.step_func((e) => { 20 const path_before = e.composedPath(); 21 // Move the target out of a closed shadow tree 22 n.host.append(n.target); 23 const path_after = e.composedPath(); 24 assert_array_equals(path_before, path_after); 25 t.done(); 26 })); 27 const event = new Event('my-event', { bubbles: true, composed: true }); 28 n.target.dispatchEvent(event); 29 }, 'Event.composedPath() should return the same result even if DOM is mutated (1/2)'); 30 </script> 31 32 <div id="test2"> 33 <div id="host1"> 34 <template id="sr1" data-mode="closed"> 35 <div id="host2"> 36 <template id="sr2" data-mode="open"> 37 <div id="target"></div> 38 </template> 39 </div> 40 </template> 41 </div> 42 </div> 43 44 <script> 45 async_test((t) => { 46 const n = createTestTree(document.querySelector('#test2')); 47 n.host1.addEventListener('my-event', t.step_func((e) => { 48 const path_before = e.composedPath(); 49 // Move nodes out of a closed shadow tree 50 n.host1.append(n.host2); 51 n.host1.append(n.target); 52 const path_after = e.composedPath(); 53 assert_array_equals(path_before, path_after); 54 t.done(); 55 })); 56 const event = new Event('my-event', { bubbles: true, composed: true }); 57 n.target.dispatchEvent(event); 58 }, 'Event.composedPath() should return the same result even if DOM is mutated (2/2)'); 59 </script>