<!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: 200px;
    height: 200px;
    top: 0;
    left: 0;
    position: absolute;
}
</style>
</head>

<body style="margin: 0;">
<div contenteditable id="editable"></div>
<p>This test verifies that input events of type "insertReplacementText" target the right ranges.</p>
<p>To manually test, type 'T' into the input field and try to select a candidate. The output should indicate that the beforeinput and input events for the text replacement were handled, and that the range of the beforeinput event is from 0 to 1.</p>
<div id="output"></div>
<script>
let write = (message) => output.innerHTML += (message + "<br>");

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

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

    if (event.type === "beforeinput") {
        let firstRange = event.getTargetRanges()[0];
        write(`Observed text replacement before input event with range: [${firstRange.startOffset}, ${firstRange.endOffset}] and data: "${event.dataTransfer.getData("text/plain")}"`);
    } else
        write(`Observed text replacement input event with data: "${event.dataTransfer.getData("text/plain")}"`);

    checkForCompletion();
}

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

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

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