| OLD | NEW |
| 1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
| 2 <title>Test that WebVTT objects are being styled correctly based on user setting
s that should override default settings.</title> | 2 <title>Test that WebVTT objects are being styled correctly based on user setting
s that should override default settings.</title> |
| 3 <script src="../media-file.js"></script> | 3 <script src="../media-file.js"></script> |
| 4 <script src="../media-controls.js"></script> | 4 <script src="../media-controls.js"></script> |
| 5 <script src="../../resources/testharness.js"></script> | 5 <script src="../../resources/testharness.js"></script> |
| 6 <script src="../../resources/testharnessreport.js"></script> | 6 <script src="../../resources/testharnessreport.js"></script> |
| 7 <video> | 7 <video> |
| 8 <track src="captions-webvtt/styling.vtt" kind="captions" default> | 8 <track src="captions-webvtt/styling.vtt" kind="captions" default> |
| 9 </video> | 9 </video> |
| 10 <script> | 10 <script> |
| 11 async_test(function(t) { | 11 async_test(function(t) { |
| 12 var video = document.querySelector("video"); | 12 var video = document.querySelector("video"); |
| 13 video.src = findMediaFile("video", "../content/test"); | 13 video.src = findMediaFile("video", "../content/test"); |
| 14 | 14 |
| 15 video.oncanplaythrough = t.step_func_done(function() { | 15 video.oncanplaythrough = t.step_func_done(function() { |
| 16 var cue = textTrackDisplayElement(video, "cue"); | 16 var cue = textTrackCueElementByIndex(video, 0).firstChild; |
| 17 var cueStyle = getComputedStyle(cue); | 17 var cueStyle = getComputedStyle(cue); |
| 18 // These are the expected default cue settings per spec | 18 // These are the expected default cue settings per spec |
| 19 // http://dev.w3.org/html5/webvtt/#applying-css-properties-to-webvtt-nod
e-objects | 19 // http://dev.w3.org/html5/webvtt/#applying-css-properties-to-webvtt-nod
e-objects |
| 20 assert_equals(cueStyle.color, "rgb(255, 255, 255)"); | 20 assert_equals(cueStyle.color, "rgb(255, 255, 255)"); |
| 21 assert_equals(cueStyle.backgroundColor, "rgba(0, 0, 0, 0.8)"); | 21 assert_equals(cueStyle.backgroundColor, "rgba(0, 0, 0, 0.8)"); |
| 22 assert_equals(cueStyle.fontFamily, "sans-serif"); | 22 assert_equals(cueStyle.fontFamily, "sans-serif"); |
| 23 | 23 |
| 24 // Apply user settings for color and font-size and verify that the other
internal settings are retained. | 24 // Apply user settings for color and font-size and verify that the other
internal settings are retained. |
| 25 internals.settings.setTextTrackTextColor("purple"); | 25 internals.settings.setTextTrackTextColor("purple"); |
| 26 internals.settings.setTextTrackTextSize("14px"); | 26 internals.settings.setTextTrackTextSize("14px"); |
| 27 | 27 |
| 28 video.currentTime = 0.3; | 28 video.currentTime = 0.3; |
| 29 | 29 |
| 30 cue = textTrackDisplayElement(video, "cue"); | 30 cue = textTrackCueElementByIndex(video, 0).firstChild; |
| 31 cueStyle = getComputedStyle(cue); | 31 cueStyle = getComputedStyle(cue); |
| 32 assert_equals(cueStyle.color, "rgb(128, 0, 128)"); | 32 assert_equals(cueStyle.color, "rgb(128, 0, 128)"); |
| 33 assert_equals(cueStyle.fontSize, "14px"); | 33 assert_equals(cueStyle.fontSize, "14px"); |
| 34 // When there is no user setting specified for background-color and font
-family, the internal settings are applied. | 34 // When there is no user setting specified for background-color and font
-family, the internal settings are applied. |
| 35 assert_equals(cueStyle.backgroundColor, "rgba(0, 0, 0, 0.8)"); | 35 assert_equals(cueStyle.backgroundColor, "rgba(0, 0, 0, 0.8)"); |
| 36 assert_equals(cueStyle.fontFamily, "sans-serif"); | 36 assert_equals(cueStyle.fontFamily, "sans-serif"); |
| 37 }); | 37 }); |
| 38 }); | 38 }); |
| 39 </script> | 39 </script> |
| OLD | NEW |