<!DOCTYPE html> <html> <head> <title>Shadow DOM: HTMLSlotElement interface</title> <meta name="author" title="Ryosuke Niwa" href="mailto:rniwa@webkit.org"> <meta name="assert" content="HTMLSlotElement must exist on window with name attribute and getAssignedNode() method"> <link rel="help" href="https://w3c.github.io/webcomponents/spec/shadow/#the-slot-element"> <script src="/resources/testharness.js"></script> <script src="/resources/testharnessreport.js"></script> </head> <body> <div id="log"></div> <script> test(function () { assert_true('HTMLSlotElement' in window, 'HTMLSlotElement must be defined on window'); assert_equals(Object.getPrototypeOf(HTMLSlotElement.prototype), HTMLElement.prototype, 'HTMLSlotElement should inherit from HTMLElement'); assert_true(document.createElement('slot') instanceof HTMLSlotElement, 'slot element should be an instance of HTMLSlotElement'); assert_true(document.createElement('slot') instanceof HTMLElement, 'slot element should be an instance of HTMLElement'); }, 'HTMLSlotElement must be defined on window'); test(function () { assert_true('name' in HTMLSlotElement.prototype, '"name" attribute must be defined on HTMLSlotElement.prototype'); var slotElement = document.createElement('slot'); assert_equals(slotElement.name, '', '"name" attribute must return the empty string when "name" content attribute is not set'); slotElement.setAttribute('name', 'foo'); assert_equals(slotElement.name, 'foo', '"name" attribute must return the value of the "name" content attribute'); slotElement.name = 'bar'; assert_equals(slotElement.name, 'bar', '"name" attribute must return the assigned value'); assert_equals(slotElement.getAttribute('name'), 'bar', '"name" attribute must update the "name" content attribute'); }, '"name" attribute on HTMLSlotElement must reflect "name" attribute'); function testSlotOutsideShadowTree(options) { test(function () { assert_true('assignedNodes' in HTMLSlotElement.prototype, '"assignedNodes" method must be defined on HTMLSlotElement.prototype'); var slotElement = document.createElement('slot'); assert_array_equals(slotElement.assignedNodes(options), [], 'assignedNodes() must return an empty array when the slot element is not in any tree'); document.body.appendChild(slotElement); assert_array_equals(slotElement.assignedNodes(options), [], 'assignedNodes() must return an empty array when the slot element is in a document tree'); }, 'assignedNodes(' + (options ? JSON.stringify(options) : '') + ') on a HTMLSlotElement must return an empty array when the slot element is not in a tree or in a document tree'); } testSlotOutsideShadowTree(null); testSlotOutsideShadowTree({flattened: false}); testSlotOutsideShadowTree({flattened: true}); function testSingleLevelOfSlotting(options) { test(function () { assert_true('assignedNodes' in HTMLSlotElement.prototype, '"assignedNodes" method must be defined on HTMLSlotElement.prototype'); var shadowHost = document.createElement('div'); var child = document.createElement('p'); var shadowRoot = shadowHost.attachShadow({mode: 'open'}); var slotElement = document.createElement('slot'); shadowRoot.appendChild(slotElement); assert_array_equals(slotElement.assignedNodes(options), [], 'assignedNodes() must return an empty array when there are no nodes in the shadow tree'); shadowHost.appendChild(child); assert_array_equals(slotElement.assignedNodes(options), [child], 'assignedNodes() on a default slot must return an element without slot element'); child.setAttribute('slot', 'foo'); assert_array_equals(slotElement.assignedNodes(options), [], 'assignedNodes() on a default slot must not return an element with non-empty slot attribute'); child.setAttribute('slot', ''); assert_array_equals(slotElement.assignedNodes(options), [child], 'assignedNodes() on a default slot must return an element with empty slot attribute'); slotElement.setAttribute('name', 'bar'); assert_array_equals(slotElement.assignedNodes(options), [], 'assignedNodes() on a named slot must not return an element with empty slot attribute'); slotElement.setAttribute('name', ''); assert_array_equals(slotElement.assignedNodes(options), [child], 'assignedNodes() on an empty name slot must return an element with empty slot attribute'); }, 'assignedNodes(' + (options ? JSON.stringify(options) : '') + ') must return the list of assigned nodes when none of the assigned nodes themselves are slots'); } testSingleLevelOfSlotting(null); testSingleLevelOfSlotting({flattened: false}); testSingleLevelOfSlotting({flattened: true}); function testMutatingSlottedContents(options) { test(function () { var shadowHost = document.createElement('div'); var p = document.createElement('p'); var b = document.createElement('b'); shadowHost.appendChild(p); shadowHost.appendChild(b); var shadowRoot = shadowHost.attachShadow({mode: 'open'}); var slotElement = document.createElement('slot'); shadowRoot.appendChild(slotElement); assert_array_equals(slotElement.assignedNodes(options), [p, b], 'assignedNodes must return the distributed nodes'); slotElement.name = 'foo'; assert_array_equals(slotElement.assignedNodes(options), [], 'assignedNodes must be empty when there are no matching elements for the slot name'); b.slot = 'foo'; assert_array_equals(slotElement.assignedNodes(options), [b], 'assignedNodes must return the nodes with the matching slot name'); p.slot = 'foo'; assert_array_equals(slotElement.assignedNodes(options), [p, b], 'assignedNodes must return the nodes with the matching slot name in the tree order'); slotElement.removeAttribute('name'); assert_array_equals(slotElement.assignedNodes(options), [], 'assignedNodes must be empty for a default slot when all elements have "slot" attributes specified'); }, 'assignedNodes(' + (options ? JSON.stringify(options) : '') + ') must update when slot and name attributes are modified'); } testMutatingSlottedContents(null); testMutatingSlottedContents({flattened: false}); testMutatingSlottedContents({flattened: true}); function testMutatingSlotName(options) { test(function () { var shadowHost = document.createElement('div'); var child = document.createElement('span'); shadowHost.appendChild(child); var shadowRoot = shadowHost.attachShadow({mode: 'open'}); var slotElement = document.createElement('slot'); slotElement.name = 'foo'; shadowRoot.appendChild(slotElement); assert_array_equals(slotElement.assignedNodes(options), [], 'assignedNodes must be empty when there are no matching elements for the slot name'); slotElement.removeAttribute('name'); assert_array_equals(slotElement.assignedNodes(options), [child], 'assignedNodes must be empty when there are no matching elements for the slot name'); }, 'assignedNodes(' + (options ? JSON.stringify(options) : '') + ') must update when a default slot is introduced dynamically by a slot rename'); } testMutatingSlotName(null); testMutatingSlotName({flattened: false}); testMutatingSlotName({flattened: true}); function testInsertingAndRemovingSlots(options) { test(function () { var shadowHost = document.createElement('div'); var p = document.createElement('p'); var text = document.createTextNode(''); var comment = document.createComment(''); var processingInstruction = document.createProcessingInstruction('target', 'data'); var b = document.createElement('b'); shadowHost.appendChild(p); shadowHost.appendChild(text); shadowHost.appendChild(comment); shadowHost.appendChild(processingInstruction); shadowHost.appendChild(b); var shadowRoot = shadowHost.attachShadow({mode: 'open'}); var firstSlotElement = document.createElement('slot'); shadowRoot.appendChild(firstSlotElement); var secondSlotElement = document.createElement('slot'); shadowRoot.appendChild(secondSlotElement); assert_array_equals(firstSlotElement.assignedNodes(options), [p, text, b], 'assignedNodes on a default slot must return the elements without slot attributes and text nodes'); assert_array_equals(secondSlotElement.assignedNodes(options), [], 'assignedNodes on the second unnamed slot element must return an empty array'); shadowRoot.removeChild(firstSlotElement); assert_array_equals(firstSlotElement.assignedNodes(options), [], 'assignedNodes on a detached formerly-default slot must return an empty array'); assert_array_equals(secondSlotElement.assignedNodes(options), [p, text, b], 'assignedNodes on the second unnamed slot element after removing the first must return the elements without slot attributes and text nodes'); shadowRoot.removeChild(secondSlotElement); shadowRoot.appendChild(secondSlotElement); assert_array_equals(firstSlotElement.assignedNodes(options), [], 'Removing and re-inserting a default slot must not change the result of assignedNodes on a detached slot'); assert_array_equals(secondSlotElement.assignedNodes(options), [p, text, b], 'Removing and re-inserting a default slot must not change the result of assignedNodes'); shadowRoot.insertBefore(firstSlotElement, secondSlotElement); assert_array_equals(firstSlotElement.assignedNodes(options), [p, text, b], 'assignedNodes on a newly inserted unnamed slot element must return the elements without slot attributes and text nodes'); assert_array_equals(secondSlotElement.assignedNodes(options), [], 'assignedNodes on formerly-first but now second unnamed slot element must return an empty array'); }, 'assignedNodes(' + (options ? JSON.stringify(options) : '') + ') must update when slot elements are inserted or removed'); } testInsertingAndRemovingSlots(null); testInsertingAndRemovingSlots({flattened: false}); testInsertingAndRemovingSlots({flattened: true}); test(function () { var outerHost = document.createElement('div'); var outerChild = document.createElement('span'); outerHost.appendChild(outerChild); var outerShadow = outerHost.attachShadow({mode: 'closed'}); var innerHost = document.createElement('div'); var outerSlot = document.createElement('slot'); var innerChild = document.createElement('b'); outerShadow.appendChild(innerHost); innerHost.appendChild(outerSlot); innerHost.appendChild(innerChild); var innerShadow = innerHost.attachShadow({mode: 'closed'}); var innerSlot = document.createElement('slot'); innerShadow.appendChild(innerSlot); assert_array_equals(outerSlot.assignedNodes(), [outerChild], 'assignedNodes() on a default slot must return the assigned nodes'); assert_array_equals(outerSlot.assignedNodes({flatten: false}), [outerChild], 'assignedNodes({flatten: false}) on a default slot must return the assigned nodes'); assert_array_equals(outerSlot.assignedNodes({flatten: true}), [outerChild], 'assignedNodes({flatten: true}) on a default slot must return the assigned nodes if they are not themselves slots'); assert_array_equals(innerSlot.assignedNodes(), [outerSlot, innerChild], 'assignedNodes() on a default slot must return the assigned nodes'); assert_array_equals(innerSlot.assignedNodes({flatten: false}), [outerSlot, innerChild], 'assignedNodes({flatten: false}) on a default slot must return the assigned nodes'); assert_array_equals(innerSlot.assignedNodes({flatten: true}), [outerChild, innerChild], 'assignedNodes({flatten: true}) on a default slot must return the distributed nodes'); outerSlot.name = 'foo'; assert_array_equals(outerSlot.assignedNodes(), [], 'assignedNodes() on a named slot must return an empty array if there are no matching elements'); assert_array_equals(outerSlot.assignedNodes({flatten: false}), [], 'assignedNodes({flatten: false}) on a named slot must return an empty array if there are no matching elements'); assert_array_equals(outerSlot.assignedNodes({flatten: true}), [], 'assignedNodes({flatten: true}) on a named slot must return an empty array if there are no matching elements'); assert_array_equals(innerSlot.assignedNodes(), [outerSlot, innerChild], 'assignedNodes() on a default slot must return the assigned nodes'); assert_array_equals(innerSlot.assignedNodes({flatten: false}), [outerSlot, innerChild], 'assignedNodes({flatten: false}) on a default slot must return the assigned nodes'); assert_array_equals(innerSlot.assignedNodes({flatten: true}), [innerChild], 'assignedNodes({flatten: true}) on a default slot must return the distributed nodes'); outerChild.slot = 'foo'; assert_array_equals(outerSlot.assignedNodes(), [outerChild], 'assignedNodes() on a named slot must return matching elements'); assert_array_equals(outerSlot.assignedNodes({flatten: false}), [outerChild], 'assignedNodes({flatten: false}) on a named slot must return matching elements'); assert_array_equals(outerSlot.assignedNodes({flatten: true}), [outerChild], 'assignedNodes({flatten: true}) on a named slot must return matching elements'); assert_array_equals(innerSlot.assignedNodes(), [outerSlot, innerChild], 'assignedNodes() on a default slot must return the assigned nodes'); assert_array_equals(innerSlot.assignedNodes({flatten: false}), [outerSlot, innerChild], 'assignedNodes({flatten: false}) on a default slot must return the assigned nodes'); assert_array_equals(innerSlot.assignedNodes({flatten: true}), [outerChild, innerChild], 'assignedNodes({flatten: true}) on a default slot must return the distributed nodes'); var newInnerSlot = document.createElement('slot'); innerShadow.insertBefore(newInnerSlot, innerSlot); assert_array_equals(newInnerSlot.assignedNodes(), [outerSlot, innerChild], 'assignedNodes() on a default slot must return the assigned nodes'); assert_array_equals(newInnerSlot.assignedNodes({flatten: false}), [outerSlot, innerChild], 'assignedNodes({flatten: false}) on a default slot must return the assigned nodes'); assert_array_equals(newInnerSlot.assignedNodes({flatten: true}), [outerChild, innerChild], 'assignedNodes({flatten: true}) on a default slot must return the distributed nodes'); assert_array_equals(innerSlot.assignedNodes(), [], 'assignedNodes() on a nameless slot element which appears after a default slot must return an empty array'); assert_array_equals(innerSlot.assignedNodes({flatten: false}), [], 'assignedNodes({flatten: false}) on a nameless slot element which appears after a default slot must return an empty array'); assert_array_equals(innerSlot.assignedNodes({flatten: true}), [], 'assignedNodes({flatten: true}) on a nameless slot element which appears after a default slot must return an empty array'); innerShadow.removeChild(newInnerSlot); assert_array_equals(newInnerSlot.assignedNodes(), [], 'assignedNodes() must return an empty array when the slot element is not in any tree'); assert_array_equals(newInnerSlot.assignedNodes({flatten: false}), [], 'assignedNodes({flatten: false}) must return an empty array when the slot element is not in any tree'); assert_array_equals(newInnerSlot.assignedNodes({flatten: true}), [], 'assignedNodes({flatten: true}) must return an empty array when the slot element is not in any tree'); assert_array_equals(innerSlot.assignedNodes(), [outerSlot, innerChild], 'assignedNodes() on a default slot must return the assigned nodes'); assert_array_equals(innerSlot.assignedNodes({flatten: false}), [outerSlot, innerChild], 'assignedNodes({flatten: false}) on a default slot must return the assigned nodes'); assert_array_equals(innerSlot.assignedNodes({flatten: true}), [outerChild, innerChild], 'assignedNodes({flatten: true}) on a default slot must return the distributed nodes'); }, 'assignedNodes({flatten: true}) must return the distributed nodes, and assignedNodes() and assignedNodes({flatten: false}) must returned the assigned nodes'); </script> </body> </html>