<!DOCTYPE html>
<html>
<head>
<meta name="author" title="Ryosuke Niwa" href="mailto:rniwa@webkit.org">
<meta name="assert" content=":focus should match a shadow host which contains the focused element">
<link rel="help" href="https://html.spec.whatwg.org/#element-has-the-focus">
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
</head>
<body>
<input id="defaultFocus" autofocus>
<div id="log"></div>
<div id="container"></div>
<script>

let focusedDefault = false;
function didFocusDefault() { }
function checkFocusMatch() {
    if (defaultFocus.matches(':focus')) {
        focusedDefault = true;
        didFocusDefault();
    } else
        setTimeout(checkFocusMatch, 100);
}
defaultFocus.addEventListener('focus', checkFocusMatch);

function prepare(test)
{
    test.add_cleanup(() => {
        defaultFocus.focus();
        container.textContent = '';
    });
    return new Promise((resolve) => {
        if (focusedDefault)
            resolve();
        else
            didFocusDefault = resolve;
    });
}

function testInMode(mode) {
    promise_test(async function () {
        await prepare(this);
        const host = document.createElement('div');
        container.appendChild(host);
        const shadowRoot = host.attachShadow({mode});
        shadowRoot.innerHTML = '<input>';
        assert_equals(document.activeElement, defaultFocus);
        assert_equals(shadowRoot.activeElement, null);
        assert_false(host.matches(':focus'));
    }, `:focus must not match a shadow host with ${mode} mode shadow root that does not contain the focused element`);

    promise_test(async function () {
        await prepare(this);
        const host = document.createElement('div');
        document.body.appendChild(host);
        const shadowRoot = host.attachShadow({mode});
        shadowRoot.innerHTML = '<input>';
        shadowRoot.firstChild.focus();
        assert_equals(document.activeElement, host);
        assert_equals(shadowRoot.activeElement, shadowRoot.firstChild);
        assert_true(host.matches(':focus'));
    }, `:focus must match a shadow host with ${mode} mode shadow root that contains the focused element`);

    promise_test(async function () {
        await prepare(this);
        const host = document.createElement('div');
        container.appendChild(host);
        const shadowRoot = host.attachShadow({mode});
        shadowRoot.innerHTML = '<slot>';
        host.innerHTML = '<input>';
        host.firstChild.focus();
        assert_equals(document.activeElement, host.firstChild);
        assert_equals(shadowRoot.activeElement, null);
        assert_false(host.matches(':focus'));
    }, `:focus must not match a shadow host with ${mode} mode shadow root contains the focused element assigned to a slot`);

}

testInMode('open');
testInMode('closed');

</script>
</body>
</html>