<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <script src=../media-file.js></script>
        <script src=../video-test.js></script>
        <script>            

            var numberOfTrackTests = 2;
            
            function trackLoaded()
            {
                numberOfTracksLoaded++;
                if (numberOfTracksLoaded == numberOfTrackTests) {
                    testTrack(0);
                    testTrackError(1);
                }
            }
            
            function testTrack(i)
            {
                findMediaElement();
                testExpected("video.textTracks[" + i + "].cues.length", "3");
                
                var fragment = document.createDocumentFragment();
                var cspan = document.createElement("span");
                cspan.className = "blue";
                cspan.title = "Speaker";
                cspan.appendChild(document.createTextNode("Bear is Coming!!!!!"));
                fragment.appendChild(cspan);
                fragment.appendChild(document.createTextNode("\nText span with a class and an annotation."));
 
                testExpected(fragment.isEqualNode(video.textTracks[i].cues[0].getCueAsHTML()), true);
                
                fragment = document.createDocumentFragment();
                cspan = document.createElement("span");
                cspan.title = "Doe Hunter";
                cspan.appendChild(document.createTextNode("I said Bear is coming!!!!"));
                fragment.appendChild(cspan);
                
                testExpected(fragment.isEqualNode(video.textTracks[i].cues[1].getCueAsHTML()), true);

                
                fragment = document.createDocumentFragment();
                fragment.appendChild(document.createTextNode("I said "));
                cspan = document.createElement("span");
                cspan.className = "blue";
                cspan.title = "Speaker";
                cspan.appendChild(document.createTextNode("Bear is coming now"));
                fragment.appendChild(cspan);
                fragment.appendChild(document.createTextNode("!!!!"));
   
                testExpected(fragment.isEqualNode(video.textTracks[i].cues[2].getCueAsHTML()), true);

                allTestsEnded();
            }

            function testTrackError(i)
            {
                findMediaElement();
                testExpected("video.textTracks[" + i + "].cues.length", "3");
                
                var fragment = document.createDocumentFragment();
                fragment.appendChild(document.createTextNode("Bear is Coming!!!!!"));
                fragment.appendChild(document.createTextNode("\nThis is two annotations for an empty tag."));


                testExpected(fragment.isEqualNode(video.textTracks[i].cues[0].getCueAsHTML()), true);
                
                fragment = document.createDocumentFragment();
                fragment.appendChild(document.createTextNode("I said Bear is coming!!!!"));
                fragment.appendChild(document.createTextNode("\nThis does not parse as a voice tag."));

                testExpected(fragment.isEqualNode(video.textTracks[i].cues[1].getCueAsHTML()), true);

                fragment = document.createDocumentFragment();
                fragment.appendChild(document.createTextNode("I said "));
                fragment.appendChild(document.createTextNode("Bear is coming now"));
                fragment.appendChild(document.createTextNode("!!!!\nThis does not parse as a voice tag."));

                testExpected(fragment.isEqualNode(video.textTracks[i].cues[2].getCueAsHTML()), true);

                allTestsEnded();
            }
        </script>
    </head>
    <body onload="enableAllTextTracks()">
        <p>Tests cues with voice markup &lt;v&gt;.</p>
        <video> 
            <track src="captions-webvtt/tc026-voice.vtt" onload="trackLoaded()">
            <track src="captions-webvtt/tc026-voice-bad.vtt" onload="trackLoaded()">
        </video>
    </body>
</html>