OLD | NEW |
1 <!doctype html> | 1 <!doctype html> |
2 <script src="../resources/js-test.js"></script> | 2 <script src="../resources/js-test.js"></script> |
3 <script src="../fast/dom/shadow/resources/shadow-dom.js"></script> | 3 <script src="../fast/dom/shadow/resources/shadow-dom.js"></script> |
4 <body></body> | 4 <body></body> |
5 <script> | 5 <script> |
6 function prepareTree() { | 6 function prepareTree() { |
7 // Note: #target will be distributed to furthest <content>. | 7 // Note: #target will be distributed to furthest <content>. |
8 document.body.appendChild( | 8 document.body.appendChild( |
9 createDOM('div', {id: 'host_closed'}, | 9 createDOM('div', {id: 'host_closed'}, |
10 attachShadow({mode: 'closed'}, | 10 attachShadow({mode: 'closed'}, |
11 createDOM('div', {id: 'div1_open'}, | 11 createDOM('div', {id: 'div1_open'}, |
12 createDOM('content', {id: 'c1'}), | 12 createDOM('content', {id: 'c1'}), |
13 attachShadow({mode: 'open'}, | 13 attachShadow({mode: 'open'}, |
14 createDOM('content', {id: 'c2'})))), | 14 createDOM('content', {id: 'c2'})))), |
15 createDOM('div', {id: 'host_open'}, | 15 createDOM('div', {id: 'host_open'}, |
16 attachShadow({mode: 'open'}, | 16 attachShadow({mode: 'open'}, |
17 createDOM('div', {id: 'div2_closed'}, | 17 createDOM('div', {id: 'div2_closed'}, |
18 attachShadow({mode: 'closed'}, | 18 attachShadow({mode: 'closed'}, |
19 createDOM('div', {id: 'div3_open'}, | 19 createDOM('div', {id: 'div3_open'}, |
20 attachShadow({mode: 'open'}, | 20 attachShadow({mode: 'open'}, |
21 createDOM('div', {id: 'target'}))))))))); | 21 createDOM('div', {id: 'target'}))))))))); |
22 } | 22 } |
23 | 23 |
24 debug('Event.deepPath() should include only unclosed nodes.'); | 24 debug('Event.composedPath() should include only unclosed nodes.'); |
25 | 25 |
26 prepareTree(); | 26 prepareTree(); |
27 | 27 |
28 var target = getNodeInComposedTree('host_open/div2_closed/div3_open/target'); | 28 var target = getNodeInComposedTree('host_open/div2_closed/div3_open/target'); |
29 | 29 |
30 debug('The full event path should be (length=12):\n' + | 30 debug('The full event path should be (length=12):\n' + |
31 'div#target, #shadow-root (open), div#div3_open, #shadow-root (closed),\n'
+ | 31 'div#target, #shadow-root (open), div#div3_open, #shadow-root (closed),\n'
+ |
32 'div#div2_closed, #shadow-root (open), div#host_open, div#host_closed,\n'
+ | 32 'div#div2_closed, #shadow-root (open), div#host_open, div#host_closed,\n'
+ |
33 'body, html, #document, window\n'); | 33 'body, html, #document, window\n'); |
34 | 34 |
35 debug('On #host_closed, #host_open, and #div2_closed,\n' + | 35 debug('On #host_closed, #host_open, and #div2_closed,\n' + |
36 'div#target, #shadow-root (open), div#div3_open, #shadow-root (closed)\n'
+ | 36 'div#target, #shadow-root (open), div#div3_open, #shadow-root (closed)\n'
+ |
37 'will be trimmed (length=8).\n'); | 37 'will be trimmed (length=8).\n'); |
38 | 38 |
39 ['host_closed', 'host_open', 'host_open/div2_closed', 'host_open/div2_closed/div
3_open', 'host_open/div2_closed/div3_open/target'].forEach(function(nodePath) { | 39 ['host_closed', 'host_open', 'host_open/div2_closed', 'host_open/div2_closed/div
3_open', 'host_open/div2_closed/div3_open/target'].forEach(function(nodePath) { |
40 var node = getNodeInComposedTree(nodePath); | 40 var node = getNodeInComposedTree(nodePath); |
41 | 41 |
42 var eventPath; | 42 var eventPath; |
43 var clickHandler = function(e) { eventPath = e.deepPath(); }; | 43 var clickHandler = function(e) { eventPath = e.composedPath(); }; |
44 node.addEventListener('click', clickHandler, false); | 44 node.addEventListener('click', clickHandler, false); |
45 | 45 |
46 debug('\nDispaching a click event on #target, listening on #' + node.id + '.')
; | 46 debug('\nDispaching a click event on #target, listening on #' + node.id + '.')
; |
47 eventPath = null; | 47 eventPath = null; |
48 target.click(); | 48 target.click(); |
49 debug('Got event.deepPath() for #' + node.id + ':'); | 49 debug('Got event.composedPath() for #' + node.id + ':'); |
50 debug(dumpNodeList(eventPath)); | 50 debug(dumpNodeList(eventPath)); |
51 | 51 |
52 node.removeEventListener('click', clickHandler, false); | 52 node.removeEventListener('click', clickHandler, false); |
53 }); | 53 }); |
54 </script> | 54 </script> |
OLD | NEW |