| <!DOCTYPE html> |
| <title>Test that the cue is styled properly throughout its lifetime.</title> |
| <script src="../media-controls.js"></script> |
| <script src="../../resources/testharness.js"></script> |
| <script src="../../resources/testharnessreport.js"></script> |
| <style> |
| video::cue(.red, .red2) { color:red } |
| video::cue(.green) { color:green } |
| </style> |
| <video></video> |
| <script> |
| async_test(function(t) { |
| var seekTimeIndex = 0; |
| var step = 0.4; |
| var initialTime = 0.6; |
| var endTime = 3.0 |
| |
| var video = document.querySelector('video'); |
| video.src = '../content/test.ogv'; |
| |
| var track = document.createElement('track'); |
| track.src = 'captions-webvtt/styling-lifetime.vtt'; |
| track.kind = 'captions'; |
| track.default = true; |
| video.appendChild(track); |
| |
| video.onseeked = t.step_func(function() { |
| var cueNode = textTrackCueElementByIndex(video, 0).firstChild.firstElementChild; |
| assert_equals(getComputedStyle(cueNode).color, 'rgb(255, 0, 0)'); |
| cueNode = cueNode.nextElementSibling; |
| assert_equals(getComputedStyle(cueNode).color, 'rgb(0, 128, 0)'); |
| cueNode = cueNode.nextElementSibling; |
| assert_equals(getComputedStyle(cueNode).color, 'rgb(255, 0, 0)'); |
| |
| var seekTime = ++seekTimeIndex * step + initialTime; |
| if (seekTime > endTime) |
| t.done(); |
| else |
| video.currentTime = seekTime; |
| }); |
| |
| video.currentTime = initialTime; |
| }); |
| </script> |
