slotchange-event.html

<!DOCTYPE html>

<html>

<head>

<title>Shadow DOM: slotchange event</title>

<meta name="author" title="Ryosuke Niwa" href="mailto:rniwa@webkit.org">

<meta name="author" title="Hayato Ito" href="mailto:hayato@google.com">

<link rel="help" href="https://dom.spec.whatwg.org/#signaling-slot-change">

<script src="/resources/testharness.js"></script>

<script src="/resources/testharnessreport.js"></script>

</head>

<body>

<div id="log"></div>

<script>

function treeName(mode, connectedToDocument)

    return (mode == 'open' ? 'an ' : 'a ') + mode + ' shadow root '

        + (connectedToDocument ? '' : ' not') + ' in a document';

function testAppendingSpanToShadowRootWithDefaultSlot(mode, connectedToDocument)

    var test = async_test('slotchange event must fire on a default slot element inside '

        + treeName(mode, connectedToDocument));

    var host;

    var slot;

    var eventCount = 0;

    test.step(function () {

        host = document.createElement('div');

        if (connectedToDocument)

            document.body.appendChild(host);

        var shadowRoot = host.attachShadow({'mode': mode});

        slot = document.createElement('slot');

        slot.addEventListener('slotchange', function (event) {

            if (event.isFakeEvent)

                return;

            test.step(function () {

                assert_equals(event.type, 'slotchange', 'slotchange event\'s type must be "slotchange"');

                assert_equals(event.target, slot, 'slotchange event\'s target must be the slot element');

                assert_equals(event.relatedTarget, undefined, 'slotchange must not set relatedTarget');

});

            eventCount++;

});

        shadowRoot.appendChild(slot);

        host.appendChild(document.createElement('span'));

        host.appendChild(document.createElement('b'));

        assert_equals(eventCount, 0, 'slotchange event must not be fired synchronously');

});

    setTimeout(function () {

        test.step(function () {

            assert_equals(eventCount, 1, 'slotchange must be fired exactly once after the assigned nodes changed');

            host.appendChild(document.createElement('i'));

});

        setTimeout(function () {

            test.step(function () {

                assert_equals(eventCount, 2, 'slotchange must be fired exactly once after the assigned nodes changed');

                host.appendChild(document.createTextNode('hello'));

                var fakeEvent = new Event('slotchange');

                fakeEvent.isFakeEvent = true;

                slot.dispatchEvent(fakeEvent);

});

            setTimeout(function () {

                test.step(function () {

                    assert_equals(eventCount, 3, 'slotchange must be fired exactly once after the assigned nodes changed'

                        + ' event if there was a synthetic slotchange event fired');

});

                test.done();

            }, 1);

        }, 1);

    }, 1);

testAppendingSpanToShadowRootWithDefaultSlot('open', true);

testAppendingSpanToShadowRootWithDefaultSlot('closed', true);

testAppendingSpanToShadowRootWithDefaultSlot('open', false);

testAppendingSpanToShadowRootWithDefaultSlot('closed', false);

function testAppendingSpanToShadowRootWithNamedSlot(mode, connectedToDocument)

    var test = async_test('slotchange event must fire on a named slot element inside'

        + treeName(mode, connectedToDocument));

    var host;

    var slot;

    var eventCount = 0;

    test.step(function () {

        host = document.createElement('div');

        if (connectedToDocument)

            document.body.appendChild(host);

        var shadowRoot = host.attachShadow({'mode': mode});

        slot = document.createElement('slot');

        slot.name = 'someSlot';

        slot.addEventListener('slotchange', function (event) {

            if (event.isFakeEvent)

                return;

            test.step(function () {

                assert_equals(event.type, 'slotchange', 'slotchange event\'s type must be "slotchange"');

                assert_equals(event.target, slot, 'slotchange event\'s target must be the slot element');

                assert_equals(event.relatedTarget, undefined, 'slotchange must not set relatedTarget');

});

            eventCount++;

});

        shadowRoot.appendChild(slot);

        var span = document.createElement('span');

        span.slot = 'someSlot';

        host.appendChild(span);

        var b = document.createElement('b');

        b.slot = 'someSlot';

        host.appendChild(b);

        assert_equals(eventCount, 0, 'slotchange event must not be fired synchronously');

});

    setTimeout(function () {

        test.step(function () {

            assert_equals(eventCount, 1, 'slotchange must be fired exactly once after the assigned nodes changed');

            var i = document.createElement('i');

            i.slot = 'someSlot';

            host.appendChild(i);

});

        setTimeout(function () {

            test.step(function () {

                assert_equals(eventCount, 2, 'slotchange must be fired exactly once after the assigned nodes changed');

                var em = document.createElement('em');

                em.slot = 'someSlot';

                host.appendChild(em);

                var fakeEvent = new Event('slotchange');

                fakeEvent.isFakeEvent = true;

                slot.dispatchEvent(fakeEvent);

});

            setTimeout(function () {

                test.step(function () {

                    assert_equals(eventCount, 3, 'slotchange must be fired exactly once after the assigned nodes changed'

                        + ' event if there was a synthetic slotchange event fired');

});

                test.done();

            }, 1);

        }, 1);

    }, 1);

