| <!doctype html> |
| <script src="../../resources/js-test.js"></script> |
| <script src="../../fast/dom/shadow/resources/shadow-dom.js"></script> |
| <body></body> |
| <script> |
| function prepareTree() { |
| // Note: #target will be distributed to furthest <content>. |
| document.body.appendChild( |
| createDOM('div', {id: 'host_closed'}, |
| attachShadow({mode: 'closed'}, |
| createDOM('div', {id: 'div1_open'}, |
| createDOM('content', {id: 'c1'}), |
| attachShadow({mode: 'open'}, |
| createDOM('content', {id: 'c2'})))), |
| createDOM('div', {id: 'host_open'}, |
| attachShadow({mode: 'open'}, |
| createDOM('div', {id: 'div2_closed'}, |
| attachShadow({mode: 'closed'}, |
| createDOM('div', {id: 'div3_open'}, |
| attachShadow({mode: 'open'}, |
| createDOM('div', {id: 'target'}))))))))); |
| } |
| |
| debug('Event.composedPath() should include only unclosed nodes.'); |
| |
| prepareTree(); |
| |
| var target = getNodeInComposedTree('host_open/div2_closed/div3_open/target'); |
| |
| debug('The full event path should be (length=12):\n' + |
| 'div#target, #shadow-root (open), div#div3_open, #shadow-root (closed),\n' + |
| 'div#div2_closed, #shadow-root (open), div#host_open, div#host_closed,\n' + |
| 'body, html, #document, window\n'); |
| |
| debug('On #host_closed, #host_open, and #div2_closed,\n' + |
| 'div#target, #shadow-root (open), div#div3_open, #shadow-root (closed)\n' + |
| 'will be trimmed (length=8).\n'); |
| |
| ['host_closed', 'host_open', 'host_open/div2_closed', 'host_open/div2_closed/div3_open', 'host_open/div2_closed/div3_open/target'].forEach(function(nodePath) { |
| var node = getNodeInComposedTree(nodePath); |
| |
| var eventPath; |
| var clickHandler = function(e) { eventPath = e.composedPath(); }; |
| node.addEventListener('click', clickHandler, false); |
| |
| debug('\nDispaching a click event on #target, listening on #' + node.id + '.'); |
| eventPath = null; |
| target.click(); |
| debug('Got event.composedPath() for #' + node.id + ':'); |
| debug(dumpNodeList(eventPath)); |
| |
| node.removeEventListener('click', clickHandler, false); |
| }); |
| </script> |
