<!DOCTYPE html><!-- webkit-test-runner [ enableColorFilter=true ] -->
<style>
    div {
        position: absolute;
        top: 0;
        left: 0;
    }
    #test {
        color: rgb(255, 128, 255);
        font: 20px/1 Monospace;
        outline: none;
        -apple-color-filter: invert(1);
    }
    #overlapping-top {
        background: white;
        width: 100px;
        height: 15px;
    }
    #overlapping-right {
        background: white;
        width: 50px;
        height: 50px;
        left: 50px;
    }
</style>
<div contenteditable id="test"></div>
<!-- The overlapping DIVs are hiding the "^^^^^" characters and the caret to show only the composition underline. -->
<div id="overlapping-top"></div>
<div id="overlapping-right"></div>
<script>
    document.getElementById("test").focus();
    if (window.textInputController)
        textInputController.setMarkedText("^^^^^", 5, 0);
</script>