testAppendingSpanToShadowRootWithNamedSlot('open', true);

testAppendingSpanToShadowRootWithNamedSlot('closed', true);

testAppendingSpanToShadowRootWithNamedSlot('open', false);

testAppendingSpanToShadowRootWithNamedSlot('closed', false);

function testSlotchangeDoesNotFireWhenOtherSlotsChange(mode, connectedToDocument)

    var test = async_test('slotchange event must not fire on a slot element inside '

        + treeName(mode, connectedToDocument)

        + ' when another slot\'s assigned nodes change');

    var host;

    var defaultSlotEventCount = 0;

    var namedSlotEventCount = 0;

    test.step(function () {

        host = document.createElement('div');

        if (connectedToDocument)

            document.body.appendChild(host);

        var shadowRoot = host.attachShadow({'mode': mode});

        var defaultSlot = document.createElement('slot');

        defaultSlot.addEventListener('slotchange', function (event) {

            test.step(function () {

                assert_equals(event.target, defaultSlot, 'slotchange event\'s target must be the slot element');

});

            defaultSlotEventCount++;

});

        var namedSlot = document.createElement('slot');

        namedSlot.name = 'slotName';

        namedSlot.addEventListener('slotchange', function (event) {

            test.step(function () {

                assert_equals(event.target, namedSlot, 'slotchange event\'s target must be the slot element');

});

            namedSlotEventCount++;

});

        shadowRoot.appendChild(defaultSlot);

        shadowRoot.appendChild(namedSlot);

        host.appendChild(document.createElement('span'));

        assert_equals(defaultSlotEventCount, 0, 'slotchange event must not be fired synchronously');

        assert_equals(namedSlotEventCount, 0, 'slotchange event must not be fired synchronously');

});

    setTimeout(function () {

        test.step(function () {

            assert_equals(defaultSlotEventCount, 1,

                'slotchange must be fired exactly once after the assigned nodes change on a default slot');

            assert_equals(namedSlotEventCount, 0,

                'slotchange must not be fired on a named slot after the assigned nodes change on a default slot');

            var span = document.createElement('span');

            span.slot = 'slotName';

            host.appendChild(span);

});

        setTimeout(function () {

            test.step(function () {

                assert_equals(defaultSlotEventCount, 1,

                    'slotchange must not be fired on a default slot after the assigned nodes change on a named slot');

                assert_equals(namedSlotEventCount, 1,

                    'slotchange must be fired exactly once after the assigned nodes change on a default slot');

});

            test.done();

        }, 1);

    }, 1);

testSlotchangeDoesNotFireWhenOtherSlotsChange('open', true);

testSlotchangeDoesNotFireWhenOtherSlotsChange('closed', true);

testSlotchangeDoesNotFireWhenOtherSlotsChange('open', false);

testSlotchangeDoesNotFireWhenOtherSlotsChange('closed', false);

