| <!DOCTYPE html> |
| <title>Test that default positioned TextTrack's cues are rendered correctly.</title> |
| <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 = "../content/test.ogv"; |
| |
| 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> |
