| <!DOCTYPE html> |
| <title>Test that WebVTT objects are being styled correctly based on important user settings that should override author settings.</title> |
| <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: rgb(255, 0, 0); |
| background-color: rgb(0, 128, 0); |
| text-shadow: rgb(0, 255, 0) 3px 3px 0px; |
| font-size: 20px; |
| font-family: arial; |
| } |
| </style> |
| <div id="container"></div> |
| <script> |
| function addVideoTo(container) { |
| var video = document.createElement("video"); |
| video.src = "../content/test.ogv"; |
| video.autoplay = true; |
| var track = document.createElement("track"); |
| track.src = "captions-webvtt/styling.vtt"; |
| track.kind = "captions"; |
| track.default = "true"; |
| video.appendChild(track); |
| container.appendChild(video); |
| return video; |
| } |
| async_test(function(t) { |
| var container = document.getElementById("container"); |
| |
| // Test a video without user settings applied. |
| var video1 = addVideoTo(container); |
| video1.oncanplaythrough = t.step_func_done(function() { |
| var cue = textTrackCueElementByIndex(video1, 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"); |
| testApplyUserSettings(); |
| }); |
| |
| // Apply important user settings and verify they override author-specified settings. |
| function testApplyUserSettings() { |
| internals.settings.setTextTrackTextColor("rgb(0, 255, 255) !important"); |
| internals.settings.setTextTrackBackgroundColor("rgb(0, 255, 0) !important"); |
| internals.settings.setTextTrackTextShadow("rgb(255, 0, 0) 2px 2px !important") |
| internals.settings.setTextTrackTextSize("14px !important"); |
| internals.settings.setTextTrackFontFamily("fantasy !important"); |
| internals.settings.setTextTrackFontStyle("italic !important"); |
| internals.settings.setTextTrackFontVariant("small-caps !important"); |
| |
| video2 = addVideoTo(container); |
| video2.oncanplaythrough = t.step_func_done(function() { |
| var cue = textTrackCueElementByIndex(video2, 0).firstChild.firstElementChild; |
| var cueStyle = getComputedStyle(cue); |
| assert_equals(cueStyle.color, "rgb(0, 255, 255)"); |
| assert_equals(cueStyle.backgroundColor, "rgb(0, 255, 0)"); |
| assert_equals(cueStyle.textShadow, "rgb(255, 0, 0) 2px 2px"); |
| assert_equals(cueStyle.fontSize, "14px"); |
| assert_equals(cueStyle.fontFamily, "fantasy"); |
| assert_equals(cueStyle.fontStyle, "italic"); |
| assert_equals(cueStyle.fontVariant, "small-caps"); |
| }); |
| } |
| }); |
| </script> |
