115 lines
4.5 KiB
HTML
115 lines
4.5 KiB
HTML
<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>
|