| Index: LayoutTests/media/track/regions-webvtt/text-track-region-display.html
|
| diff --git a/LayoutTests/media/track/regions-webvtt/text-track-region-display.html b/LayoutTests/media/track/regions-webvtt/text-track-region-display.html
|
| new file mode 100644
|
| index 0000000000000000000000000000000000000000..148fcee0aab67d81681ccb3216bfd94ad74bcbbb
|
| --- /dev/null
|
| +++ b/LayoutTests/media/track/regions-webvtt/text-track-region-display.html
|
| @@ -0,0 +1,108 @@
|
| +<!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.TextTrackRegion) {
|
| + failTest();
|
| + return;
|
| + }
|
| +
|
| + findMediaElement();
|
| +
|
| + video.src = findMediaFile('video', '../../content/test');
|
| + waitForEvent('canplaythrough', testRegionsDisplay);
|
| + }
|
| +
|
| + </script>
|
| + </head>
|
| + <body>
|
| + <p>Tests default rendering for TextTrackCues that belong to a TextTrackRegion.</p>
|
| + <video controls>
|
| + <track src="../captions-webvtt/captions-regions.vtt" kind="captions" default onload="startTest()">
|
| + </video>
|
| + </body>
|
| +</html>
|
|
|