<!DOCTYPE html>
<html>
<head>
<script src="../../resources/js-test.js"></script>
<style>
.grid { display: grid; }
.intrinsicSize { height: min-content; }
.fixedSize { height: 1px; }
</style>

<div id="targetAuto" class="grid" contentEditable>T</div>
<div id="targetFixed" class="grid fixedSize" contentEditable>T</div>
<div id="targetIntrinsic" class="grid intrinsicSize" contentEditable>T</div>

<script>
var targetDiv;
function test(id)
{
    targetDiv = document.getElementById(id);
    targetDiv.focus();

    // Move cursor to the end of line.
    getSelection().modify('move', 'forward', 'lineboundary');

    document.execCommand("insertText", false, "EST");
    shouldBeEqualToString("targetDiv.innerText", "TEST");

    document.execCommand("delete");
    document.execCommand("delete");
    document.execCommand("delete");
    document.execCommand("delete");
    document.execCommand("delete"); // Remove '\n'
    shouldBeEmptyString("targetDiv.innerText");

    document.execCommand("insertText", false, "TEST");
    shouldBeEqualToString("targetDiv.innerText", "TEST");
}
test("targetAuto");
test("targetFixed");
test("targetIntrinsic");
</script>