<!doctype html>
<html>
<head>
<style>
.testDiv {
    width: 200px;
    height: 20px;
    border: 1px solid black;
    white-space: nowrap;
    overflow: hidden;
    transform: translateZ(0);
}

.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';
if (window.testRunner) {
  testRunner.setBackingScaleFactor(
      2,
      () => setTimeout(() => testRunner.notifyDone(), 0));
}

// 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>