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 document.body.appendChild( | 7 document.body.appendChild( |
8 createDOM('div', {id: 'host_open'}, | 8 createDOM('div', {id: 'host_open'}, |
9 attachShadow({mode: 'open', id: 'open_shadow'}, | 9 attachShadow({mode: 'open', id: 'open_shadow'}, |
10 createDOM('div', {id: 'inner_open'}, | 10 createDOM('div', {id: 'inner_open'}, |
11 attachShadow({mode: 'open', id: 'open_shadow_in_open_shadow'
}, | 11 attachShadow({mode: 'open', id: 'open_shadow_in_open_shadow'
}, |
12 createDOM('span', {id: 'target_open', tabindex: '0'}, | 12 createDOM('span', {id: 'target_open', tabindex: '0'}, |
13 document.createTextNode('open'))))))); | 13 document.createTextNode('open'))))))); |
14 | 14 |
15 document.body.appendChild( | 15 document.body.appendChild( |
16 createDOM('div', {id: 'host_closed'}, | 16 createDOM('div', {id: 'host_closed'}, |
17 attachShadow({mode: 'closed', id: 'closed_shadow'}, | 17 attachShadow({mode: 'closed', id: 'closed_shadow'}, |
18 createDOM('div', {id: 'inner_closed'}, | 18 createDOM('div', {id: 'inner_closed'}, |
19 attachShadow({mode: 'open', id: 'open_shadow_in_closed_shado
w'}, | 19 attachShadow({mode: 'open', id: 'open_shadow_in_closed_shado
w'}, |
20 createDOM('span', {id: 'target_closed', tabindex: '0'}, | 20 createDOM('span', {id: 'target_closed', tabindex: '0'}, |
21 document.createTextNode('closed'))))))); | 21 document.createTextNode('closed'))))))); |
22 } | 22 } |
23 | 23 |
24 function clickHandler(e) { | 24 function clickHandler(e) { |
25 eventPath = e.deepPath(); | 25 eventPath = e.composedPath(); |
26 } | 26 } |
27 | 27 |
28 debug('Event.deepPath() should include only unclosed nodes.'); | 28 debug('Event.composedPath() should include only unclosed nodes.'); |
29 | 29 |
30 prepareTree(); | 30 prepareTree(); |
31 | 31 |
32 var targetOpen = getNodeInComposedTree('host_open/inner_open/target_open'); | 32 var targetOpen = getNodeInComposedTree('host_open/inner_open/target_open'); |
33 var targetClosed = getNodeInComposedTree('host_closed/inner_closed/target_closed
'); | 33 var targetClosed = getNodeInComposedTree('host_closed/inner_closed/target_closed
'); |
34 | 34 |
35 targetOpen.addEventListener('click', clickHandler, false); | 35 targetOpen.addEventListener('click', clickHandler, false); |
36 targetClosed.addEventListener('click', clickHandler, false); | 36 targetClosed.addEventListener('click', clickHandler, false); |
37 | 37 |
38 debug("\nDispaching a click event on #target_open, listening on #target_open."); | 38 debug("\nDispaching a click event on #target_open, listening on #target_open."); |
39 var eventPath = null; | 39 var eventPath = null; |
40 targetOpen.click(); | 40 targetOpen.click(); |
41 // Expected: <span#target_open>, #open_shadow_in_open_shadow, <div#inner_open>, | 41 // Expected: <span#target_open>, #open_shadow_in_open_shadow, <div#inner_open>, |
42 // #open_shadow, <div#host_open>, <body>, <html>, #document, window | 42 // #open_shadow, <div#host_open>, <body>, <html>, #document, window |
43 shouldBe('eventPath.length', '9'); | 43 shouldBe('eventPath.length', '9'); |
44 debug("\nevent.deepPath() for #target_open:"); | 44 debug("\nevent.composedPath() for #target_open:"); |
45 debug(dumpNodeList(eventPath)); | 45 debug(dumpNodeList(eventPath)); |
46 | 46 |
47 debug("\nDispaching a click event on #target_closed, listening on #target_closed
."); | 47 debug("\nDispaching a click event on #target_closed, listening on #target_closed
."); |
48 eventPath = null; | 48 eventPath = null; |
49 targetClosed.click(); | 49 targetClosed.click(); |
50 // Expected: <span#target_closed>, #open_shadow_in_closed_shadow, <div#inner_clo
sed>, | 50 // Expected: <span#target_closed>, #open_shadow_in_closed_shadow, <div#inner_clo
sed>, |
51 // #closed_shadow, <div#host_closed>, <body>, <html>, #document, window | 51 // #closed_shadow, <div#host_closed>, <body>, <html>, #document, window |
52 shouldBe('eventPath.length', '9'); | 52 shouldBe('eventPath.length', '9'); |
53 debug("\nevent.deepPath() for #target_closed:"); | 53 debug("\nevent.composedPath() for #target_closed:"); |
54 debug(dumpNodeList(eventPath)); | 54 debug(dumpNodeList(eventPath)); |
55 | 55 |
56 | 56 |
57 targetOpen.removeEventListener('click', clickHandler, false); | 57 targetOpen.removeEventListener('click', clickHandler, false); |
58 targetClosed.removeEventListener('click', clickHandler, false); | 58 targetClosed.removeEventListener('click', clickHandler, false); |
59 document.body.addEventListener('click', clickHandler, false); | 59 document.body.addEventListener('click', clickHandler, false); |
60 | 60 |
61 debug("\nDispaching a click event on #target_open, listening on document.body.")
; | 61 debug("\nDispaching a click event on #target_open, listening on document.body.")
; |
62 var eventPath = null; | 62 var eventPath = null; |
63 targetOpen.click(); | 63 targetOpen.click(); |
64 // Expected: <span#target_open>, #open_shadow_in_open_shadow, <div#inner_open>, | 64 // Expected: <span#target_open>, #open_shadow_in_open_shadow, <div#inner_open>, |
65 // #open_shadow, <div#host_open>, <body>, <html>, #document, window | 65 // #open_shadow, <div#host_open>, <body>, <html>, #document, window |
66 shouldBe('eventPath.length', '9'); | 66 shouldBe('eventPath.length', '9'); |
67 debug("\nevent.deepPath() for #target_open:"); | 67 debug("\nevent.composedPath() for #target_open:"); |
68 debug(dumpNodeList(eventPath)); | 68 debug(dumpNodeList(eventPath)); |
69 | 69 |
70 debug("\nDispaching a click event on #target_closed, listening on document.body.
"); | 70 debug("\nDispaching a click event on #target_closed, listening on document.body.
"); |
71 eventPath = null; | 71 eventPath = null; |
72 targetClosed.click(); | 72 targetClosed.click(); |
73 // For this test, <span> and closed shadow root are excluded from the open shado
w case, | 73 // For this test, <span> and closed shadow root are excluded from the open shado
w case, |
74 // thus 9 - 4 = 5. | 74 // thus 9 - 4 = 5. |
75 // Expected: <div#host_closed>, <body>, <html>, #document, window | 75 // Expected: <div#host_closed>, <body>, <html>, #document, window |
76 shouldBe('eventPath.length', '5'); | 76 shouldBe('eventPath.length', '5'); |
77 debug("\nevent.deepPath() for #target_closed:"); | 77 debug("\nevent.composedPath() for #target_closed:"); |
78 debug(dumpNodeList(eventPath)); | 78 debug(dumpNodeList(eventPath)); |
79 </script> | 79 </script> |
OLD | NEW |