suggestion-marker-basic.html | Explore in Territory

<!doctype html>
<script src="../../resources/run-after-layout-and-paint.js"></script>
<!-- Tests various permutations of active suggestion underlines in LTR and RTL
     text. -->
<div dir="rtl" style="float: right;">
    <p>RTL</p>
    <div contenteditable id="markRtlAll" dir="rtl">markRtlAll</div>
    <div contenteditable id="markRtlAllThick">markRtlAllThick</div>
    <div contenteditable id="markRtlBeginning">markRtlBeginning</div>
    <div contenteditable id="markRtlAllExceptFirstAndLast">markRtlAllExceptFirstAndLast</div>
    <div contenteditable id="markRtlEnd">markRtlEnd</div>
    <div contenteditable id="markRtlAcrossNodes"><div>mark<span>Rtl</span></div><div>AcrossNodes</div></div>
</div>

<div style="float: left;">
    <p>LTR</p>
    <div contenteditable id="markAll">markAll</div>
    <div contenteditable id="markAllThick">markAllThick</div>
    <div contenteditable id="markAllDifferentColors">markAllDifferentColors</div>
    <div contenteditable id="markBeginning">markBeginning</div>
    <div contenteditable id="markAllExceptFirstAndLast">markAllExceptFirstAndLast</div>
    <div contenteditable id="markEnd">markEnd</div>
    <div contenteditable id="markNothingZero">markNothingZero</div>
    <div contenteditable id="markNothingEnd">markNothingEnd</div>
    <div contenteditable id="markAcrossNodes"><div>mark<span>Across</span></div><div>Nodes</div></div>
    <div contenteditable id="drawOverSpellingMarkerAtBeginning">drawOverSpellingMarkerAtBeginning</div>
    <div contenteditable id="drawOverSpellingMarkerAtEnd">drawOverSpellingMarkerAtEnd</div>
    <div contenteditable id="drawOverSpellingMarkerIntersectingBeginning">drawOverSpellingMarkerIntersectingBeginning</div>
    <div contenteditable id="drawOverSpellingMarkerIntersectingEnd">drawOverSpellingMarkerIntersectingEnd</div>
    <div contenteditable id="notOverridingSpellingMarkersTouching">notOverridingSpellingMarkersTouching</div>
    <div contenteditable id="overridingCompositionMarkerAtBeginning">overridingCompositionMarkerAtBeginning</div>
    <div contenteditable id="overridingCompositionMarkerAtEnd">overridingCompositionMarkerAtEnd</div>
    <div contenteditable id="overridingCompositionMarkerIntersectingBeginning">overridingCompositionMarkerIntersectingBeginning</div>
    <div contenteditable id="overridingCompositionMarkerIntersectingEnd">overridingCompositionMarkerIntersectingEnd</div>
    <div contenteditable id="notOverridingCompositionMarkersTouching">notOverridingCompositionMarkersTouching</div>
</div>

<script>
function addSuggestionMarker(elem, start, end, underlineColor, thick, backgroundColor) {
    var range = document.createRange();
    var textNode = elem.firstChild;
    range.setStart(textNode, start);
    range.setEnd(textNode, end);
    if (typeof internals !== 'undefined')
        internals.addSuggestionMarker(range, [], 'white', underlineColor, thick, backgroundColor);
};

function addCompositionMarker(elem, start, end, underlineColor, thick, backgroundColor) {
    var range = document.createRange();
    var textNode = elem.firstChild;
    range.setStart(textNode, start);
    range.setEnd(textNode, end);
    if (typeof internals !== 'undefined')
        internals.addCompositionMarker(range, underlineColor, thick, 'solid', 'transparent', backgroundColor);
};

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

function addSuggestionMarkerSimple(elem, start, end) {
    addSuggestionMarker(elem, start, end, 'orange', 'thin', 'lightBlue');
};

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

