<!DOCTYPE html> <!-- webkit-test-runner [ useFlexibleViewport=true ] -->

<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<script src="../../../resources/ui-helper.js"></script>
<style>
#editable {
    width: 320px;
    height: 320px;
    top: 0;
    left: 0;
    position: absolute;
}
</style>
</head>

<body style="margin: 0;">
<input contenteditable id="editable"></input>
<p>This test verifies that <code>beforeinput</code> events of inputType "insertReplacementText" can be prevented.</p>
<p>To manually test, type 'T' into the text field and try to select a candidate. The replacement text should not be inserted.</p>
<pre id="output"></pre>
<script>
let write = (message) => output.innerHTML += (message + "<br>");

function checkForCompletion() {
    doneCount = window.doneCount ? doneCount : 0;
    if (++doneCount == 2 && window.testRunner)
        testRunner.notifyDone();
}

function handleBeforeInput(event) {
    if (event.inputType !== "insertReplacementText")
        return;

    event.preventDefault();

    write(`Prevented "insertReplacementText" with data: "${event.data}"`);
    setTimeout(() => {
        write(`Does the input value contain replacement text? ${editable.value.includes("The")}`);
        checkForCompletion();
    }, 0);
}

function triggerAutocorrectionAfterFirstInput() {
    editable.removeEventListener("input", triggerAutocorrectionAfterFirstInput);
    write(`Replacing "T" with "The"...`);
    editable.setSelectionRange(0, 1);
    UIHelper.applyAutocorrection("The", "T").then(checkForCompletion);
}

if (window.testRunner) {
    testRunner.dumpAsText();
    testRunner.waitUntilDone();
}

editable.addEventListener("beforeinput", handleBeforeInput);
editable.addEventListener("input", triggerAutocorrectionAfterFirstInput);
UIHelper.activateAndWaitForInputSessionAt(160, 160).then(() => UIHelper.typeCharacter("T"));
</script>
</body>

</html>