Slottable-mixin.html (4613B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>Shadow DOM: Slottable mixin</title> 5 <meta name="author" title="Ryosuke Niwa" href="mailto:rniwa@webkit.org"> 6 <meta name="assert" content="Element and Text interfaces must implement Slottable mixin"> 7 <link rel="help" href="https://dom.spec.whatwg.org/#slotable"> 8 <script src="/resources/testharness.js"></script> 9 <script src="/resources/testharnessreport.js"></script> 10 </head> 11 <body> 12 <div id="log"></div> 13 <script> 14 15 test(function () { 16 assert_true('assignedSlot' in Element.prototype, 'assignedSlot must be defined on Element.prototype'); 17 assert_true('assignedSlot' in document.createElement('div'), 'assignedSlot must be defined on a div element'); 18 19 assert_true('assignedSlot' in Text.prototype, 'assignedSlot must be defined on Text.prototype'); 20 assert_true('assignedSlot' in document.createTextNode(''), 'assignedSlot must be defined on a text node'); 21 assert_false('assignedSlot' in document.createComment(''), 'assignedSlot must not be defined on a comment node'); 22 assert_false('assignedSlot' in document.createProcessingInstruction('target', 'data'), 'assignedSlot must not be defined on a processing instruction node'); 23 24 }, 'assignedSlot attribute must be defined on Element and Text interfaces'); 25 26 test(function () { 27 assert_equals(document.createElement('div').assignedSlot, null, 'assignedSlot must be null when the element is not in any tree'); 28 29 var shadowHost = document.createElement('div'); 30 var shadowRoot = shadowHost.attachShadow({mode: 'open'}); 31 32 var childElement = document.createElement('b'); 33 shadowHost.appendChild(childElement); 34 assert_equals(childElement.assignedSlot, null, 'assignedSlot on an element must be null when a node is not assigned of any slot'); 35 36 var childTextNode = document.createTextNode(''); 37 shadowHost.appendChild(childTextNode); 38 assert_equals(childTextNode.assignedSlot, null, 'assignedSlot on a text node must be null when a node is not assigned of any slot'); 39 40 var slot = document.createElement('slot'); 41 slot.name = 'foo'; 42 shadowRoot.appendChild(slot); 43 assert_equals(childElement.assignedSlot, null, 'assignedSlot on an element must be null when a node does not match any slot'); 44 assert_equals(childTextNode.assignedSlot, null, 'assignedSlot on a text node must be null when a node does not match any slot'); 45 46 }, 'assignedSlot must return null when the node does not have an assigned node'); 47 48 test(function () { 49 var shadowHost = document.createElement('div'); 50 var childElement = document.createElement('b'); 51 shadowHost.appendChild(childElement); 52 53 var childTextNode = document.createTextNode(''); 54 shadowHost.appendChild(childTextNode); 55 56 var shadowRoot = shadowHost.attachShadow({mode: 'open'}); 57 var slot = document.createElement('slot'); 58 shadowRoot.appendChild(slot); 59 60 assert_equals(childElement.assignedSlot, slot, 'assignedSlot on an element must return the assigned default slot element'); 61 assert_equals(childTextNode.assignedSlot, slot, 'assignedSlot on a text node must return the assigned default slot element'); 62 63 slot.name = 'foo'; 64 assert_equals(childElement.assignedSlot, null, 'assignedSlot on an element must null when the element is unassigned from a slot element'); 65 assert_equals(childTextNode.assignedSlot, null, 'assignedSlot on a text node must null when the node is unassigned from a slot element'); 66 67 childElement.slot = 'foo'; 68 assert_equals(childElement.assignedSlot, slot, 'assignedSlot on an element must return the re-assigned slot element'); 69 70 slot.removeAttribute('name'); 71 assert_equals(childTextNode.assignedSlot, slot, 'assignedSlot on a text node must return the re-assigned slot element'); 72 73 }, 'assignedSlot must return the assigned slot'); 74 75 test(function () { 76 var shadowHost = document.createElement('div'); 77 var childElement = document.createElement('b'); 78 shadowHost.appendChild(childElement); 79 80 var childTextNode = document.createTextNode(''); 81 shadowHost.appendChild(childTextNode); 82 83 var shadowRoot = shadowHost.attachShadow({mode: 'closed'}); 84 var slot = document.createElement('slot'); 85 shadowRoot.appendChild(slot); 86 87 assert_equals(childElement.assignedSlot, null, 'assignedSlot on an element must return null if the slot is inside a closed shadow tree.'); 88 assert_equals(childTextNode.assignedSlot, null, 'assignedSlot on a text node must return null if the slot is inside a closed shadow tree.'); 89 90 }, 'assignedSlot must return null when the assigned slot element is inside a closed shadow tree'); 91 92 </script> 93 </body> 94 </html>