<!DOCTYPE html>
<html>
<head>
<style>
#test {
    font-size: 300%;
}
</style>
</head>
<body>
The composition underline should be under "XYZ".
<div id=test contenteditable></div>

<script>
function moveCaretToBeginningOfElement(elm) {
    var range = document.createRange();
    range.selectNodeContents(elm);
    range.collapse(true);
    var sel = window.getSelection();
    sel.removeAllRanges();
    sel.addRange(range);
}
var test = document.getElementById('test');
test.focus();
if (window.testRunner) {
    textInputController.insertText("cba");
    moveCaretToBeginningOfElement(test);
    textInputController.setMarkedText("ZYX", 0, 0);
}
</script>
</body>
</html>