| <!doctype html> |
| <title>TextTrackCue display cue</title> |
| |
| <div></div> |
| <script src=../../../resources/testharness.js></script> |
| <script src=../../../resources/testharnessreport.js></script> |
| <script src=../../media-controls.js></script> |
| <script src=../../media-file.js></script> |
| <script> |
| if (window.internals) |
| internals.settings.setGenericCueAPIEnabled(true); |
| |
| function createValidCueFragment(text) |
| { |
| let cueNode = document.createElement('span'); |
| cueNode.setAttribute('cue', ''); |
| cueNode.innerText = text; |
| |
| let backgroundNode = document.createElement('div'); |
| backgroundNode.setAttribute('cuebackground', ''); |
| backgroundNode.appendChild(cueNode); |
| |
| fragment = document.createDocumentFragment(); |
| fragment.appendChild(backgroundNode); |
| |
| return fragment; |
| } |
| |
| async_test(test => { |
| |
| video = document.createElement('video'); |
| video.controls = true; |
| |
| track = video.addTextTrack('subtitles'); |
| track.default = true; |
| track.mode = 'showing'; |
| |
| document.body.appendChild(video); |
| |
| let cue1Text = 'First cue'; |
| let cue1 = new TextTrackCue(0, 1.1, createValidCueFragment(cue1Text)); |
| cue1.id = "one"; |
| track.addCue(cue1); |
| assert_equals(track.cues.length, 1, 'only one cue'); |
| |
| let cue2Text = 'Second cue'; |
| let cue2 = new TextTrackCue(1, 2, createValidCueFragment(cue2Text)); |
| cue2.id = "two"; |
| track.addCue(cue2); |
| assert_equals(track.cues.length, 2, "track.cues.length includes second cue"); |
| |
| assert_equals(track.cues[0].id, 'one', 'cue 1 should be first'); |
| assert_equals(track.cues[1].id, 'two', 'cue 2 should be second'); |
| |
| video.addEventListener('canplay', event => { |
| |
| let seekCount = 0; |
| let step = _ => { |
| let cueContainer = mediaControlsElement(internals.shadowRoot(video).firstChild, "-webkit-media-text-track-container"); |
| switch (++seekCount) { |
| case 1: |
| assert_equals(track.activeCues.length, 1, "only one active cue"); |
| assert_equals(cueContainer.innerText, cue1Text, "cue one is visible"); |
| video.currentTime = track.cues[1].startTime; |
| break; |
| |
| case 2: |
| assert_equals(track.activeCues.length, 2, "two active cues"); |
| assert_equals(cueContainer.innerText, `${cue1Text}\n${cue2Text}`, "cues one and two are visible"); |
| video.currentTime = track.cues[1].endTime - .5; |
| break; |
| |
| case 3: |
| assert_equals(track.activeCues.length, 1, "only one active cue"); |
| assert_equals(cueContainer.innerText, cue2Text, "cue two is visible"); |
| video.currentTime = track.cues[1].endTime + 1; |
| break; |
| |
| case 4: |
| assert_equals(track.activeCues.length, 0, "no active cues"); |
| assert_equals(cueContainer.innerText, '', "no cues are visible"); |
| test.done(); |
| break; |
| } |
| } |
| video.addEventListener('seeked', test.step_func(step)); |
| video.currentTime = track.cues[0].startTime; |
| }); |
| |
| video.src = findMediaFile('video', '../../content/test'); |
| |
| }, 'Cues are displayed'); |
| |
| </script> |