onload = runAfterLayoutAndPaint(function() {
    addSuggestionMarkerSimple(markAll, 0, 7);
    addSuggestionMarker(markAllThick, 0, 12, 'orange', 'thick', 'lightBlue');
    addSuggestionMarker(markAllDifferentColors, 0, 21, 'purple', 'thick', 'lightYellow');
    addSuggestionMarkerSimple(markBeginning, 0, 3);
    addSuggestionMarkerSimple(markAllExceptFirstAndLast, 1, 24);
    addSuggestionMarkerSimple(markEnd, 4, 7);
    addSuggestionMarkerSimple(markNothingZero, 0, 0);
    addSuggestionMarkerSimple(markNothingEnd, 6, 6);

    addSuggestionMarkerSimple(markRtlAll, 0, 10);
    addSuggestionMarker(markRtlAllThick, 0, 15, 'orange', 'thick', 'lightBlue');
    addSuggestionMarkerSimple(markRtlBeginning, 0, 3);
    addSuggestionMarkerSimple(markRtlAllExceptFirstAndLast, 1, 27);
    addSuggestionMarkerSimple(markRtlEnd, 7, 10);

    highlightAcrossNodes(markAcrossNodes.childNodes[0].firstChild, 3,
        markAcrossNodes.childNodes[1].firstChild, 3);
    highlightAcrossNodes(markRtlAcrossNodes.childNodes[0].firstChild, 3,
    markRtlAcrossNodes.childNodes[1].firstChild, 3);

    addSuggestionMarkerSimple(drawOverSpellingMarkerAtBeginning, 0, 6);
    addSpellingMarker(drawOverSpellingMarkerAtBeginning, 0, 1);

    addSuggestionMarkerSimple(drawOverSpellingMarkerAtEnd, 0, 6);
    addSpellingMarker(drawOverSpellingMarkerAtEnd, 5, 6);

    addSuggestionMarkerSimple(drawOverSpellingMarkerIntersectingBeginning, 1, 5);
    addSpellingMarker(drawOverSpellingMarkerIntersectingBeginning, 0, 2);

    addSuggestionMarkerSimple(drawOverSpellingMarkerIntersectingEnd, 1, 5);
    addSpellingMarker(drawOverSpellingMarkerIntersectingEnd, 4, 6);

    addSuggestionMarkerSimple(notOverridingSpellingMarkersTouching, 1, 5);
    addSpellingMarker(notOverridingSpellingMarkersTouching, 0, 1);
    addSpellingMarker(notOverridingSpellingMarkersTouching, 5, 6);

    addSuggestionMarkerSimple(overridingCompositionMarkerAtBeginning, 0, 6);
    addCompositionMarker(overridingCompositionMarkerAtBeginning, 0, 1, 'purple', 'thick', 'lightYellow');

    addSuggestionMarkerSimple(overridingCompositionMarkerAtEnd, 0, 6);
    addCompositionMarker(overridingCompositionMarkerAtEnd, 5, 6, 'purple', 'thick', 'lightYellow');

    addSuggestionMarkerSimple(overridingCompositionMarkerIntersectingBeginning, 1, 5);
    addCompositionMarker(overridingCompositionMarkerIntersectingBeginning, 0, 2, 'purple', 'thick', 'lightYellow');

    addSuggestionMarkerSimple(overridingCompositionMarkerIntersectingEnd, 1, 5);
    addCompositionMarker(overridingCompositionMarkerIntersectingEnd, 4, 6, 'purple', 'thick', 'lightYellow');

    addSuggestionMarkerSimple(notOverridingCompositionMarkersTouching, 1, 5);
    addCompositionMarker(notOverridingCompositionMarkersTouching, 0, 1, 'purple', 'thick', 'lightYellow');
    addCompositionMarker(notOverridingCompositionMarkersTouching, 5, 6, 'purple', 'thick', 'lightYellow');
}, true);
</script>
chromium/third_party/blink/web_tests/paint/markers/suggestion-marker-basic.html
