event-composed.html (2972B)
1 <!DOCTYPE html> 2 <title>Shadow DOM: Event composed</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 <div id=host> 8 <template id=shadowRoot data-mode=open> 9 <div id=target></div> 10 </template> 11 </div> 12 <script> 13 test(() => { 14 const e = new Event('test'); 15 assert_equals(e.composed, false); 16 }, 'A new events composed value should be set to false by default.'); 17 18 test(() => { 19 const e = new Event('test', { composed: true }); 20 assert_equals(e.composed, true); 21 }, 'Users should be able to set a composed value.'); 22 23 function assertScoped(event) { 24 let nodes = createTestTree(host); 25 let log = dispatchEventWithLog(nodes, nodes.target, event); 26 let expectedPath = ['target', 'shadowRoot']; 27 assert_event_path_equals(log, 28 [['target', 'target', null, expectedPath], 29 ['shadowRoot', 'target', null, expectedPath]]); 30 } 31 32 function assertComposed(event) { 33 let nodes = createTestTree(host); 34 let log = dispatchEventWithLog(nodes, nodes.target, event); 35 let expectedPath = ['target', 'shadowRoot', 'host']; 36 assert_event_path_equals(log, 37 [['target', 'target', null, expectedPath], 38 ['shadowRoot', 'target', null, expectedPath], 39 ['host', 'host', null, expectedPath]]); 40 } 41 42 test(() => { 43 assertScoped(new Event('test', { bubbles: true })); 44 }, 'An event should be scoped by default'); 45 46 test(() => { 47 assertComposed(new Event('test', { bubbles: true, composed: true })); 48 }, 'An event should not be scoped if composed is specified'); 49 50 test(() => { 51 assertScoped(new MouseEvent('click', { bubbles: true })); 52 }, 'A synthetic MouseEvent should be scoped by default'); 53 54 test(() => { 55 assertComposed(new MouseEvent('click', { bubbles: true, composed: true })); 56 }, 'A synthetic MouseEvent with composed=true should not be scoped'); 57 58 test(() => { 59 assertScoped(new FocusEvent('focus', { bubbles: true })); 60 }, 'A synthetic FocusEvent should be scoped by default'); 61 62 test(() => { 63 assertComposed(new FocusEvent('focus', { bubbles: true, composed: true })); 64 }, 'A synthetic FocusEvent with composed=true should not be scoped'); 65 66 function assertUAComposed(eventType, callback) { 67 let nodes = createTestTree(host); 68 let log = dispatchUAEventWithLog(nodes, nodes.target, eventType, callback); 69 let expectedPath = ['target', 'shadowRoot', 'host']; 70 assert_event_path_equals(log, 71 [['target', 'target', null, expectedPath], 72 ['shadowRoot', 'target', null, expectedPath], 73 ['host', 'host', null, expectedPath]]); 74 } 75 76 test(() => { 77 assertUAComposed('click', (target) => { target.click(); }); 78 }, 'A UA click event should not be scoped'); 79 80 // TODO(hayato): Test other UIEvents. 81 </script>