function testSlotchangeDoesFireAtInsertedAndDoesNotFireForMutationAfterRemoved(mode, connectedToDocument)

    var test = async_test('slotchange event must fire on a slot element when a shadow host has a slottable and the slot was inserted'

                        + ' and must not fire when the shadow host was mutated after the slot was removed inside '

                        + treeName(mode, connectedToDocument));

    var host;

    var slot;

    var eventCount = 0;

    test.step(function () {

        host = document.createElement('div');

        if (connectedToDocument)

            document.body.appendChild(host);

        var shadowRoot = host.attachShadow({'mode': mode});

        slot = document.createElement('slot');

        slot.addEventListener('slotchange', function (event) {

            test.step(function () {

                assert_equals(event.target, slot, 'slotchange event\'s target must be the slot element');

});

            eventCount++;

});

        host.appendChild(document.createElement('span'));

        shadowRoot.appendChild(slot);

        assert_equals(eventCount, 0, 'slotchange event must not be fired synchronously');

});

    setTimeout(function () {

        test.step(function () {

            assert_equals(eventCount, 1,

                          'slotchange must be fired on a slot element if there is assigned nodes when the slot was inserted');

            host.removeChild(host.firstChild);

});

        setTimeout(function () {

            test.step(function () {

                assert_equals(eventCount, 2,

                              'slotchange must be fired after the assigned nodes change on a slot while the slot element was in the tree');

                slot.parentNode.removeChild(slot);

                host.appendChild(document.createElement('span'));

});

            setTimeout(function () {

                assert_equals(eventCount, 2,

                              'slotchange must not be fired on a slot element if the assigned nodes changed after the slot was removed');

                test.done();

            }, 1);

        }, 1);

    }, 1);

testSlotchangeDoesFireAtInsertedAndDoesNotFireForMutationAfterRemoved('open', true);

testSlotchangeDoesFireAtInsertedAndDoesNotFireForMutationAfterRemoved('closed', true);

testSlotchangeDoesFireAtInsertedAndDoesNotFireForMutationAfterRemoved('open', false);

testSlotchangeDoesFireAtInsertedAndDoesNotFireForMutationAfterRemoved('closed', false);

function testSlotchangeFiresOnTransientlyPresentSlot(mode, connectedToDocument)

    var test = async_test('slotchange event must fire on a slot element inside '

        + treeName(mode, connectedToDocument)

        + ' even if the slot was removed immediately after the assigned nodes were mutated');

    var host;

    var slot;

    var anotherSlot;

    var slotEventCount = 0;

    var anotherSlotEventCount = 0;

    test.step(function () {

        host = document.createElement('div');

        if (connectedToDocument)

            document.body.appendChild(host);

        var shadowRoot = host.attachShadow({'mode': mode});

        slot = document.createElement('slot');

        slot.name = 'someSlot';

        slot.addEventListener('slotchange', function (event) {

            test.step(function () {

                assert_equals(event.target, slot, 'slotchange event\'s target must be the slot element');

});

            slotEventCount++;

});

        anotherSlot = document.createElement('slot');

        anotherSlot.name = 'someSlot';

        anotherSlot.addEventListener('slotchange', function (event) {

            test.step(function () {

                assert_equals(event.target, anotherSlot, 'slotchange event\'s target must be the slot element');

});

            anotherSlotEventCount++;

});

        shadowRoot.appendChild(slot);

        var span = document.createElement('span');

        span.slot = 'someSlot';

        host.appendChild(span);

        shadowRoot.removeChild(slot);

        shadowRoot.appendChild(anotherSlot);

        var span = document.createElement('span');

        span.slot = 'someSlot';

        host.appendChild(span);

        shadowRoot.removeChild(anotherSlot);

        assert_equals(slotEventCount, 0, 'slotchange event must not be fired synchronously');

        assert_equals(anotherSlotEventCount, 0, 'slotchange event must not be fired synchronously');

});

    setTimeout(function () {

        test.step(function () {

            assert_equals(slotEventCount, 1,

                'slotchange must be fired on a slot element if the assigned nodes changed while the slot was present');

            assert_equals(anotherSlotEventCount, 1,

                'slotchange must be fired on a slot element if the assigned nodes changed while the slot was present');

});

        test.done();

    }, 1);

testSlotchangeFiresOnTransientlyPresentSlot('open', true);

testSlotchangeFiresOnTransientlyPresentSlot('closed', true);

testSlotchangeFiresOnTransientlyPresentSlot('open', false);

testSlotchangeFiresOnTransientlyPresentSlot('closed', false);

