blob: d073ea82315ddceb70003de699efaa8279be5f6d [file] [log] [blame]
<html>
<head>
<title>&lt;video&gt; 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 &lt;video&gt; 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 &lt;video&gt; 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 &lt;video&gt; element with and without a poster.</p>
<script>setup();</script>
</body>
</html>