| <!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; |
| |
| 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 the default DOM layout used for regions display **"); |
| |
| consoleWrite("<br>** Only one region should be displayed **"); |
| testExpected("region.children.length", 1); |
| |
| consoleWrite("<br>** The child of the region should be the container **"); |
| testExpected("region.children[0] == container", true); |
| |
| consoleWrite("<br>** Default pseudo IDs should be set properly"); |
| testExpected("region.getAttribute('pseudo')", "-webkit-media-text-track-region"); |
| testExpected("container.getAttribute('pseudo')", "-webkit-media-text-track-region-container"); |
| |
| endTest(); |
| } |
| |
| 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 DOM layout structure for a VTTRegion.</p> |
| <video controls> |
| <track src="../captions-webvtt/captions-regions.vtt" kind="captions" default onload="startTest()"> |
| </video> |
| </body> |
| </html> |