| <!DOCTYPE html> |
| <title>Test that WebVTT objects are being styled correctly based on user settings that should override default settings.</title> |
| <script src="../media-controls.js"></script> |
| <script src="../../resources/testharness.js"></script> |
| <script src="../../resources/testharnessreport.js"></script> |
| <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 displayTree = textTrackCueElementByIndex(video1, 0); |
| var displayTreeStyle = getComputedStyle(displayTree); |
| var cue = displayTree.firstChild; |
| var cueStyle = getComputedStyle(cue); |
| // These are the expected default cue settings per spec |
| // http://dev.w3.org/html5/webvtt/#applying-css-properties-to-webvtt-node-objects |
| assert_equals(cueStyle.color, "rgb(255, 255, 255)"); |
| assert_equals(cueStyle.backgroundColor, "rgba(0, 0, 0, 0.8)"); |
| assert_equals(cueStyle.fontFamily, "sans-serif"); |
| assert_equals(displayTreeStyle.backgroundColor, "rgba(0, 0, 0, 0)"); |
| assert_equals(displayTreeStyle.padding, "0px"); |
| testApplyUserSettings(); |
| }); |
| |
| // Apply user settings for color and font-size and verify that the other internal settings are retained. |
| function testApplyUserSettings() { |
| internals.settings.setTextTrackTextColor("rgb(0, 255, 255)"); |
| internals.settings.setTextTrackTextSize("14px"); |
| internals.settings.setTextTrackWindowColor("rgba(0, 0, 0, 0.8)"); |
| internals.settings.setTextTrackWindowPadding("5px"); |
| var video2 = addVideoTo(container); |
| video2.oncanplaythrough = t.step_func_done(function() { |
| var displayTree = textTrackCueElementByIndex(video2, 0); |
| var displayTreeStyle = getComputedStyle(displayTree); |
| var cue = displayTree.firstChild; |
| var cueStyle = getComputedStyle(cue); |
| assert_equals(cueStyle.color, "rgb(0, 255, 255)"); |
| assert_equals(cueStyle.fontSize, "14px"); |
| assert_equals(displayTreeStyle.backgroundColor, "rgba(0, 0, 0, 0.8)"); |
| assert_equals(displayTreeStyle.padding, "5px"); |
| // When there is no user setting specified for background-color and font-family, the internal settings are applied. |
| assert_equals(cueStyle.backgroundColor, "rgba(0, 0, 0, 0.8)"); |
| assert_equals(cueStyle.fontFamily, "sans-serif"); |
| }); |
| } |
| }); |
| </script> |
