| <!DOCTYPE html> |
| <script src='../resources/testharness.js'></script> |
| <script src='../resources/testharnessreport.js'></script> |
| <script src='resources/shadow-dom.js'></script> |
| <div id='host1'> |
| <input id='input1' slot='slot1'> |
| <template data-mode='open'> |
| <slot name='slot1'></slot> |
| </template> |
| </div> |
| |
| <div id='host2'> |
| <input id='input2' slot='slot2'> |
| <template data-mode='open'> |
| <div id='host3'> |
| <div id='slot2-parent'> |
| <slot name='slot2'></slot> |
| </div> |
| <template data-mode='v0'> |
| <content select='#slot2-parent'></content> |
| </template> |
| </div> |
| </template> |
| </div> |
| |
| <div id='host4'> |
| <template data-mode='open'> |
| <slot name='slot3'></slot> |
| </template> |
| <div id='input-parent' slot='slot3'> |
| <input id='input3'> |
| </div> |
| </div> |
| <script> |
| |
| test(function() { |
| var host1 = document.getElementById('host1'); |
| convertTemplatesToShadowRootsWithin(host1); |
| removeWhiteSpaceOnlyTextNodes(host1); |
| var input1 = document.getElementById('input1'); |
| var slot1 = host1.shadowRoot.querySelector('slot'); |
| var shadowRoot = host1.shadowRoot; |
| input1.onfocus = function(e) { |
| var expected_array1 = [input1, slot1, shadowRoot, host1, document.body, document.documentElement, document, window]; |
| assert_array_equals(e.composedPath(), expected_array1); |
| }; |
| input1.focus(); |
| }, 'Triggered in a slotted element, eventPath should go through shadow tree.'); |
| |
| test(function() { |
| var input2 = document.getElementById('input2'); |
| var host2 = document.getElementById('host2'); |
| convertTemplatesToShadowRootsWithin(host2); |
| var shadowRootV1 = host2.shadowRoot; |
| var host3 = shadowRootV1.querySelector('#host3'); |
| convertTemplatesToShadowRootsWithin(host3); |
| var slotParent = host3.querySelector('div'); |
| var slot2 = host3.querySelector('slot'); |
| var shadowRootV0 = host3.shadowRoot; |
| var content = shadowRootV0.querySelector('content'); |
| |
| input2.onfocus = function(e) { |
| var expected_array2 = [input2, slot2, slotParent, content, shadowRootV0, host3, shadowRootV1, host2, document.body, document.documentElement, document, window]; |
| assert_array_equals(e.composedPath(), expected_array2); |
| }; |
| input2.focus(); |
| }, 'EventPath works fine with v0 insertion points & v1 slots.'); |
| |
| test(function() { |
| var host4 = document.getElementById('host4'); |
| convertTemplatesToShadowRootsWithin(host4); |
| var shadowRoot2 = host4.shadowRoot; |
| var slot3 = shadowRoot2.querySelector('slot'); |
| var input3 = document.getElementById('input3') |
| var inputParent = document.getElementById('input-parent'); |
| input3.onfocus = function(e) { |
| var expected_array3 = [input3, inputParent, slot3, shadowRoot2, host4, document.body, document.documentElement, document, window]; |
| assert_array_equals(e.composedPath(), expected_array3); |
| }; |
| input3.focus(); |
| }, 'EventPath works fine when event happens to a descendant of a slotted element.'); |
| |
| </script> |