<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width">
<script src="../../../resources/js-test.js"></script>
<script src="../../../resources/ui-helper.js"></script>
<style>
#test {
    border: 1px solid black;
    height: 500px;
    width: 500px;
}

.hidden {
    display: none;
}
</style>
</head>
<body>
<p id="description"></p>
<p id="manual-instructions" class="hide">To run this test by hand, place the text insertion point at the begin of the text below and press Option + Forward Delete.</p>
<div id="console"></div>
<div id="test" contenteditable="true">hello world</div>
<script>
window.jsTestIsAsync = true;

let testElement = document.getElementById("test");
let mutationObserver = null;

function handleMutation()
{
    mutationObserver.disconnect();
    shouldBeEqualToString('document.getElementById("test").textContent', "world");
    document.body.removeChild(testElement);
    finishJSTest();
}

async function runTest()
{
    if (!window.testRunner)
        document.getElementById("manual-instructions").classList.remove("hidden");

    mutationObserver = new MutationObserver(handleMutation);
    mutationObserver.observe(testElement, { subtree:true, characterData: true });

    function handleFocus() {
        window.getSelection().setBaseAndExtent(testElement.firstChild, 0, testElement.firstChild, 0); // Put caret before the 'h'.
        if (window.testRunner)
            UIHelper.keyDown("forwardDelete", ["altKey"]);
    }

    if (window.testRunner) {
        await UIHelper.activateElement(testElement);
        handleFocus();
    } else
        testElement.addEventListener("focus", handleFocus, { once: true });
}

description("Tests that pressing Option + Forward Delete in a content-editable field deletes to next word.");
runTest();
</script>
</body>
</html>