function testSlotchangeFiresOnInnerHTML(mode, connectedToDocument)

    var test = async_test('slotchange event must fire on a slot element inside '

        + treeName(mode, connectedToDocument)

        + ' when innerHTML modifies the children of the shadow host');

    var host;

    var defaultSlot;

    var namedSlot;

    var defaultSlotEventCount = 0;

    var namedSlotEventCount = 0;

    test.step(function () {

        host = document.createElement('div');

        if (connectedToDocument)

            document.body.appendChild(host);

        var shadowRoot = host.attachShadow({'mode': mode});

        defaultSlot = document.createElement('slot');

        defaultSlot.addEventListener('slotchange', function (event) {

            test.step(function () {

                assert_equals(event.target, defaultSlot, 'slotchange event\'s target must be the slot element');

});

            defaultSlotEventCount++;

});

        namedSlot = document.createElement('slot');

        namedSlot.name = 'someSlot';

        namedSlot.addEventListener('slotchange', function (event) {

            test.step(function () {

                assert_equals(event.target, namedSlot, 'slotchange event\'s target must be the slot element');

});

            namedSlotEventCount++;

});

        shadowRoot.appendChild(namedSlot);

        shadowRoot.appendChild(defaultSlot);

        host.innerHTML = 'foo <b>bar</b>';

        assert_equals(defaultSlotEventCount, 0, 'slotchange event must not be fired synchronously');

        assert_equals(namedSlotEventCount, 0, 'slotchange event must not be fired synchronously');

});

    setTimeout(function () {

        test.step(function () {

            assert_equals(defaultSlotEventCount, 1,

                'slotchange must be fired on a slot element if the assigned nodes are changed by innerHTML');

            assert_equals(namedSlotEventCount, 0,

                'slotchange must not be fired on a slot element if the assigned nodes are not changed by innerHTML');

            host.innerHTML = 'baz';

});

        setTimeout(function () {

            test.step(function () {

                assert_equals(defaultSlotEventCount, 2,

                    'slotchange must be fired on a slot element if the assigned nodes are changed by innerHTML');

                assert_equals(namedSlotEventCount, 0,

                    'slotchange must not be fired on a slot element if the assigned nodes are not changed by innerHTML');

                host.innerHTML = '';

});

            setTimeout(function () {

                test.step(function () {

                    assert_equals(defaultSlotEventCount, 3,

                        'slotchange must be fired on a slot element if the assigned nodes are changed by innerHTML');

                    assert_equals(namedSlotEventCount, 0,

                        'slotchange must not be fired on a slot element if the assigned nodes are not changed by innerHTML');

                    host.innerHTML = '<b slot="someSlot">content</b>';

});

                setTimeout(function () {

                    test.step(function () {

                        assert_equals(defaultSlotEventCount, 3,

                            'slotchange must not be fired on a slot element if the assigned nodes are not changed by innerHTML');

                        assert_equals(namedSlotEventCount, 1,

                            'slotchange must not be fired on a slot element if the assigned nodes are changed by innerHTML');

                        host.innerHTML = '';

});

                    setTimeout(function () {

                        test.step(function () {

                            // FIXME: This test would fail in the current implementation because we can't tell

                            // whether a text node was removed in AllChildrenRemoved or not.

//                            assert_equals(defaultSlotEventCount, 3,

//                                'slotchange must not be fired on a slot element if the assigned nodes are not changed by innerHTML');

                            assert_equals(namedSlotEventCount, 2,

                                'slotchange must not be fired on a slot element if the assigned nodes are changed by innerHTML');

});

                        test.done();

                    }, 1);

                }, 1);

            }, 1);

        }, 1);

    }, 1);

testSlotchangeFiresOnInnerHTML('open', true);

testSlotchangeFiresOnInnerHTML('closed', true);

testSlotchangeFiresOnInnerHTML('open', false);

testSlotchangeFiresOnInnerHTML('closed', false);

