| <!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].lines", 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> |
