inline_spelling_markers.html | Explore in Territory

<!doctype html>
<html>
<head>
<style>
body { overflow:hidden; }

.testDiv {
    width: 200px;
    height: 20px;
    border: 1px solid black;
    white-space: nowrap;
    overflow: hidden;
}

.forcertl {
    direction: rtl;
    unicode-bidi: bidi-override;
}

.ellipses {
    text-overflow:ellipsis;
}

</style>
</head>
<body>
<div id="warning">
This test requires window.internals. If you use content_shell,
"--expose-internals-for-testing" command flag enables it.
</div>

LTR
<div id="testLTR" class="testDiv" contenteditable="true">the the adlj adaasj sdklj. there there</div>

RTL
<div id="testRTL" class="testDiv forcertl" contenteditable="true">the the adlj adaasj sdklj. there there</div>

LTR (text-overflow:ellipses):
<div id="testLTREllipses" class="testDiv ellipses" contenteditable="true">the the adlj adaasj sdklj. there there</div>

RTL (text-overflow:ellipses):
<div id="testRTLEllipses" class="testDiv forcertl ellipses" contenteditable="true">the the adlj adaasj sdklj. there there</div>

<script>
if (window.internals)
  document.getElementById('warning').style.display = 'none';

// This tests the correct placement of inline spelling and grammar markers in
// text. Markers should line up exactly under misspelled words in all cases.

// 'adlj', adaasj', 'sdklj'.
const spellingMarkerRanges = [[8, 4], [13, 6], [20, 5]];

// 'the', 'there'.
const grammarMarkerRanges = [[4, 3], [33, 5]];

['testLTR', 'testRTL', 'testLTREllipses', 'testRTLEllipses'].forEach(id => {
  const div = document.getElementById(id);
  const text = div.firstChild;

  spellingMarkerRanges.forEach(markerRange => {
    const range = document.createRange();
    range.setStart(text, markerRange[0]);
    range.setEnd(text, markerRange[0] + markerRange[1]);
    if (window.internals)
      internals.setMarker(document, range, 'spelling');
  });

  grammarMarkerRanges.forEach(markerRange => {
    const range = document.createRange();
    range.setStart(text, markerRange[0]);
    range.setEnd(text, markerRange[0] + markerRange[1]);
    if (window.internals)
      internals.setMarker(document, range, 'grammar');
  });
});
</script>
</body>
</html>
chromium/third_party/blink/web_tests/paint/markers/inline_spelling_markers.html
