<!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 slotable 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>