| <!DOCTYPE html> |
| <html> |
| <head> |
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> |
| |
| <script src=../../media-file.js></script> |
| <script src=../../video-test.js></script> |
| <script> |
| var region; |
| |
| function startTest() |
| { |
| if (!window.VTTRegion) { |
| failTest(); |
| return; |
| } |
| |
| findMediaElement(); |
| testExpected("video.textTracks[0].regions.length", 5); |
| |
| consoleWrite(""); |
| region = video.textTracks[0].regions[0]; |
| testExpected("region.id", "region_without_settings"); |
| |
| consoleWrite(""); |
| region = video.textTracks[0].regions[1]; |
| testExpected("region.id", "region_with_all_settings"); |
| testExpected("region.width", 32); |
| testExpected("region.height", 5); |
| testExpected("region.regionAnchorX", 41); |
| testExpected("region.regionAnchorY", 20); |
| testExpected("region.viewportAnchorX", 31); |
| testExpected("region.viewportAnchorY", 84); |
| testExpected("region.scroll", "up"); |
| |
| consoleWrite(""); |
| region = video.textTracks[0].regions[2]; |
| testExpected("region.id", "region_floating_point_anchor"); |
| testExpected("Math.round(region.regionAnchorX * 1000)", 41133); |
| testExpected("Math.round(region.regionAnchorY * 1000)", 20420); |
| testExpected("Math.round(region.viewportAnchorX * 1000)", 32330); |
| testExpected("Math.round(region.viewportAnchorY * 1000)", 32440); |
| |
| consoleWrite(""); |
| region = video.textTracks[0].regions[3]; |
| testExpected("region.id", "not_unique_id"); |
| testExpected("region.width", 67); |
| |
| consoleWrite(""); |
| region = video.textTracks[0].regions[4]; |
| testExpected("region.id", ""); |
| |
| consoleWrite(""); |
| endTest(); |
| } |
| |
| setCaptionDisplayMode('Automatic'); |
| </script> |
| </head> |
| <body> |
| <p>Tests proper parsing of various regions present in WebVTT header area.</p> |
| <video controls> |
| <track src="../captions-webvtt/header-regions.vtt" kind="captions" default onload="startTest()"> |
| </video> |
| |
| </body> |
| </html> |
