track-cue-mutable-fragment.html

Enable keyboard shortcuts

This test has a WPT meta file that expects 1 subtest issues.
This WPT test may be referenced by the following Test IDs:
- /html/semantics/embedded-content/media-elements/track/track-element/track-cue-mutable-fragment.html - WPT Dashboard Interop Dashboard

<!DOCTYPE html>

<title>Cue fragment is mutable</title>

<script src="/common/media.js"></script>

<script src="/resources/testharness.js"></script>

<script src="/resources/testharnessreport.js"></script>

<style>

p, div { display: none; }

</style>

<video>

    <track src="resources/captions-html.vtt" kind="captions" default>

    <script>

        async_test(function(t) {

            var video = document.querySelector("video");

            var testTrack = document.querySelector("track");

            video.oncanplaythrough = t.step_func(testMutability);

            testTrack.onload = t.step_func(testMutability);

            var fragment;

            var eventCount = 0;

            function testMutability() {

                eventCount++;

                if (eventCount != 2)

                    return;

                var testCue = testTrack.track.cues[0];

                // Test initial cue contents.

                assert_equals(testCue.text, "Lorem <b>ipsum</b> <u>dolor</u> <i.sit>sit</i> amet,");

                // Cue getCueAsHTML() should return a correct fragment.

                createExpectedFragment(document.createDocumentFragment());

                assert_true(fragment.isEqualNode(testCue.getCueAsHTML()));

                // Appending getCuesAsHTML() twice to the DOM should be succesful.

                document.getElementsByTagName("div")[0].appendChild(testCue.getCueAsHTML());

                document.getElementsByTagName("div")[1].appendChild(testCue.getCueAsHTML());

                createExpectedFragment(document.createElement("div"));

                assert_true(fragment.isEqualNode(document.getElementsByTagName("div")[0]));

                assert_true(fragment.isEqualNode(document.getElementsByTagName("div")[1]));

                // The fragment returned by getCuesAsHTML() should be independently mutable.

                document.getElementsByTagName("div")[0].firstChild.textContent = "Different text ";

                assert_false(fragment.isEqualNode(document.getElementsByTagName("div")[0]));

                assert_true(fragment.isEqualNode(document.getElementsByTagName("div")[1]));

                // Calling twice getCueAsHTML() should not return the same fragment.

                assert_not_equals(testCue.getCueAsHTML(), testCue.getCueAsHTML());

                t.done();

            function createExpectedFragment(rootNode) {

                fragment = rootNode;

                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,"));

            video.src = getVideoURI("/media/counting");

});

    </script>

</video>

<p>Fragment 1</p>

<div></div>

<p>Fragment 2</p>

<div></div>