<!DOCTYPE html>
<html>
<head>
<style>
div[contenteditable] {
    top: 0;
    left: 0;
    position: absolute;
    font-size: 20px;
    outline: none;
    caret-color: transparent;
}

#overlay {
    position: fixed;
    font-size: 20px;
    visibility: hidden;
    top: 0;
    left: 0;
}

.container {
    position: relative;
}

.box {
    visibility: visible;
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    border: 4px solid black;
    box-sizing: border-box;
    left: -2px;
    top: -2px;
    position: absolute;
}

.description {
    margin-top: 100px;
}
</style>
</head>
<body>
<div contenteditable>Test&nbsp;</div>
<p class="description">This test verifies that highlights can be specified when setting marked text.</p>
<div id="overlay">Test&nbsp;<span class="container"><span class="box"></span>one</span><span class="container"><span class="box"></span>two</span><span class="container"><span class="box"></span>three</span></div>

<script>
const editor = document.querySelector("div[contenteditable]");
editor.focus();
getSelection().setPosition(editor, 1);

if (window.textInputController) {
    textInputController.setMarkedText("onetwothree", 11, 11, true, [
        { from: 0, length: 3, color: "#FF000033" },
        { from: 3, length: 3, color: "#00FF0033" },
        { from: 6, length: 5, color: "#0000FF33" }
    ]);
}
</script>
</body>
</html>