blob: 1ab12b120d5d45676d093ae8f5cc383bc8b700d0 [file] [log] [blame]
<!DOCTYPE html>
<title>Test that WebVTT objects are being styled correctly based on user settings that should override author settings.</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>
<style>
/* Author settings for the cues */
video::cue(c) {
color: red;
background-color: green;
text-shadow: 3px 3px #00ff00;
font-size: 20px;
font-family: arial;
font-style: normal;
font-variant: normal;
}
</style>
<video>
<track src="captions-webvtt/styling.vtt" kind="captions" default>
</video>
<script>
async_test(function(t) {
var video = document.querySelector("video");
video.src = findMediaFile("video", "../content/test");
video.oncanplaythrough = t.step_func_done(function() {
var cue = textTrackCueElementByIndex(video, 0).firstChild.firstElementChild;
var cueStyle = getComputedStyle(cue);
assert_equals(cueStyle.color, "rgb(255, 0, 0)");
assert_equals(cueStyle.backgroundColor, "rgb(0, 128, 0)");
assert_equals(cueStyle.textShadow, "rgb(0, 255, 0) 3px 3px 0px");
assert_equals(cueStyle.fontSize, "20px");
assert_equals(cueStyle.fontFamily, "arial");
assert_equals(cueStyle.fontStyle, "normal");
assert_equals(cueStyle.fontVariant, "normal");
// Apply user settings and verify they override author-specified settings
internals.settings.setTextTrackTextColor("cyan");
internals.settings.setTextTrackBackgroundColor("green");
internals.settings.setTextTrackTextShadow("2px 2px #ff0000")
internals.settings.setTextTrackTextSize("14px");
internals.settings.setTextTrackFontFamily("fantasy");
internals.settings.setTextTrackFontStyle("italic");
internals.settings.setTextTrackFontVariant("small-caps");
video.currentTime = 0.3;
cue = textTrackCueElementByIndex(video, 0).firstChild.firstElementChild;
cueStyle = getComputedStyle(cue);
assert_equals(cueStyle.color, "rgb(0, 255, 255)");
assert_equals(cueStyle.backgroundColor, "rgb(0, 128, 0)");
assert_equals(cueStyle.textShadow, "rgb(255, 0, 0) 2px 2px 0px");
assert_equals(cueStyle.fontSize, "14px");
assert_equals(cueStyle.fontFamily, "fantasy");
assert_equals(cueStyle.fontStyle, "italic");
assert_equals(cueStyle.fontVariant, "small-caps");
});
});
</script>