blob: 33b32433e8942298195bf2e2bf4816fd01393700 [file] [log] [blame]
<!DOCTYPE html>
<title>Tests default rendering for TextTrackCues that belong to a VTTRegion.</title>
<script src="../../media-controls.js"></script>
<script src="../../media-file.js"></script>
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<video controls></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 = findMediaFile('video', '../../content/test');
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>