<!DOCTYPE html>
<title>Test that directionality is set correctly on cues.</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="../media-controls.js"></script>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<video>
    <track src="captions-webvtt/captions-rtl.vtt" kind="captions" default>
</video>
<script>
async_test(function(t) {
    var testTrack = document.querySelector("track");
    var video = document.querySelector("video");
    video.src = "../content/test.ogv";

    var seekedCount = 0;
    var info = ["تجربة",
                "\t1234",
                "تجربة\nLTR new line, but cue should be RTL",
                "LTR cue تجربة",
                ";1234تجربة",
                "\t०१२३४५६७८९  \t",
                "𐡘 (Imperial Aramaic number one, U+10858) strong RTL, non-BMP",
                "𝅘𝅥 (Musical symbol quarter note, U+1D15F) strong LTR, non-BMP",
                "<ruby><rt>𝅘𝅥</rt>تجربة</ruby>",
                "<ruby>1234<rt>تجربة</rt></ruby>"];

    // RTL cues alternate with LTR cues.
    video.onseeked = t.step_func(function() {
        var testCueDisplayBox = textTrackDisplayElement(video);

        // Jump to next cue.
        assert_equals(video.currentTime, (seekedCount / 2) + 0.25);
        assert_equals(testTrack.track.activeCues.length, 1);
        assert_equals(testTrack.track.activeCues[0].text, info[seekedCount]);
        assert_equals(testCueDisplayBox.innerText, info[seekedCount].replace(/<[^>]+>/g, ""));

        var direction = seekedCount % 2 ? "ltr" : "rtl";

        assert_equals(2 * testCueDisplayBox.offsetLeft, video.videoWidth - testCueDisplayBox.offsetWidth);

        assert_equals(getComputedStyle(testCueDisplayBox).direction, direction);

        if (++seekedCount == info.length)
            t.done();
        else
            video.currentTime += 0.5;
    });

    video.currentTime = 0.25;
});
</script>