<!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:[email protected]">
<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>
Codebase Browser
chromium