blob: b832cd13cc08cf33c9f74d2e45f1fb0e6d904724 [file] [log] [blame]
<!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-file.js"></script>
<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 = findMediaFile("video", "../content/test");
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>