<!DOCTYPE html>
<html>
<head>
    <script src="../../resources/js-test-pre.js"></script>
</head>
<body>
    <div id="editable" contenteditable onbeforeinput=beforeinput(event)>foo barbaz garply</div>
    <script type="text/javascript">
        description("To manually test this, try deleting backwards/forwards at various text granularities and observe the output.");

        editable.focus();

        if (window.testRunner) {
            select(0, 0);
            testRunner.execCommand("deleteForward");

            select(3, 3);
            testRunner.execCommand("deleteForward");
            testRunner.execCommand("deleteBackward");

            select(17, 17);
            testRunner.execCommand("deleteBackward");
            testRunner.execCommand("deleteToBeginningOfLine");

            select(7, 7);
            testRunner.execCommand("deleteWordBackward");
            testRunner.execCommand("deleteWordForward");

            select(0, 10);
            testRunner.execCommand("deleteBackward");
        }

        function beforeinput(event)
        {
            shouldBeTrue("event.inputType.startsWith('delete')");

            window.deletionRange = event.getTargetRanges()[0];
            shouldBe("deletionRange.startContainer", "deletionRange.endContainer");
            debug(`Deleting text in range: [${deletionRange.startOffset}, ${deletionRange.endOffset}]`)
            event.preventDefault();
        }

        function select(startOffset, endOffset)
        {
            let range = document.createRange();
            let textNode = editable.childNodes[0];

            getSelection().removeAllRanges();
            range.setStart(textNode, startOffset);
            range.setEnd(textNode, endOffset);
            getSelection().addRange(range);
        }
    </script>
    <script src="../../resources/js-test-post.js"></script>
</body>
</html>