| OLD | NEW | 
| (Empty) |  | 
 |    1 <!DOCTYPE html> | 
 |    2 <html> | 
 |    3     <head> | 
 |    4         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> | 
 |    5  | 
 |    6         <script src=../../media-controls.js></script> | 
 |    7         <script src=../../media-file.js></script> | 
 |    8         <script src=../../video-test.js></script> | 
 |    9         <script> | 
 |   10         var testTrack; | 
 |   11         var region; | 
 |   12         var container; | 
 |   13         var totalVisibleLines; | 
 |   14  | 
 |   15         var seekTimes = [0.2, 0.5, 1.0, 2.3, 3.0]; | 
 |   16         var crtSeekTime = 0; | 
 |   17  | 
 |   18         function countVisibleLines(cueElement) | 
 |   19         { | 
 |   20             var cueRect = cueElement.getBoundingClientRect(); | 
 |   21             var regionRect = region.getBoundingClientRect(); | 
 |   22  | 
 |   23             var linesMatch = cueElement.textContent.match(/\n/g); | 
 |   24             var linesCount = 1 + (linesMatch == null ? 0 : linesMatch.length); | 
 |   25             var lineHeight = cueRect.height / linesCount; | 
 |   26  | 
 |   27             var visibleLines = 0; | 
 |   28             for (i = 0; i < linesCount; ++i) { | 
 |   29               var lineTop = cueRect.top + i * lineHeight; | 
 |   30               var lineBottom = cueRect.top + (i+1) * lineHeight; | 
 |   31  | 
 |   32               if (lineTop >= regionRect.top && lineBottom <= regionRect.bottom) | 
 |   33                 visibleLines++; | 
 |   34             } | 
 |   35  | 
 |   36             return visibleLines; | 
 |   37         } | 
 |   38  | 
 |   39         function testRegionsDisplay() | 
 |   40         { | 
 |   41             testTrack = video.textTracks[0]; | 
 |   42  | 
 |   43             consoleWrite("** The text track has only one region **"); | 
 |   44             testExpected("testTrack.regions.length", 1); | 
 |   45  | 
 |   46             try { | 
 |   47               region = textTrackDisplayElement(video, 'region'); | 
 |   48               container = textTrackDisplayElement(video, 'region-container'); | 
 |   49             } catch(e) { | 
 |   50               consoleWrite(e); | 
 |   51             } | 
 |   52  | 
 |   53             consoleWrite("<br>** Inspecting cues displayed within region**"); | 
 |   54  | 
 |   55             waitForEvent("seeked", inspectRegionTree); | 
 |   56             seekVideo(); | 
 |   57         } | 
 |   58  | 
 |   59         function seekVideo() | 
 |   60         { | 
 |   61             consoleWrite(""); | 
 |   62             run("video.currentTime = " + seekTimes[crtSeekTime++]); | 
 |   63         } | 
 |   64  | 
 |   65         function inspectRegionTree() | 
 |   66         { | 
 |   67             consoleWrite("Total cues in region: " + container.children.length); | 
 |   68             totalVisibleLines = 0; | 
 |   69  | 
 |   70             for (var i = 0; i < container.children.length; ++i) { | 
 |   71                 var cue = container.children[i]; | 
 |   72                 var cueVisibleLines = countVisibleLines(cue); | 
 |   73                 consoleWrite("Cue content is: " + cue.textContent); | 
 |   74                 consoleWrite("Cue lines visible from this cue: " + cueVisibleLin
     es); | 
 |   75  | 
 |   76                 totalVisibleLines += cueVisibleLines; | 
 |   77             } | 
 |   78  | 
 |   79             testExpected("totalVisibleLines <= testTrack.regions[0].height", tru
     e); | 
 |   80  | 
 |   81             if (crtSeekTime == seekTimes.length) | 
 |   82                 endTest(); | 
 |   83             else | 
 |   84                 seekVideo(); | 
 |   85         } | 
 |   86  | 
 |   87         function startTest() | 
 |   88         { | 
 |   89             if (!window.TextTrackRegion) { | 
 |   90                 failTest(); | 
 |   91                 return; | 
 |   92             } | 
 |   93  | 
 |   94             findMediaElement(); | 
 |   95  | 
 |   96             video.src = findMediaFile('video', '../../content/test'); | 
 |   97             waitForEvent('canplaythrough', testRegionsDisplay); | 
 |   98         } | 
 |   99  | 
 |  100         </script> | 
 |  101     </head> | 
 |  102     <body> | 
 |  103         <p>Tests default rendering for TextTrackCues that belong to a TextTrackR
     egion.</p> | 
 |  104         <video controls> | 
 |  105             <track src="../captions-webvtt/captions-regions.vtt" kind="captions"
      default onload="startTest()"> | 
 |  106         </video> | 
 |  107     </body> | 
 |  108 </html> | 
| OLD | NEW |