| <html> |
| <head> |
| <title><video> element with poster size test</title> |
| <script src=video-test.js></script> |
| <script> |
| var posterInfo = |
| { |
| current:0, |
| posters: |
| [ |
| { |
| description:", with 'width' and 'height' attributes", |
| url:null, |
| reflectedUrl:"", |
| width:320, |
| height:240 |
| }, |
| { |
| description:", size should equal image size", |
| url:"content/greenbox.png", |
| width:25, |
| height:25 |
| }, |
| { |
| description:", with NO 'width' or 'height' attributes so size should be <video> default", |
| url:"", |
| reflectedUrl:"video-poster.html", |
| width:300, |
| height:150 |
| }, |
| { |
| description:", size should equal image size", |
| url:"content/abe.png", |
| width:76, |
| height:103 |
| }, |
| { |
| description:", invalid url so size should revert to <video> default", |
| url:"content/bogus.png", |
| width:300, |
| height:150 |
| }, |
| ] |
| }; |
| |
| // Wait for |video| to have the |expectedWidth| and |expectedHeight| |
| // and invoke |callback()|. |
| function listenForWidthAndHeight(expectedWidth, expectedHeight, callback) { |
| if (video.clientWidth == expectedWidth && video.clientHeight == expectedHeight) { |
| callback(); |
| } else { |
| // This uses a 20ms sleep loop to accomplish the wait, since the |
| // standard specifies no events that fire on poster load or error. |
| window.setTimeout(listenForWidthAndHeight, 20, expectedWidth, expectedHeight, callback); |
| } |
| } |
| |
| function testPoster() |
| { |
| var temp = document.body.offsetWidth; |
| var poster = posterInfo.posters[posterInfo.current]; |
| |
| var size = poster.url ? (" " + poster.width + "x" + poster.height) : ""; |
| var urlStr = typeof(poster.url) == "string" ? ("'" + poster.url + "'") : 'null'; |
| var desc = "<b>Testing" + size + " poster <em>"+ urlStr + "</em>" + poster.description + ".</b>"; |
| consoleWrite(desc); |
| |
| testExpected("video.getAttribute('poster')", poster.url); |
| testExpected("relativeURL(video.poster)", poster.hasOwnProperty("reflectedUrl") ? poster.reflectedUrl : poster.url); |
| testExpected("video.clientWidth", poster.width); |
| testExpected("video.clientHeight", poster.height); |
| |
| // Remove width/height attributes if present |
| if (video.width) |
| video.removeAttribute('width'); |
| if (video.height) |
| video.removeAttribute('height'); |
| |
| posterInfo.current++; |
| consoleWrite(""); |
| if (posterInfo.current >= posterInfo.posters.length) { |
| endTest(); |
| return; |
| } |
| var currentPoster = posterInfo.posters[posterInfo.current]; |
| listenForWidthAndHeight(currentPoster.width, currentPoster.height, testPoster); |
| var url = currentPoster.url; |
| var desc = "<b>Setting poster to <em>\""+ url + "\"</em></b>"; |
| consoleWrite(desc); |
| video.poster = url; |
| } |
| |
| function unexpectedEvent(evt) |
| { |
| consoleWrite(""); |
| failTest("Unexpected '" + evt.type + "' event fired!"); |
| } |
| |
| function setup() |
| { |
| document.addEventListener("error", unexpectedEvent); |
| document.addEventListener("load", unexpectedEvent); |
| findMediaElement(); |
| testPoster(); |
| } |
| </script> |
| </head> |
| |
| <body> |
| <video controls width=320 height=240></video> |
| <p>Test <video> element with and without a poster.</p> |
| <script>setup();</script> |
| </body> |
| </html> |
