<!doctype html>
<script src="../../resources/run-after-layout-and-paint.js"></script>
<div id="div" style="width: 100px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>

<script>
function addSpellingMarker(elem, start, end) {
    const range = document.createRange();
    const textNode = elem.firstChild;
    range.setStart(textNode, start);
    range.setEnd(textNode, end);
    if (typeof internals !== 'undefined')
        internals.setMarker(document, range, 'spelling');
};

function addSuggestionMarker(elem, start, end) {
    var range = document.createRange();
    var textNode = elem.firstChild;
    range.setStart(textNode, start);
    range.setEnd(textNode, end);
    if (typeof internals !== 'undefined')
        internals.addSuggestionMarker(range, [], 'white', 'orange', 'thin', 'lightBlue');
};

onload = runAfterLayoutAndPaint(function() {
    const div = document.getElementById('div');
    addSpellingMarker(div, 13, 18);
    addSuggestionMarker(div, 7, 12);
}, true);
</script>