OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <title>Test that the cue is styled properly throughout its lifetime.</title> | 2 <title>Test that the cue is styled properly throughout its lifetime.</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 <style> | 7 <style> |
8 video::cue(.red, .red2) { color:red } | 8 video::cue(.red, .red2) { color:red } |
9 video::cue(.green) { color:green } | 9 video::cue(.green) { color:green } |
10 </style> | 10 </style> |
11 <video></video> | 11 <video></video> |
12 <script> | 12 <script> |
13 async_test(function(t) { | 13 async_test(function(t) { |
14 var seekTimeIndex = 0; | 14 var seekTimeIndex = 0; |
15 var step = 0.4; | 15 var step = 0.4; |
16 var initialTime = 0.6; | 16 var initialTime = 0.6; |
17 var endTime = 3.0 | 17 var endTime = 3.0 |
18 | 18 |
19 var video = document.querySelector('video'); | 19 var video = document.querySelector('video'); |
20 video.src = findMediaFile('video', '../content/test'); | 20 video.src = findMediaFile('video', '../content/test'); |
21 | 21 |
22 var track = document.createElement('track'); | 22 var track = document.createElement('track'); |
23 track.src = 'captions-webvtt/styling-lifetime.vtt'; | 23 track.src = 'captions-webvtt/styling-lifetime.vtt'; |
24 track.kind = 'captions'; | 24 track.kind = 'captions'; |
25 track.default = true; | 25 track.default = true; |
26 video.appendChild(track); | 26 video.appendChild(track); |
27 | 27 |
28 video.onseeked = t.step_func(function() { | 28 video.onseeked = t.step_func(function() { |
29 var cueNode = textTrackDisplayElement(video, 'cue').firstElementChild; | 29 var cueNode = textTrackCueElementByIndex(video, 0).firstChild.firstEleme
ntChild; |
30 assert_equals(getComputedStyle(cueNode).color, 'rgb(255, 0, 0)'); | 30 assert_equals(getComputedStyle(cueNode).color, 'rgb(255, 0, 0)'); |
31 cueNode = cueNode.nextElementSibling; | 31 cueNode = cueNode.nextElementSibling; |
32 assert_equals(getComputedStyle(cueNode).color, 'rgb(0, 128, 0)'); | 32 assert_equals(getComputedStyle(cueNode).color, 'rgb(0, 128, 0)'); |
33 cueNode = cueNode.nextElementSibling; | 33 cueNode = cueNode.nextElementSibling; |
34 assert_equals(getComputedStyle(cueNode).color, 'rgb(255, 0, 0)'); | 34 assert_equals(getComputedStyle(cueNode).color, 'rgb(255, 0, 0)'); |
35 | 35 |
36 var seekTime = ++seekTimeIndex * step + initialTime; | 36 var seekTime = ++seekTimeIndex * step + initialTime; |
37 if (seekTime > endTime) | 37 if (seekTime > endTime) |
38 t.done(); | 38 t.done(); |
39 else | 39 else |
40 video.currentTime = seekTime; | 40 video.currentTime = seekTime; |
41 }); | 41 }); |
42 | 42 |
43 video.currentTime = initialTime; | 43 video.currentTime = initialTime; |
44 }); | 44 }); |
45 </script> | 45 </script> |
OLD | NEW |