<!DOCTYPE html>
<html>
<body>
<style>
#parent {
    width: 100px;
    height: 100px;
    background: green;
}
#parent:focus-within {
    width: 50px;
    height: 50px;
}
#host {
    width: 50px;
    height: 50px;
    outline: none;
}
</style>
<div id="parent"><div id="host"></div></div>
<div></div>
<script src="../../resources/ui-helper.js"></script>
<script>

const shadowRoot = host.attachShadow({mode: 'closed', delegatesFocus: true});
shadowRoot.innerHTML = `<div tabindex="0"></div>
<style>
div { width: 50px; height: 50px; }
</style>`;

onload = runTest;

async function runTest() {
    if (!window.testRunner)
        return;

    testRunner.waitUntilDone();

    eventSender.mouseMoveTo(host.offsetLeft + 5, host.offsetTop + 5);
    eventSender.mouseDown();
    eventSender.mouseUp();

    await new Promise((resolve) => requestAnimationFrame(() => setTimeout(resolve, 0)));

    await UIHelper.resignFirstResponder();

    await new Promise((resolve) => requestAnimationFrame(() => setTimeout(resolve, 0)));

    testRunner.notifyDone();
}

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