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 |