1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
|
<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>
|
