<!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>