| 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 |