| <!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> |
