| <html> |
| <head> |
| <title><video> element size and resize test</title> |
| <script src=video-test.js></script> |
| <script src=media-file.js></script> |
| |
| <script> |
| var movieInfo = |
| { |
| current:0, |
| retryCount: 0, |
| movies: |
| [ |
| { |
| src:null, |
| poster:null, |
| description:"no 'src' and no 'poster', with 'width' and 'height' attributes", |
| width:640, |
| height:480, |
| videoWidth:0, |
| videoHeight:0 |
| }, |
| { |
| src:null, |
| poster:null, |
| description:"no 'src' and no 'poster', with NO 'width' and 'height' attributes, should be default size", |
| width:300, |
| height:150, |
| videoWidth:0, |
| videoHeight:0 |
| }, |
| { |
| src:null, |
| poster:"content/abe.png", |
| description:"'poster' but no 'src', should be image size", |
| width:76, |
| height:103, |
| videoWidth:0, |
| videoHeight:0 |
| }, |
| { |
| src:"content/test", |
| poster:"content/abe.png", |
| description:"'poster' and 'src', should be <video> size", |
| width:320, |
| height:240, |
| videoWidth:320, |
| videoHeight:240 |
| }, |
| { |
| src:"content/bogus", |
| poster:"content/greenbox.png", |
| description:"'poster' and invalid 'src', should be image size", |
| width:25, |
| height:25, |
| videoWidth:0, |
| videoHeight:0 |
| }, |
| ] |
| }; |
| |
| function setupNextConfiguration() |
| { |
| consoleWrite(""); |
| movieInfo.current++; |
| movieInfo.retryCount = 0; |
| if (movieInfo.current >= movieInfo.movies.length) |
| { |
| endTest(); |
| return; |
| } |
| |
| var movie = movieInfo.movies[movieInfo.current]; |
| if (movie.src || movie.poster) { |
| var desc = "<b>Setting "; |
| if (movie.src && relativeURL(video.src) != movie.src) { |
| video.src = findMediaFile("video", movie.src); |
| desc += "'src' to <em>\""+ movie.src + ".[extension]\"</em> "; |
| } |
| if (movie.poster && relativeURL(video.poster) != movie.poster) { |
| video.poster = movie.poster; |
| desc += "'poster' to <em>\""+ movie.poster + "\"</em>"; |
| } |
| consoleWrite(desc + "</b>"); |
| } |
| |
| // Remove width/height attributes if present |
| if (video.width || video.height) { |
| consoleWrite("<b>Removing 'width' and 'height' attributes.</b>"); |
| video.removeAttribute('width'); |
| video.removeAttribute('height'); |
| } |
| |
| if (!movie.src || movie.src.indexOf('bogus') >= 0) |
| setTimeout(testMovie, 100); |
| } |
| |
| function testMovie() |
| { |
| if (movieInfo.current >= movieInfo.movies.length) |
| return; |
| |
| var temp = document.body.offsetWidth; |
| var movie = movieInfo.movies[movieInfo.current]; |
| |
| // We can't detect when the poster has loaded and the 100ms timeout may |
| // not be long enough on a slow/loaded machine. |
| if (video.clientWidth != movie.width || video.clientHeight != movie.height |
| || video.videoWidth != movie.videoWidth || video.videoHeight != movie.videoHeight) { |
| if (++movieInfo.retryCount <= 2) { |
| setTimeout(testMovie, 100); |
| return; |
| } |
| } |
| |
| var desc = "<b>Testing movie with " + movie.description + ".</b>"; |
| consoleWrite(desc); |
| |
| testExpected("video.clientWidth", movie.width); |
| testExpected("video.clientHeight", movie.height); |
| testExpected("video.videoWidth", movie.videoWidth); |
| testExpected("video.videoHeight", movie.videoHeight); |
| |
| setupNextConfiguration(); |
| } |
| |
| function test() |
| { |
| findMediaElement(); |
| testMovie(); |
| } |
| </script> |
| </head> |
| |
| <body onload="setTimeout(test, 100)"> |
| |
| <video controls width=640 height=480 onloadedmetadata="testMovie()"></video> |
| <p>Test <video> element size with and without 'src' and 'poster' attributes.</p> |
| |
| </body> |
| </html> |
