caret-at-the-edge-of-contenteditable.html

<!DOCTYPE html>
<head>
</head>
<body>
<div>When the caret reaches the edge of the input box or content editable div, on the next input it must stay at the edge of the control.</div>
<span style="position:absolute; visibility:hidden" id="single-digit">0</span>
<div style="border:thin solid black; white-space:nowrap; overflow:hidden" contenteditable="true" id="input-contenteditable">012345678901234567890123456789</div>
<script>

var contentEditable = document.getElementById("input-contenteditable");
var singleDigitWidth = document.getElementById("single-digit").clientWidth;
var contentEditableSize = 10;
contentEditable.style.width = (singleDigitWidth * contentEditableSize) + "px";
contentEditable.focus();
// Move the caret to the beginning of the input.
getSelection().collapse(contentEditable.firstChild, 0);
var editableContent = contentEditable.textContent;
if (window.eventSender) {
    for (var i = 0; i < contentEditableSize * 1.2; ++i)
        eventSender.keyDown(editableContent[i]);
}

</script>
</body>

chromium/third_party/blink/web_tests/editing/input/caret-at-the-edge-of-contenteditable.html