| OLD | NEW |
| 1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
| 2 <html> | 2 <title>Test that TextTrack's cues are rendered correctly when the snap to lines
flag is not set.</title> |
| 3 <head> | 3 <script src="../media-file.js"></script> |
| 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> | 4 <script src="../media-controls.js"></script> |
| 5 <script src="../../resources/testharness.js"></script> |
| 6 <script src="../../resources/testharnessreport.js"></script> |
| 7 <video> |
| 8 <track src="captions-webvtt/captions-snap-to-lines-not-set.vtt" kind="captio
ns" default> |
| 9 </video> |
| 10 <script> |
| 11 async_test(function(t) { |
| 12 var video = document.querySelector("video"); |
| 13 var testTrack = document.querySelector("track"); |
| 14 video.src = findMediaFile("video", "../content/test"); |
| 5 | 15 |
| 6 <script src=../media-file.js></script> | 16 // In Chromium it is the enclosure element, which provides the controls heig
ht, otherwise the panel; |
| 7 <!-- TODO(philipj): Convert test to testharness.js. crbug.com/588956 | 17 // both are the second child in the shadow DOM. |
| 8 (Please avoid writing new tests using video-test.js) --> | 18 var controlsPanelElement = internals.shadowRoot(video).firstChild.firstChild
; |
| 9 <script src=../video-test.js></script> | |
| 10 <script src=../media-controls.js></script> | |
| 11 | 19 |
| 12 <script> | 20 var cueDisplayContainer; |
| 21 video.oncanplaythrough = t.step_func(function() { |
| 22 cueDisplayContainer = textTrackDisplayElement(video); |
| 23 runNextTestCase(); |
| 24 }); |
| 13 | 25 |
| 14 var testTrack; | 26 var seekTimeIndex = 0; |
| 15 var cueDisplayElement; | 27 var testCaseSeekTime = [ |
| 16 var cueDisplayContainer; | 28 0.10, |
| 17 var controlsPanelElement; | 29 0.60, |
| 18 var seekedCount = 0; | 30 1.10, |
| 19 | 31 1.60, |
| 20 var testCaseDescription = [ | 32 2.10, |
| 21 "Default", | 33 2.60, |
| 22 "Center", | 34 3.10, |
| 23 "Top left", | 35 4.10 |
| 24 "Top right", | 36 ]; |
| 25 "Bottom right", | 37 var cueRenderingPosition = [ |
| 26 "Bottom left", | 38 // Number of active cues 1. |
| 27 "Bottom center", | 39 [[0 ,100, "middle"]], |
| 28 "Multiple cues" | 40 [[0, 50, "middle"]], |
| 29 ]; | 41 [[0, 0, "start"]], |
| 30 | 42 [[0, 0, "end"]], |
| 31 var testCaseSeekTime = [ | 43 [[0, 100, "right"]], |
| 32 0.10, | 44 [[0, 100, "left"]], |
| 33 0.60, | 45 [[0, 50, "middle"]], |
| 34 1.10, | 46 [ //Number of active cues 7. |
| 35 1.60, | 47 [0, 50, "middle"], |
| 36 2.10, | 48 [0, 0, "start"], |
| 37 2.60, | 49 [0, 0, "end"], |
| 38 3.10, | 50 [0, 100, "middle"], |
| 39 4.10 | 51 [0, 25, "end"], |
| 40 ]; | 52 [44, 33, "start"], |
| 41 | 53 [23, 55, "start"] |
| 42 var currentTestCase = 0; | 54 ] |
| 43 | 55 ]; |
| 44 function seeked() | 56 function runNextTestCase() { |
| 45 { | 57 if (seekTimeIndex == testCaseSeekTime.length) { |
| 46 consoleWrite("Active cues: " + testTrack.track.activeCues.length); | 58 t.done(); |
| 47 for (var i = 0; i < testTrack.track.activeCues.length; ++i) { | 59 return; |
| 48 cueDisplayElement = textTrackDisplayElement(video, 'display', i)
; | |
| 49 | |
| 50 consoleWrite(""); | |
| 51 consoleWrite("* Cue " + i + " *"); | |
| 52 testExpected("cueDisplayElement.innerText", testTrack.track.acti
veCues[i].text); | |
| 53 consoleWrite("Cue alignment (default or as specified): " + testT
rack.track.activeCues[i].align); | |
| 54 | |
| 55 consoleWrite("Cue left position (percentage): " + Math.round(cue
DisplayElement.offsetLeft / cueDisplayContainer.offsetWidth * 100)); | |
| 56 consoleWrite("Cue top position (percentage): " + Math.round(cueD
isplayElement.offsetTop / cueDisplayContainer.offsetHeight * 100)); | |
| 57 } | |
| 58 | |
| 59 runNextTestCase(); | |
| 60 }; | |
| 61 | |
| 62 function runNextTestCase() | |
| 63 { | |
| 64 if (currentTestCase == testCaseDescription.length) { | |
| 65 endTest(); | |
| 66 return; | |
| 67 } | |
| 68 | |
| 69 consoleWrite(""); | |
| 70 consoleWrite("** " + testCaseDescription[currentTestCase] + " **"); | |
| 71 | |
| 72 video.currentTime = testCaseSeekTime[currentTestCase]; | |
| 73 waitForEvent('seeked', seeked, false, true); | |
| 74 | |
| 75 currentTestCase++; | |
| 76 } | 60 } |
| 77 | 61 |
| 78 function loaded() | 62 video.currentTime = testCaseSeekTime[seekTimeIndex]; |
| 79 { | 63 video.onseeked = t.step_func(seeked); |
| 80 consoleWrite("Test that TextTrack's cues are rendered correctly when
the snap to lines flag is not set."); | 64 } |
| 81 | 65 |
| 82 findMediaElement(); | 66 function seeked() { |
| 83 testTrack = document.querySelector('track'); | 67 var cuePosition = cueRenderingPosition[seekTimeIndex]; |
| 84 video.src = findMediaFile('video', '../content/test'); | 68 for (var i = 0; i < testTrack.track.activeCues.length; ++i) { |
| 69 cueDisplayElement = textTrackDisplayElement(video, "display", i); |
| 85 | 70 |
| 86 // In Chromium it is the enclosure element, which provides the contr
ols height, otherwise the panel; | 71 assert_equals(cueDisplayElement.innerText, testTrack.track.activeCue
s[i].text); |
| 87 // both are the second child in the shadow DOM. | 72 assert_equals(testTrack.track.activeCues[i].align, cuePosition[i][2]
); |
| 88 controlsPanelElement = internals.shadowRoot(video).firstChild.firstC
hild; | |
| 89 | 73 |
| 90 waitForEventOnce('canplaythrough', function() { | 74 assert_equals(Math.round(cueDisplayElement.offsetLeft / cueDisplayCo
ntainer.offsetWidth * 100), cuePosition[i][0]); |
| 91 cueDisplayContainer = textTrackDisplayElement(video); | 75 assert_equals(Math.round(cueDisplayElement.offsetTop / cueDisplayCon
tainer.offsetHeight * 100), cuePosition[i][1]); |
| 92 runNextTestCase(); | |
| 93 }); | |
| 94 } | 76 } |
| 95 | 77 |
| 96 </script> | 78 seekTimeIndex++; |
| 97 </head> | 79 runNextTestCase(); |
| 98 <body onload="loaded()"> | 80 } |
| 99 <video controls> | 81 }); |
| 100 <track src="captions-webvtt/captions-snap-to-lines-not-set.vtt" kind
="captions" default> | 82 </script> |
| 101 </video> | |
| 102 </body> | |
| 103 </html> | |
| OLD | NEW |