vtt-region-display.html | Explore in Territory

<!DOCTYPE html>
<title>Tests default rendering for TextTrackCues that belong to a VTTRegion.</title>
<script src="../../media-controls.js"></script>
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<video controls autoplay></video>
<script>
var region;
var seekTimes = [0.2, 0.5, 1.0, 2.3, 3.0];
var seekTimeIndex = 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;
}

async_test(function() {
    var video = document.querySelector('video');
    video.src = '../../content/test.ogv';
    var testTrack = document.createElement('track');
    testTrack.onload = this.step_func(function() {
        video.oncanplaythrough = this.step_func(function() {
            track = video.textTracks[0];

            region = textTrackRegionElement(video);
            var container = textTrackRegionContainerElement(video);

            video.onseeked = this.step_func(function() {
                var totalVisibleLines = 0;

                for (var i = 0; i < container.children.length; ++i) {
                    var cue = container.children[i];
                    totalVisibleLines += countVisibleLines(cue);
                }

                assert_less_than_equal(totalVisibleLines, 2);

                if (seekTimeIndex == seekTimes.length)
                    this.done();
                else
                    video.currentTime = seekTimes[seekTimeIndex++];
            });
            video.currentTime = seekTimes[seekTimeIndex++];
        });
    });
    testTrack.src = '../captions-webvtt/captions-regions.vtt';
    testTrack.kind = 'captions';
    testTrack.default = true;
    video.appendChild(testTrack);
});
</script>
chromium/third_party/blink/web_tests/media/track/regions-webvtt/vtt-region-display.html
