<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/ui-helper.js"></script>
<script src="../../resources/js-test.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);
    debug(div.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.
    debug("Verifies 'adlj'.");
    shouldBecomeEqual('internals.hasSpellingMarker(8, 4)', 'true', function() {
        debug("Verifies 'adaasj'.");
        shouldBecomeEqual('internals.hasSpellingMarker(13, 6)', 'true', function() {
            debug("Verifies 'sdklj'.");
            shouldBecomeEqual('internals.hasSpellingMarker(20, 5)', 'true', function() {
                verifyGrammarMarkers();
            });
         });
    });

    function verifyGrammarMarkers()
    {
        debug("Verifies duplicated 'the'.");
        shouldBecomeEqual('internals.hasGrammarMarker(4, 3)', 'true', function() {
            debug("Verifies duplicated 'there'.");
            shouldBecomeEqual('internals.hasGrammarMarker(33, 5)', 'true', function() {
                debug("");
                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();
}

UIHelper.setSpellCheckerResults({
    "the the adlj adaasj sdklj. there there\u00A0" : [
        { type : "spelling", from : 8, to : 12 },
        { type : "spelling", from : 13, to : 19 },
        { type : "spelling", from : 20, to : 25 },
        {
            type : "grammar",
            from : 4,
            to : 7,
            details : [{ from : 0, to : 3 }]
        },
        {
            type : "grammar",
            from : 33,
            to : 38,
            details : [{ from : 0, to : 5 }]
        }
    ]
}).then(done);
</script>
</body>
</html>