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> |