<html>
<head>
<style>
.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>
<script src="../../resources/js-test-pre.js"></script>
LTR
<div id="testLTR" class="testDiv" contenteditable="true"></div>
RTL
<div id="testRTL" class="testDiv forcertl" contenteditable="true"></div>
LTR (text-overflow:ellipses):
<div id="testLTREllipses" class="testDiv ellipses" contenteditable="true"></div>
RTL (text-overflow:ellipses):
<div id="testRTLEllipses" class="testDiv forcertl ellipses" contenteditable="true"></div>

<script>

const incorrectPhrase = "the the adlj adaasj sdklj. there there";

description("This tests the correct placement of inline spelling and grammar "
    + "markers in the following text: "
    + "'" + incorrectPhrase + "'. "
    + "Spelling markers should line up exactly under misspelled words in all cases.");

jsTestIsAsync = true;

if (window.internals) {
    internals.settings.setUnifiedTextCheckerEnabled(true);
    internals.settings.setAsynchronousSpellCheckingEnabled(true);
}

function runTextCheckingTestFor(id)
{
    var div = document.getElementById(id);
    div.focus();
    document.execCommand("InsertText", false, incorrectPhrase);

    // Add a word separator so that both spelling and grammar markers will appear.
    document.execCommand("InsertText", false, " ");

    verifyMarkers();
}

function verifyMarkers()
{
    if (!window.internals)
        return done();

    // Take care of spelling markers first.
    shouldBecomeEqual('internals.hasSpellingMarker(8, 4)', 'true', function() { // Verifies 'adlj'.
        shouldBecomeEqual('internals.hasSpellingMarker(13, 6)', 'true', function() { // Verifies 'adaasj'.
            shouldBecomeEqual('internals.hasSpellingMarker(20, 5)', 'true', function() {  // Verifies 'sdklj'.
                verifyGrammarMarkers();
            });
         });
    });

    function verifyGrammarMarkers()
    {
        shouldBecomeEqual('internals.hasGrammarMarker(4, 3)', 'true', function() { // Verifies duplicated 'the'.
            shouldBecomeEqual('internals.hasGrammarMarker(33, 5)', 'true', function() { // Verifies duplicated 'there'.
                done();
            });
        });
    }
}

var tests = [
    function() { runTextCheckingTestFor('testLTR'); },
    function() { runTextCheckingTestFor('testRTL'); },
    function() { runTextCheckingTestFor('testLTREllipses'); },
    function() { runTextCheckingTestFor('testRTLEllipses'); }
];

function done()
{
    var next = tests.shift();
    if (next)
        return window.setTimeout(next, 0);

    finishJSTest();
}

if (window.testRunner) {
    testRunner.dumpAsText(true);
    testRunner.setBackingScaleFactor(2, function () {
        done();
    });
}

</script>
<script src="../../resources/js-test-post.js"></script>
</body>
</html>