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

        <script src=../../media-controls.js></script>
        <script src=../../media-file.js></script>
        <script src=../../video-test.js></script>
        <script>
        var testTrack;
        var region;
        var container;
        var totalVisibleLines;

        var seekTimes = [0.2, 0.5, 1.0, 2.3, 3.0];
        var crtSeekTime = 0;

        function countVisibleLines(cueElement)
        {
            var cueRect = cueElement.getBoundingClientRect();
            var regionRect = region.getBoundingClientRect();

            var linesMatch = cueElement.textContent.match(/\n/g);
            var linesCount = 1 + (linesMatch == null ? 0 : linesMatch.length);
            var lineHeight = cueRect.height / linesCount;

            var visibleLines = 0;
            for (i = 0; i < linesCount; ++i) {
              var lineTop = cueRect.top + i * lineHeight;
              var lineBottom = cueRect.top + (i+1) * lineHeight;

              if (lineTop >= regionRect.top && lineBottom <= regionRect.bottom)
                visibleLines++;
            }

            return visibleLines;
        }

        function testRegionsDisplay()
        {
            testTrack = video.textTracks[0];

            consoleWrite("** The text track has only one region **");
            testExpected("testTrack.regions.length", 1);

            try {
              region = textTrackDisplayElement(video, 'region');
              container = textTrackDisplayElement(video, 'region-container');
            } catch(e) {
              consoleWrite(e);
            }

            consoleWrite("<br>** Inspecting cues displayed within region**");

            waitForEvent("seeked", inspectRegionTree);
            seekVideo();
        }

        function seekVideo()
        {
            consoleWrite("");
            run("video.currentTime = " + seekTimes[crtSeekTime++]);
        }

        function inspectRegionTree()
        {
            consoleWrite("Total cues in region: " + container.children.length);
            totalVisibleLines = 0;

            for (var i = 0; i < container.children.length; ++i) {
                var cue = container.children[i];
                var cueVisibleLines = countVisibleLines(cue);
                consoleWrite("Cue content is: " + cue.textContent);
                consoleWrite("Cue lines visible from this cue: " + cueVisibleLines);

                totalVisibleLines += cueVisibleLines;
            }

            testExpected("totalVisibleLines <= testTrack.regions[0].height", true);

            if (crtSeekTime == seekTimes.length)
                endTest();
            else
                seekVideo();
        }

        function startTest()
        {
            if (!window.VTTRegion) {
                failTest();
                return;
            }

            findMediaElement();

            video.src = findMediaFile('video', '../../content/test');
            waitForEvent('canplaythrough', testRegionsDisplay);
        }

        setCaptionDisplayMode('Automatic');
        </script>
    </head>
    <body>
        <p>Tests default rendering for TextTrackCues that belong to a VTTRegion.</p>
        <video controls>
            <track src="../captions-webvtt/captions-regions.vtt" kind="captions" default onload="startTest()">
        </video>
    </body>
</html>