| <!DOCTYPE html> |
| <script src="../resources/testharness.js"></script> |
| <script src="../resources/testharnessreport.js"></script> |
| <script src="resources/shadow-dom.js"></script> |
| |
| <div id="test1"> |
| <div id="d1"> |
| <div id="target"></div> |
| </div> |
| </div> |
| |
| <script> |
| test(() => { |
| window.addEventListener('my-event', (e) => { |
| assert_array_equals(e.composedPath(), [document.body, document.documentElement, document, window]); |
| }); |
| let event = new Event('my-event', { bubbles: true, composed: false }); |
| document.body.dispatchEvent(event); |
| }, 'event.composedPath() on window.'); |
| </script> |
| |
| <script> |
| test(() => { |
| let n = createTestTree(test1); |
| let event = new Event('my-event', { bubbles: true, composed: false }); |
| let log = dispatchEventWithLog(n, n.target, event); |
| let path = ['target', 'd1', 'test1']; |
| assert_event_path_equals(log, |
| [['target', 'target', null, path], |
| ['d1', 'target', null, path], |
| ['test1', 'target', null, path]]); |
| }, 'Event Path without ShadowRoots (composed: false).'); |
| </script> |
| |
| <div id="test2"> |
| <div id="host"> |
| <template id="sr" data-mode="open"> |
| <div id="target"></div> |
| </template> |
| </div> |
| </div> |
| |
| <script> |
| test(() => { |
| let n = createTestTree(test2); |
| let event = new Event('my-event', { bubbles: true, composed: false }); |
| let log = dispatchEventWithLog(n, n.target, event); |
| let path = ['target', 'sr']; |
| assert_event_path_equals(log, |
| [['target', 'target', null, path], |
| ['sr', 'target', null, path]]); |
| }, 'Event Path with an open ShadowRoot (composed: false).'); |
| </script> |
| |
| <div id="test3"> |
| <div id="host"> |
| <template id="sr" data-mode="closed"> |
| <div id="target"></div> |
| </template> |
| </div> |
| </div> |
| |
| <script> |
| test(() => { |
| let n = createTestTree(test3); |
| let event = new Event('my-event', { bubbles: true, composed: false }); |
| let log = dispatchEventWithLog(n, n.target, event); |
| let path = ['target', 'sr']; |
| assert_event_path_equals(log, |
| [['target', 'target', null, path], |
| ['sr', 'target', null, path]]); |
| }, 'Event Path with an closed ShadowRoot (composed: false).'); |
| </script> |
| |
| <div id="test4"> |
| <div id="host1"> |
| <template id="sr1" data-mode="open"> |
| <div id="host2"> |
| <template id="sr2" data-mode="open"> |
| <div id="target"></div> |
| </template> |
| </div> |
| </template> |
| </div> |
| </div> |
| |
| <script> |
| test(() => { |
| let n = createTestTree(test4); |
| let event = new Event('my-event', { bubbles: true, composed: false }); |
| let log = dispatchEventWithLog(n, n.target, event); |
| let path = ['target', 'sr2']; |
| assert_event_path_equals(log, [['target', 'target', null, path], |
| ['sr2', 'target', null, path]]); |
| }, 'Event Path with nested ShadowRoots (composed: false): open > open.'); |
| </script> |
| |
| <div id="test5"> |
| <div id="host1"> |
| <template id="sr1" data-mode="open"> |
| <div id="host2"> |
| <template id="sr2" data-mode="closed"> |
| <div id="target"></div> |
| </template> |
| </div> |
| </template> |
| </div> |
| </div> |
| |
| <script> |
| test(() => { |
| let n = createTestTree(test5); |
| let event = new Event('my-event', { bubbles: true, composed: false }); |
| let log = dispatchEventWithLog(n, n.target, event); |
| let path = ['target', 'sr2']; |
| assert_event_path_equals(log, [['target', 'target', null, path], |
| ['sr2', 'target', null, path]]); |
| }, 'Event Path with nested ShadowRoots (composed: false): open > closed.'); |
| </script> |
| |
| <div id="test6"> |
| <div id="host1"> |
| <template id="sr1" data-mode="closed"> |
| <div id="host2"> |
| <template id="sr2" data-mode="open"> |
| <div id="target"></div> |
| </template> |
| </div> |
| </template> |
| </div> |
| </div> |
| |
| <script> |
| test(() => { |
| let n = createTestTree(test6); |
| let event = new Event('my-event', { bubbles: true, composed: false }); |
| let log = dispatchEventWithLog(n, n.target, event); |
| let path = ['target', 'sr2']; |
| assert_event_path_equals(log, [['target', 'target', null, path], |
| ['sr2', 'target', null, path]]); |
| }, 'Event Path with nested ShadowRoots (composed: false): closed > open.'); |
| </script> |
| |
| <div id="test7"> |
| <div id="host1"> |
| <template id="sr1" data-mode="closed"> |
| <div id="host2"> |
| <template id="sr2" data-mode="closed"> |
| <div id="target"></div> |
| </template> |
| </div> |
| </template> |
| </div> |
| </div> |
| |
| <script> |
| test(() => { |
| let n = createTestTree(test7); |
| let event = new Event('my-event', { bubbles: true, composed: false }); |
| let log = dispatchEventWithLog(n, n.target, event); |
| let path = ['target', 'sr2']; |
| assert_event_path_equals(log, [['target', 'target', null, path], |
| ['sr2', 'target', null, path]]); |
| }, 'Event Path with nested ShadowRoots (composed: false): closed > closed.'); |
| </script> |
| |
| <div id="test8"> |
| <div id="host1"> |
| <template id="sr1" data-mode="open"> |
| <slot id="slot"></slot> |
| </template> |
| <div id="target"></div> |
| </div> |
| </div> |
| |
| <script> |
| test(() => { |
| let n = createTestTree(test8); |
| let event = new Event('my-event', { bubbles: true, composed: false }); |
| let log = dispatchEventWithLog(n, n.target, event); |
| let path = ['target','slot', 'sr1', 'host1', 'test8']; |
| assert_event_path_equals(log, [['target', 'target', null, path], |
| ['slot', 'target', null, path], |
| ['sr1', 'target', null, path], |
| ['host1', 'target', null, path], |
| ['test8', 'target', null, path]]); |
| }, 'Event Path with a slot in an open Shadow Root (composed: false).'); |
| </script> |
| |
| <div id="test9"> |
| <div id="host1"> |
| <template id="sr1" data-mode="closed"> |
| <slot id="slot"></slot> |
| </template> |
| <div id="target"></div> |
| </div> |
| </div> |
| |
| <script> |
| test(() => { |
| let n = createTestTree(test9); |
| let event = new Event('my-event', { bubbles: true, composed: false }); |
| let log = dispatchEventWithLog(n, n.target, event); |
| let path = ['target', 'slot', 'sr1', 'host1', 'test9']; |
| let path1 = ['target', 'host1', 'test9']; |
| assert_event_path_equals(log, [['target', 'target', null, path1], |
| ['slot', 'target', null, path], |
| ['sr1', 'target', null, path], |
| ['host1', 'target', null, path1], |
| ['test9', 'target', null, path1]]); |
| }, 'Event Path with a slot in a closed Shadow Root (composed: false).'); |
| </script> |
| |
| <div id="test10"> |
| <div id="host1"> |
| <template id="sr1" data-mode="open"> |
| <div id="host2"> |
| <template id="sr2" data-mode="open"> |
| <slot id="slot2"></slot> |
| </template> |
| <slot id="slot1"></slot> |
| </div> |
| </template> |
| <div id="target"></div> |
| </div> |
| </div> |
| |
| <script> |
| test(() => { |
| let n = createTestTree(test10); |
| let event = new Event('my-event', { bubbles: true, composed: false }); |
| let log = dispatchEventWithLog(n, n.target, event); |
| let path = ['target','slot1', 'slot2', 'sr2', 'host2', 'sr1', 'host1', 'test10']; |
| assert_event_path_equals(log, [['target', 'target', null, path], |
| ['slot1', 'target', null, path], |
| ['slot2', 'target', null, path], |
| ['sr2', 'target', null, path], |
| ['host2', 'target', null, path], |
| ['sr1', 'target', null, path], |
| ['host1', 'target', null, path], |
| ['test10', 'target', null, path]]); |
| }, 'Event Path with slots in nested ShadowRoots (composed: false): open > open.'); |
| </script> |
| |
| <div id="test11"> |
| <div id="host1"> |
| <template id="sr1" data-mode="closed"> |
| <div id="host2"> |
| <template id="sr2" data-mode="closed"> |
| <slot id="slot2"></slot> |
| </template> |
| <slot id="slot1"></slot> |
| </div> |
| </template> |
| <div id="target"></div> |
| </div> |
| </div> |
| |
| <script> |
| test(() => { |
| let n = createTestTree(test11); |
| let event = new Event('my-event', { bubbles: true, composed: false }); |
| let log = dispatchEventWithLog(n, n.target, event); |
| let path = ['target', 'slot1', 'slot2', 'sr2', 'host2', 'sr1', 'host1', 'test11']; |
| let path1 = ['target', 'slot1', 'host2', 'sr1', 'host1', 'test11']; |
| let path2 = ['target', 'host1', 'test11']; |
| assert_event_path_equals(log, [['target', 'target', null, path2], |
| ['slot1', 'target', null, path1], |
| ['slot2', 'target', null, path], |
| ['sr2', 'target', null, path], |
| ['host2', 'target', null, path1], |
| ['sr1', 'target', null, path1], |
| ['host1', 'target', null, path2], |
| ['test11', 'target', null, path2]]); |
| }, 'Event Path with slots in nested ShadowRoots (composed: false): closed > closed.'); |
| </script> |
| |
| <div id="test12"> |
| <div id="host1"> |
| <template id="sr1" data-mode="open"> |
| <div id="host2"> |
| <template id="sr2" data-mode="open"> |
| <slot id="slot"></slot> |
| </template> |
| <div id="target"></div> |
| </div> |
| </template> |
| </div> |
| </div> |
| |
| <script> |
| test(() => { |
| let n = createTestTree(test12); |
| let event = new Event('my-event', { bubbles: true, composed: false }); |
| let log = dispatchEventWithLog(n, n.target, event); |
| let path = ['target', 'slot', 'sr2', 'host2', 'sr1']; |
| assert_event_path_equals(log, [['target', 'target', null, path], |
| ['slot', 'target', null, path], |
| ['sr2', 'target', null, path], |
| ['host2', 'target', null, path], |
| ['sr1', 'target', null, path]]); |
| }, 'Event Path with slots in nested ShadowRoots (composed: false): open > open. Target is not in the document tree scope.'); |
| </script> |
| |
| <div id="test13"> |
| <div id="host1"> |
| <template id="sr1" data-mode="open"> |
| <div id="host2"> |
| <template id="sr2" data-mode="closed"> |
| <slot id="slot"></slot> |
| </template> |
| <div id="target"></div> |
| </div> |
| </template> |
| </div> |
| </div> |
| |
| <script> |
| test(() => { |
| let n = createTestTree(test13); |
| let event = new Event('my-event', { bubbles: true, composed: false }); |
| let log = dispatchEventWithLog(n, n.target, event); |
| let path = ['target', 'slot', 'sr2', 'host2', 'sr1']; |
| let path1 = ['target', 'host2', 'sr1']; |
| assert_event_path_equals(log, [['target', 'target', null, path1], |
| ['slot', 'target', null, path], |
| ['sr2', 'target', null, path], |
| ['host2', 'target', null, path1], |
| ['sr1', 'target', null, path1]]); |
| }, 'Event Path with slots in nested ShadowRoots (composed: false): open > closed. Target is not in the document tree scope.'); |
| </script> |