track-cue-mutable-text.html | Explore in Territory

<!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>
chromium/third_party/blink/web_tests/media/track/track-cue-mutable-text.html
