<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
</head>
<body>
<script src="../../resources/js-test.js"></script>
<script src="../../resources/ui-helper.js"></script>
<script>

description('This tests delegating focus in a shadow tree to an input element. WebKit should move the selection as well as the focus');

jsTestIsAsync = true;

const host = document.createElement('div');
document.body.appendChild(host);

const shadowRoot = host.attachShadow({mode: 'closed', delegatesFocus: true});
shadowRoot.innerHTML = `<input type="text" id="target">
<div onclick="checkSelection()">Click here</div>`;
const target = shadowRoot.getElementById("target");

async function runTest() {
    const divRect = shadowRoot.querySelector('div').getBoundingClientRect();
    await UIHelper.activateAt(divRect.x + 5, divRect.y + 5);
    await UIHelper.ensurePresentationUpdate();
    await new Promise(requestAnimationFrame);
    await selectionCheck;
}

let resolveSelectionCheck;
const selectionCheck = new Promise((resolve) => resolveSelectionCheck = resolve);
function checkSelection() {
    shouldBe('document.activeElement', 'host');
    shouldBe('shadowRoot.querySelector("input")', 'target');
    shouldBe('shadowRoot.activeElement', 'target');
    shouldBeEqualToString('target.value', '');
    document.execCommand('insertText', false, 'hello');
    shouldBeEqualToString('target.value', 'hello');
    shouldBe('target.selectionStart', '5');
    shouldBe('target.selectionEnd', '5');
    resolveSelectionCheck();
}

if (window.testRunner)
    UIHelper.wait(runTest());
else
    selectionCheck.then(() => finishJSTest());

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