| <!DOCTYPE html> |
| <html> |
| <head> |
| <title>Shadow DOM: Firing an event inside a node assigned to a slot</title> |
| <meta name="author" title="Ryosuke Niwa" href="mailto:rniwa@webkit.org"> |
| <meta name="assert" content="The event path calculation algorithm must be used to determine event path"> |
| <link rel="help" href="https://w3c.github.io/webcomponents/spec/shadow/#event-paths"> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| </head> |
| <body> |
| <div id="log"></div> |
| <script> |
| |
| function dispatchEventWithLog(shadow, event) { |
| var log = []; |
| |
| var attachedNodes = []; |
| for (var nodeKey in shadow) { |
| var startingNode = shadow[nodeKey]; |
| for (var node = startingNode; node; node = node.parentNode) { |
| if (attachedNodes.indexOf(node) >= 0) |
| continue; |
| attachedNodes.push(node); |
| node.addEventListener(event.type, (function (event) { |
| log.push([this, event.target]); |
| }).bind(node)); |
| } |
| } |
| |
| shadow.target.dispatchEvent(event); |
| |
| return log; |
| } |
| |
| function element(name, children, className) { |
| var element = document.createElement(name); |
| if (className) |
| element.className = className; |
| if (children) { |
| for (var child of children) |
| element.appendChild(child); |
| } |
| return element; |
| } |
| |
| function attachShadow(host, mode, children) { |
| var shadowRoot = host.attachShadow({mode: mode}); |
| if (children) { |
| for (var child of children) |
| shadowRoot.appendChild(child); |
| } |
| return shadowRoot; |
| } |
| |
| function createShadowHostWithAssignedGrandChild(mode) { |
| var host = element('div', [ |
| element('b', [ |
| element('i') |
| ]) |
| ]); |
| |
| var root = attachShadow(host, mode, [ |
| element('span', [ |
| element('slot') |
| ]) |
| ]); |
| |
| return {target: host.querySelector('i'), targetParent: host.querySelector('b'), host: host, |
| slot: root.querySelector('slot'), slotParent: root.querySelector('span'), root: root}; |
| } |
| |
| function testEventInDetachedShadowHostDescendant(mode) { |
| test(function () { |
| var shadow = createShadowHostWithAssignedGrandChild(mode); |
| |
| log = dispatchEventWithLog(shadow, new Event('foo', {bubbles: true, composed: true})); |
| |
| assert_equals(log.length, 6, 'EventPath must contain [target, target parent, slot, slot parent, shadow root, shadow host]'); |
| assert_array_equals(log[0], [shadow.target, shadow.target], 'EventPath[0] must be the target'); |
| assert_array_equals(log[1], [shadow.targetParent, shadow.target], 'EventPath[1] must be the parent of the target'); |
| assert_array_equals(log[2], [shadow.slot, shadow.target], 'EventPath[2] must be the slot'); |
| assert_array_equals(log[3], [shadow.slotParent, shadow.target], 'EventPath[3] must be the parent of the slot'); |
| assert_array_equals(log[4], [shadow.root, shadow.target], 'EventPath[4] must be the shadow root'); |
| assert_array_equals(log[5], [shadow.host, shadow.target], 'EventPath[5] must be the shadow host'); |
| |
| }, 'Firing an event inside a grand child of a detached ' + mode + ' mode shadow host'); |
| } |
| |
| testEventInDetachedShadowHostDescendant('open'); |
| testEventInDetachedShadowHostDescendant('closed'); |
| |
| function testEventInShadowHostDescendantInsideDocument(mode) { |
| test(function () { |
| var shadow = createShadowHostWithAssignedGrandChild(mode); |
| document.body.appendChild(shadow.host); |
| |
| log = dispatchEventWithLog(shadow, new Event('foo', {bubbles: true, composed: true})); |
| |
| assert_equals(log.length, 9, 'EventPath must contain [target, target parent, slot, slot parent, shadow root, shadow host, body, html, document]'); |
| assert_array_equals(log[0], [shadow.target, shadow.target], 'EventPath[0] must be the target'); |
| assert_array_equals(log[1], [shadow.targetParent, shadow.target], 'EventPath[1] must be the parent of the target'); |
| assert_array_equals(log[2], [shadow.slot, shadow.target], 'EventPath[2] must be the slot'); |
| assert_array_equals(log[3], [shadow.slotParent, shadow.target], 'EventPath[3] must be the parent of the slot'); |
| assert_array_equals(log[4], [shadow.root, shadow.target], 'EventPath[4] must be the shadow root'); |
| assert_array_equals(log[5], [shadow.host, shadow.target], 'EventPath[5] must be the shadow host'); |
| assert_array_equals(log[6], [document.body, shadow.target], 'EventPath[6] must be the body element'); |
| assert_array_equals(log[7], [document.documentElement, shadow.target], 'EventPath[7] must be the html element'); |
| assert_array_equals(log[8], [document, shadow.target], 'EventPath[8] must be the html element'); |
| |
| }, 'Firing an event inside a grand child of an in-document ' + mode + ' mode shadow host'); |
| } |
| |
| testEventInShadowHostDescendantInsideDocument('open'); |
| testEventInShadowHostDescendantInsideDocument('closed'); |
| |
| function createNestedShadowTreesWithSlots(innerMode, outerUpperMode, outerLowerMode) { |
| var upperHost = element('upper-host', [ |
| element('p', [ |
| element('lower-host', [ |
| element('a') |
| ]) |
| ]) |
| ]); |
| |
| var upperShadow = attachShadow(upperHost, outerUpperMode, [ |
| element('b', [ |
| element('slot', [], 'upper-slot') |
| ]) |
| ]); |
| |
| var lowerHost = upperHost.querySelector('lower-host'); |
| var lowerShadow = attachShadow(lowerHost, outerLowerMode, [ |
| element('em', [ |
| element('inner-host', [ |
| element('span', [ |
| element('slot', [], 'lower-slot') |
| ]) |
| ]) |
| ]) |
| ]); |
| |
| innerShadow = attachShadow(lowerShadow.querySelector('inner-host'), innerMode, [ |
| element('i', [ |
| element('slot', [], 'inner-slot') |
| ]) |
| ]); |
| |
| return { |
| host: upperHost, |
| target: upperHost.querySelector('a'), |
| upperShadow: upperShadow, |
| upperSlot: upperShadow.querySelector('slot'), |
| lowerShadow: lowerShadow, |
| lowerSlot: lowerShadow.querySelector('slot'), |
| innerShadow: innerShadow, |
| innerSlot: innerShadow.querySelector('slot'), |
| }; |
| } |
| |
| /* |
| upper-host (14) -- (upperShadow; 13) |
| + p (10) + b (12) |
| | + slot (upperSlot; 11) |
| + lower-host (9) -- (lowerShadow; 8) |
| + a (target; 0) + em (7) |
| + inner-host (6) -------- (innerShadow; 5) |
| + span (2) + i (4) |
| + slot (lowerSlot; 1) + slot (innerSlot; 3) |
| */ |
| |
| function testEventUnderTwoShadowRoots(outerUpperMode, outerLowerMode, innerMode) { |
| test(function () { |
| var shadow = createNestedShadowTreesWithSlots(innerMode, outerUpperMode, outerLowerMode); |
| |
| log = dispatchEventWithLog(shadow, new Event('foo', {bubbles: true, composed: true})); |
| |
| assert_equals(log.length, 15, 'EventPath must contain 15 targets'); |
| |
| assert_array_equals(log[0], [shadow.target, shadow.target], 'EventPath[0] must be the target'); |
| assert_array_equals(log[1], [shadow.lowerSlot, shadow.target], 'EventPath[1] must be the slot inside the lower shadow tree'); |
| assert_array_equals(log[2], [shadow.lowerSlot.parentNode, shadow.target], 'EventPath[2] must be the parent of the slot inside the lower shadow tree'); |
| assert_array_equals(log[3], [shadow.innerSlot, shadow.target], 'EventPath[3] must be the slot inside the shadow tree inside the lower shadow tree'); |
| assert_array_equals(log[4], [shadow.innerSlot.parentNode, shadow.target], 'EventPath[4] must be the child of the inner shadow root'); |
| assert_array_equals(log[5], [shadow.innerShadow, shadow.target], 'EventPath[5] must be the inner shadow root'); |
| assert_array_equals(log[6], [shadow.innerShadow.host, shadow.target], 'EventPath[6] must be the host of the inner shadow tree'); |
| assert_array_equals(log[7], [shadow.lowerShadow.firstChild, shadow.target], 'EventPath[7] must be the parent of the inner shadow host'); |
| assert_array_equals(log[8], [shadow.lowerShadow, shadow.target], 'EventPath[8] must be the lower shadow root'); |
| assert_array_equals(log[9], [shadow.lowerShadow.host, shadow.target], 'EventPath[9] must be the lower shadow host'); |
| assert_array_equals(log[10], [shadow.host.firstChild, shadow.target], 'EventPath[10] must be the parent of the grand parent of the target'); |
| assert_array_equals(log[11], [shadow.upperSlot, shadow.target], 'EventPath[11] must be the slot inside the upper shadow tree'); |
| assert_array_equals(log[12], [shadow.upperSlot.parentNode, shadow.target], 'EventPath[12] must be the parent of the slot inside the upper shadow tree'); |
| assert_array_equals(log[13], [shadow.upperShadow, shadow.target], 'EventPath[13] must be the upper shadow root'); |
| assert_array_equals(log[14], [shadow.host, shadow.target], 'EventPath[14] must be the host'); |
| |
| }, 'Firing an event on a node with two ancestors with a detached ' + outerUpperMode + ' and ' + outerLowerMode |
| + ' shadow trees with an inner ' + innerMode + ' shadow tree'); |
| } |
| |
| testEventUnderTwoShadowRoots('open', 'open', 'open'); |
| testEventUnderTwoShadowRoots('open', 'open', 'closed'); |
| testEventUnderTwoShadowRoots('open', 'closed', 'open'); |
| testEventUnderTwoShadowRoots('open', 'closed', 'closed'); |
| testEventUnderTwoShadowRoots('closed', 'open', 'open'); |
| testEventUnderTwoShadowRoots('closed', 'open', 'closed'); |
| testEventUnderTwoShadowRoots('closed', 'closed', 'open'); |
| testEventUnderTwoShadowRoots('closed', 'closed', 'closed'); |
| |
| /* |
| upper-host (11) -- (upperShadow; 10) |
| + p (7) + b (9) |
| | + slot (upperSlot; 8) |
| + lower-host (6) -- (lowerShadow; 5) |
| + a + em (4) |
| + inner-host (3) -- (innerShadow; 2) |
| + span + i (1) |
| + slot + slot (innerSlot, target; 0) |
| */ |
| |
| function testEventInsideNestedShadowsUnderAnotherShadow(outerUpperMode, outerLowerMode, innerMode) { |
| test(function () { |
| var shadow = createNestedShadowTreesWithSlots(innerMode, outerUpperMode, outerLowerMode); |
| shadow.deepestNodeInLightDOM = shadow.target; // Needed for dispatchEventWithLog to attach event listeners. |
| shadow.target = shadow.innerSlot; |
| |
| log = dispatchEventWithLog(shadow, new Event('foo', {bubbles: true, composed: true})); |
| |
| assert_equals(log.length, 12, 'EventPath must contain 12 targets'); |
| |
| assert_array_equals(log[0], [shadow.target, shadow.target], 'EventPath[0] must be the target'); |
| assert_array_equals(log[1], [shadow.target.parentNode, shadow.target], 'EventPath[1] must be the parent of the target'); |
| assert_array_equals(log[2], [shadow.innerShadow, shadow.target], 'EventPath[2] must be the inner shadow root'); |
| assert_array_equals(log[3], [shadow.innerShadow.host, shadow.innerShadow.host], 'EventPath[3] must be the inner shadow host'); |
| assert_array_equals(log[4], [shadow.lowerShadow.firstChild, shadow.innerShadow.host], 'EventPath[4] must be the parent of the inner shadow host'); |
| assert_array_equals(log[5], [shadow.lowerShadow, shadow.innerShadow.host], 'EventPath[5] must be the lower (but outer) shadow root'); |
| assert_array_equals(log[6], [shadow.lowerShadow.host, shadow.lowerShadow.host], 'EventPath[6] must be the lower (but outer) shadow root'); |
| assert_array_equals(log[7], [shadow.host.firstChild, shadow.lowerShadow.host], 'EventPath[7] must be the slot inside the upper shadow tree'); |
| assert_array_equals(log[8], [shadow.upperSlot, shadow.lowerShadow.host], 'EventPath[8] must be the slot inside the upper shadow tree'); |
| assert_array_equals(log[9], [shadow.upperSlot.parentNode, shadow.lowerShadow.host], 'EventPath[9] must be the parent of the slot inside the upper shadow tree'); |
| assert_array_equals(log[10], [shadow.upperShadow, shadow.lowerShadow.host], 'EventPath[10] must be the upper shadow root'); |
| assert_array_equals(log[11], [shadow.upperShadow.host, shadow.lowerShadow.host], 'EventPath[11] must be the host'); |
| |
| }, 'Firing an event on a node within a ' + innerMode + ' shadow tree that is itself a ' + outerLowerMode |
| + ' shadow tree (the latter being the descendent of a host for a separate ' + outerUpperMode + ' shadow tree)'); |
| } |
| |
| testEventInsideNestedShadowsUnderAnotherShadow('open', 'open', 'open'); |
| testEventInsideNestedShadowsUnderAnotherShadow('open', 'open', 'closed'); |
| testEventInsideNestedShadowsUnderAnotherShadow('open', 'closed', 'open'); |
| testEventInsideNestedShadowsUnderAnotherShadow('open', 'closed', 'closed'); |
| testEventInsideNestedShadowsUnderAnotherShadow('closed', 'open', 'open'); |
| testEventInsideNestedShadowsUnderAnotherShadow('closed', 'open', 'closed'); |
| testEventInsideNestedShadowsUnderAnotherShadow('closed', 'closed', 'open'); |
| testEventInsideNestedShadowsUnderAnotherShadow('closed', 'closed', 'closed'); |
| |
| </script> |
| </body> |
| </html> |