function testSlotchangeFiresWhenNestedSlotChange(mode, connectedToDocument)

    var test = async_test('slotchange event must fire on a slot element inside '

        + treeName(mode, connectedToDocument)

        + ' when nested slots\'s contents change');

    var outerHost;

    var innerHost;

    var outerSlot;

    var innerSlot;

    var outerSlotEventCount = 0;

    var innerSlotEventCount = 0;

    test.step(function () {

        outerHost = document.createElement('div');

        if (connectedToDocument)

            document.body.appendChild(outerHost);

        var outerShadow = outerHost.attachShadow({'mode': mode});

        outerShadow.appendChild(document.createElement('span'));

        outerSlot = document.createElement('slot');

        outerSlot.addEventListener('slotchange', function (event) {

            test.step(function () {

                assert_equals(event.target, outerSlot, 'slotchange event\'s target must be the slot element');

});

            outerSlotEventCount++;

});

        innerHost = document.createElement('div');

        innerHost.appendChild(outerSlot);

        outerShadow.appendChild(innerHost);

        var innerShadow = innerHost.attachShadow({'mode': mode});

        innerShadow.appendChild(document.createElement('span'));

        innerSlot = document.createElement('slot');

        innerSlot.addEventListener('slotchange', function (event) {

            event.stopPropagation();

            test.step(function () {

                if (innerSlotEventCount === 0) {

                    assert_equals(event.target, innerSlot, 'slotchange event\'s target must be the inner slot element at 1st slotchange');

                } else if (innerSlotEventCount === 1) {

                    assert_equals(event.target, outerSlot, 'slotchange event\'s target must be the outer slot element at 2nd sltochange');

});

            innerSlotEventCount++;

});

        innerShadow.appendChild(innerSlot);

        outerHost.appendChild(document.createElement('span'));

        assert_equals(innerSlotEventCount, 0, 'slotchange event must not be fired synchronously');

        assert_equals(outerSlotEventCount, 0, 'slotchange event must not be fired synchronously');

});

    setTimeout(function () {

        test.step(function () {

            assert_equals(outerSlotEventCount, 1,

                'slotchange must be fired on a slot element if the assigned nodes changed');

            assert_equals(innerSlotEventCount, 2,

                'slotchange must be fired on a slot element and must bubble');

});

        test.done();

    }, 1);

testSlotchangeFiresWhenNestedSlotChange('open', true);

testSlotchangeFiresWhenNestedSlotChange('closed', true);

testSlotchangeFiresWhenNestedSlotChange('open', false);

testSlotchangeFiresWhenNestedSlotChange('closed', false);

function testSlotchangeFiresAtEndOfMicroTask(mode, connectedToDocument)

    var test = async_test('slotchange event must fire at the end of current microtask after mutation observers are invoked inside '

        + treeName(mode, connectedToDocument) + ' when slots\'s contents change');

    var host;

    var slot;

    var eventCount = 0;

    test.step(function () {

        host = document.createElement('div');

        if (connectedToDocument)

            document.body.appendChild(host);

        var shadowRoot = host.attachShadow({'mode': mode});

        slot = document.createElement('slot');

        slot.addEventListener('slotchange', function (event) {

            test.step(function () {

                assert_equals(event.type, 'slotchange', 'slotchange event\'s type must be "slotchange"');

                assert_equals(event.target, slot, 'slotchange event\'s target must be the slot element');

});

            eventCount++;

});

        shadowRoot.appendChild(slot);

});

    var element = document.createElement('div');

    new MutationObserver(function () {

        test.step(function () {

            assert_equals(eventCount, 0, 'slotchange event must not be fired before mutation records are delivered');

});

        host.appendChild(document.createElement('span'));

        element.setAttribute('title', 'bar');

    }).observe(element, {attributes: true, attributeFilter: ['id']});

    new MutationObserver(function () {

        test.step(function () {

            assert_equals(eventCount, 1, 'slotchange event must be fired during a single compound microtask');

});

    }).observe(element, {attributes: true, attributeFilter: ['title']});

    element.setAttribute('id', 'foo');

    host.appendChild(document.createElement('div'));

    setTimeout(function () {

        test.step(function () {

            assert_equals(eventCount, 2,

                'a distinct slotchange event must be enqueued for changes made during a mutation observer delivery');

});

        test.done();

    }, 0);

testSlotchangeFiresAtEndOfMicroTask('open', true);

testSlotchangeFiresAtEndOfMicroTask('closed', true);

testSlotchangeFiresAtEndOfMicroTask('open', false);

testSlotchangeFiresAtEndOfMicroTask('closed', false);

</script>

</body>

</html>

Source code

Revision control

Copy as Markdown

Other Tools

Test Info: