<!DOCTYPE html>
<html>
<body>
<script src="../../resources/js-test.js"></script>
<input id="defaultFocus" autofocus>
<script>

jsTestIsAsync = true;

description('This tests that -internal-direct-focus is not recognized in author stylesheets');

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

function waitForFrameToBeFocused(test)
{
    return new Promise((resolve) => {
        if (focusedDefault)
            resolve();
        else
            didFocusDefault = resolve;
    });
}

async function runTest() {
    await waitForFrameToBeFocused();

    shouldBeTrue('defaultFocus.matches(":focus")');
    shouldThrowErrorName('defaultFocus.matches(":-internal-direct-focus")', 'SyntaxError');

    const host = document.body.appendChild(document.createElement('div'));
    const shadowRoot = host.attachShadow({mode: 'closed'});
    shadowRoot.innerHTML = '<input>';
    window.inputInShadowRoot = shadowRoot.firstChild;
    inputInShadowRoot.focus();

    shouldBeTrue('inputInShadowRoot.matches(":focus")');
    shouldThrowErrorName('inputInShadowRoot.matches(":-internal-direct-focus")', 'SyntaxError');

    finishJSTest();
}

window.onload = runTest;

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