| <!DOCTYPE html> |
| <html> |
| <head> |
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> |
| |
| <script src=../media-file.js></script> |
| <script src=../video-test.js></script> |
| <script src=../media-controls.js></script> |
| |
| <script> |
| |
| var testTrack; |
| var fragment; |
| |
| function testMutability() |
| { |
| consoleWrite("<br>** Test initial cue info"); |
| |
| testExpected("testTrack.track.activeCues.length", 0); |
| testExpected("textTrackDisplayElement(video, 'display').innerText", ""); |
| |
| testExpected("testTrack.track.cues[0].startTime", 1.0); |
| testExpected("testTrack.track.cues[1].startTime", 3.0); |
| |
| testExpected("testTrack.track.cues[0].text", "Lorem ipsum dolor sit amet,"); |
| fragment = document.createDocumentFragment(); |
| fragment.appendChild(document.createTextNode("Lorem ipsum dolor sit amet,")); |
| testExpected("fragment.isEqualNode(testTrack.track.cues[0].getCueAsHTML())", true); |
| |
| consoleWrite("<br>** Change the start time of cue #1, it should become visible."); |
| run("testTrack.track.cues[0].startTime = 0"); |
| testExpected("testTrack.track.cues[0].startTime", 0); |
| testExpected("textTrackDisplayElement(video, 'display').innerText", "Lorem ipsum dolor sit amet,"); |
| |
| consoleWrite("<br>** Change the cue text, getCueAsHTML() should return a new, correct fragment."); |
| run("testTrack.track.cues[0].text = 'Lorem <b>ipsum</b> <u>dolor</u> <i.sit>sit</i> amet,'"); |
| testExpected("testTrack.track.cues[0].text", "Lorem <b>ipsum</b> <u>dolor</u> <i.sit>sit</i> amet,"); |
| |
| fragment = document.createDocumentFragment(); |
| fragment.appendChild(document.createTextNode("Lorem ")); |
| |
| var bold = document.createElement("b"); |
| bold.appendChild(document.createTextNode("ipsum")); |
| fragment.appendChild(bold); |
| |
| fragment.appendChild(document.createTextNode(" ")); |
| |
| var underline = document.createElement("u"); |
| underline.appendChild(document.createTextNode("dolor")); |
| fragment.appendChild(underline); |
| |
| fragment.appendChild(document.createTextNode(" ")); |
| |
| var italics = document.createElement("i"); |
| italics.className = "sit"; |
| italics.appendChild(document.createTextNode("sit")); |
| fragment.appendChild(italics); |
| |
| fragment.appendChild(document.createTextNode(" amet,")); |
| |
| testExpected("fragment.isEqualNode(testTrack.track.cues[0].getCueAsHTML())", true); |
| |
| consoleWrite(""); |
| endTest(); |
| } |
| |
| function loaded() |
| { |
| findMediaElement(); |
| testTrack = document.querySelector('track'); |
| |
| waitForEventsAndCall([[video, 'canplaythrough'], [testTrack, 'load']], testMutability); |
| |
| video.src = findMediaFile('video', '../content/counting'); |
| } |
| |
| setCaptionDisplayMode('Automatic'); |
| </script> |
| </head> |
| <body onload="loaded()"> |
| <video controls > |
| <track src="captions-webvtt/captions-gaps.vtt" kind="captions" default > |
| </video> |
| <p>Test that cue text is mutable.</p> |
| </body> |
| </html> |
