| <!DOCTYPE html> |
| <html> |
| <head> |
| <title>Shadow DOM: Slotable interface</title> |
| <meta name="author" title="Ryosuke Niwa" href="mailto:rniwa@webkit.org"> |
| <meta name="assert" content="Element and Text interfaces must implement Slotable interface"> |
| <link rel="help" href="https://dom.spec.whatwg.org/#slotable"> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| </head> |
| <body> |
| <div id="log"></div> |
| <script> |
| |
| test(function () { |
| assert_true('assignedSlot' in Element.prototype, 'assignedSlot must be defined on Element.prototype'); |
| assert_true('assignedSlot' in document.createElement('div'), 'assignedSlot must be defined on a div element'); |
| |
| assert_true('assignedSlot' in Text.prototype, 'assignedSlot must be defined on Text.prototype'); |
| assert_true('assignedSlot' in document.createTextNode(''), 'assignedSlot must be defined on a text node'); |
| assert_false('assignedSlot' in document.createComment(''), 'assignedSlot must not be defined on a comment node'); |
| assert_false('assignedSlot' in document.createProcessingInstruction('target', 'data'), 'assignedSlot must not be defined on a processing instruction node'); |
| |
| }, 'assignedSlot attribute must be defined on Element and Text interfaces'); |
| |
| test(function () { |
| assert_equals(document.createElement('div').assignedSlot, null, 'assignedSlot must be null when the element is not in any tree'); |
| |
| var shadowHost = document.createElement('div'); |
| var shadowRoot = shadowHost.attachShadow({mode: 'open'}); |
| |
| var childElement = document.createElement('b'); |
| shadowHost.appendChild(childElement); |
| assert_equals(childElement.assignedSlot, null, 'assignedSlot on an element must be null when a node is not assigned of any slot'); |
| |
| var childTextNode = document.createTextNode(''); |
| shadowHost.appendChild(childTextNode); |
| assert_equals(childTextNode.assignedSlot, null, 'assignedSlot on a text node must be null when a node is not assigned of any slot'); |
| |
| var slot = document.createElement('slot'); |
| slot.name = 'foo'; |
| shadowRoot.appendChild(slot); |
| assert_equals(childElement.assignedSlot, null, 'assignedSlot on an element must be null when a node does not match any slot'); |
| assert_equals(childTextNode.assignedSlot, null, 'assignedSlot on a text node must be null when a node does not match any slot'); |
| |
| }, 'assignedSlot must return null when the node does not have an assigned node'); |
| |
| test(function () { |
| var shadowHost = document.createElement('div'); |
| var childElement = document.createElement('b'); |
| shadowHost.appendChild(childElement); |
| |
| var childTextNode = document.createTextNode(''); |
| shadowHost.appendChild(childTextNode); |
| |
| var shadowRoot = shadowHost.attachShadow({mode: 'open'}); |
| var slot = document.createElement('slot'); |
| shadowRoot.appendChild(slot); |
| |
| assert_equals(childElement.assignedSlot, slot, 'assignedSlot on an element must return the assigned default slot element'); |
| assert_equals(childTextNode.assignedSlot, slot, 'assignedSlot on a text node must return the assigned default slot element'); |
| |
| slot.name = 'foo'; |
| assert_equals(childElement.assignedSlot, null, 'assignedSlot on an element must null when the element is unassigned from a slot element'); |
| assert_equals(childTextNode.assignedSlot, null, 'assignedSlot on a text node must null when the node is unassigned from a slot element'); |
| |
| childElement.slot = 'foo'; |
| assert_equals(childElement.assignedSlot, slot, 'assignedSlot on an element must return the re-assigned slot element'); |
| |
| slot.removeAttribute('name'); |
| assert_equals(childTextNode.assignedSlot, slot, 'assignedSlot on a text node must return the re-assigned slot element'); |
| |
| }, 'assignedSlot must return the assigned slot'); |
| |
| test(function () { |
| var shadowHost = document.createElement('div'); |
| var childElement = document.createElement('b'); |
| shadowHost.appendChild(childElement); |
| |
| var childTextNode = document.createTextNode(''); |
| shadowHost.appendChild(childTextNode); |
| |
| var shadowRoot = shadowHost.attachShadow({mode: 'closed'}); |
| var slot = document.createElement('slot'); |
| shadowRoot.appendChild(slot); |
| |
| assert_equals(childElement.assignedSlot, null, 'assignedSlot on an element must return null if the slot is inside a closed shadow tree.'); |
| assert_equals(childTextNode.assignedSlot, null, 'assignedSlot on a text node must return null if the slot is inside a closed shadow tree.'); |
| |
| }, 'assignedSlot must return null when the assigned slot element is inside a closed shadow tree'); |
| |
| </script> |
| </body> |
| </html> |
