Slottable-mixin.html | Explore in Territory

<!DOCTYPE html>
<html>
<head>
<title>Shadow DOM: Slottable mixin</title>
<meta name="author" title="Ryosuke Niwa" href="mailto:[email protected]">
<meta name="assert" content="Element and Text interfaces must implement Slottable mixin">
<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>
chromium/third_party/blink/web_tests/external/wpt/shadow-dom/Slottable-mixin.html
