<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);
    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);
    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(() => testRunner.setBackingScaleFactor(2, done));
}

</script>
</body>
</html>
