| <!DOCTYPE html> |
| <title>Test that cue text is mutable.</title> |
| <script src="../media-controls.js"></script> |
| <script src="../../resources/testharness.js"></script> |
| <script src="../../resources/testharnessreport.js"></script> |
| <video autoplay> |
| <track src="captions-webvtt/captions-gaps.vtt" kind="captions" default > |
| </video> |
| <script> |
| async_test(function(t) { |
| var video = document.querySelector("video"); |
| var testTrack = document.querySelector("track"); |
| |
| video.onplaying = t.step_func(testMutability); |
| testTrack.onload = t.step_func(testMutability); |
| |
| var eventCount = 0; |
| function testMutability() { |
| eventCount++; |
| if (eventCount != 2) |
| return; |
| |
| // Test initial cue info. |
| assert_equals(testTrack.track.activeCues.length, 0); |
| |
| assert_equals(testTrack.track.cues[0].startTime, 1.0); |
| assert_equals(testTrack.track.cues[1].startTime, 3.0); |
| |
| assert_equals(testTrack.track.cues[0].text, "Lorem ipsum dolor sit amet,"); |
| var fragment = document.createDocumentFragment(); |
| fragment.appendChild(document.createTextNode("Lorem ipsum dolor sit amet,")); |
| assert_true(fragment.isEqualNode(testTrack.track.cues[0].getCueAsHTML())); |
| |
| // Change the start time of cue #1, it should become visible. |
| testTrack.track.cues[0].startTime = 0; |
| assert_equals(testTrack.track.cues[0].startTime, 0); |
| assert_equals(textTrackDisplayElement(video).innerText, "Lorem ipsum dolor sit amet,"); |
| |
| // Change the cue text, getCueAsHTML() should return a new, correct fragment. |
| testTrack.track.cues[0].text = "Lorem <b>ipsum</b> <u>dolor</u> <i.sit>sit</i> amet,"; |
| assert_equals(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,")); |
| |
| assert_true(fragment.isEqualNode(testTrack.track.cues[0].getCueAsHTML())); |
| |
| t.done(); |
| } |
| |
| video.src = "../content/counting.ogv"; |
| }); |
| </script> |
