blob: a0eec76eb14e3aa46f6d9baed4a1d588659b9dd0 [file] [log] [blame]
<!DOCTYPE html>
<title>Test that default positioned TextTrack's cues are rendered correctly.</title>
<script src="../media-file.js"></script>
<script src="../media-controls.js"></script>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script src="../../resources/run-after-layout-and-paint.js"></script>
<video>
<track src="captions-webvtt/captions.vtt" kind="captions" default>
</video>
<script>
async_test(function(t) {
var video = document.querySelector("video");
var testTrack = document.querySelector("track");
video.src = findMediaFile("video", "../content/test");
var cueTextIndex = 0;
var cueText = [ "Lorem", "ipsum", "dolor", "sit" ];
video.onseeked = t.step_func(function() {
assert_equals(video.currentTime, cueTextIndex + 0.5);
assert_equals(testTrack.track.activeCues.length, 1);
assert_equals(testTrack.track.activeCues[0].text, cueText[cueTextIndex]);
var testCueDisplayBox = textTrackDisplayElement(video);
assert_equals(testCueDisplayBox.innerText, cueText[cueTextIndex]);
assert_equals(2 * testCueDisplayBox.offsetLeft, video.videoWidth - testCueDisplayBox.offsetWidth)
if (++cueTextIndex == cueText.length) {
// Test the cue display colors and font.
testFontSize([[2560, 1440], [1280, 960], [640, 480], [320, 240]]);
} else {
video.currentTime += 1;
}
});
function testFontSize(subjects) {
var dimensions = subjects.shift();
video.width = dimensions[0];
video.height = dimensions[1];
runAfterLayoutAndPaint(t.step_func(function() {
assert_equals(getComputedStyle(textTrackContainerElement(video)).fontSize, parseInt(video.height * 0.05) + "px");
if (subjects.length) {
testFontSize(subjects);
} else {
assert_equals(getComputedStyle(textTrackContainerElement(video)).fontFamily, "sans-serif");
assert_equals(getComputedStyle(textTrackContainerElement(video)).color, "rgb(255, 255, 255)");
assert_equals(getComputedStyle(textTrackDisplayElement(video).firstChild).backgroundColor, "rgba(0, 0, 0, 0.8)");
t.done();
}
}));
}
video.currentTime = 0.5;
});
</script>