tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

track-cue-mutable-fragment.html (3466B)

      1 <!DOCTYPE html>
      2 <title>Cue fragment is mutable</title>
      3 <script src="/common/media.js"></script>
      4 <script src="/resources/testharness.js"></script>
      5 <script src="/resources/testharnessreport.js"></script>
      6 <style>
      7 p, div { display: none; }
      8 </style>
      9 <video>
     10    <track src="resources/captions-html.vtt" kind="captions" default>
     11    <script>
     12        async_test(function(t) {
     13            var video = document.querySelector("video");
     14            var testTrack = document.querySelector("track");
     15 
     16            video.oncanplaythrough = t.step_func(testMutability);
     17            testTrack.onload = t.step_func(testMutability);
     18 
     19            var fragment;
     20            var eventCount = 0;
     21            function testMutability() {
     22                eventCount++;
     23                if (eventCount != 2)
     24                    return;
     25 
     26                var testCue = testTrack.track.cues[0];
     27 
     28                // Test initial cue contents.
     29                assert_equals(testCue.text, "Lorem <b>ipsum</b> <u>dolor</u> <i.sit>sit</i> amet,");
     30 
     31                // Cue getCueAsHTML() should return a correct fragment.
     32                createExpectedFragment(document.createDocumentFragment());
     33                assert_true(fragment.isEqualNode(testCue.getCueAsHTML()));
     34 
     35                // Appending getCuesAsHTML() twice to the DOM should be succesful.
     36                document.getElementsByTagName("div")[0].appendChild(testCue.getCueAsHTML());
     37                document.getElementsByTagName("div")[1].appendChild(testCue.getCueAsHTML());
     38 
     39                createExpectedFragment(document.createElement("div"));
     40                assert_true(fragment.isEqualNode(document.getElementsByTagName("div")[0]));
     41                assert_true(fragment.isEqualNode(document.getElementsByTagName("div")[1]));
     42 
     43                // The fragment returned by getCuesAsHTML() should be independently mutable.
     44                document.getElementsByTagName("div")[0].firstChild.textContent = "Different text ";
     45                assert_false(fragment.isEqualNode(document.getElementsByTagName("div")[0]));
     46                assert_true(fragment.isEqualNode(document.getElementsByTagName("div")[1]));
     47 
     48                // Calling twice getCueAsHTML() should not return the same fragment.
     49                assert_not_equals(testCue.getCueAsHTML(), testCue.getCueAsHTML());
     50 
     51                t.done();
     52            }
     53 
     54            function createExpectedFragment(rootNode) {
     55                fragment = rootNode;
     56                fragment.appendChild(document.createTextNode("Lorem "));
     57 
     58                var bold = document.createElement("b");
     59                bold.appendChild(document.createTextNode("ipsum"));
     60                fragment.appendChild(bold);
     61 
     62                fragment.appendChild(document.createTextNode(" "));
     63 
     64                var underline = document.createElement("u");
     65                underline.appendChild(document.createTextNode("dolor"));
     66                fragment.appendChild(underline);
     67 
     68                fragment.appendChild(document.createTextNode(" "));
     69 
     70                var italics = document.createElement("i");
     71                italics.className = "sit";
     72                italics.appendChild(document.createTextNode("sit"));
     73                fragment.appendChild(italics);
     74 
     75                fragment.appendChild(document.createTextNode(" amet,"));
     76            }
     77 
     78            video.src = getVideoURI("/media/counting");
     79        });
     80    </script>
     81 </video>
     82 <p>Fragment 1</p>
     83 <div></div>
     84 <p>Fragment 2</p>
     85 <div></div>