[Modern Media Controls] Turn media/modern-media-controls/ios-inline-media-controls...
[WebKit-https.git] / LayoutTests / media / video-poster.html
1 <html>
2     <head>
3         <title>&lt;video&gt; element with poster size test</title>
4         <script src=video-test.js></script>
5         <script>
6             var posterInfo = 
7             {
8                 current:0,
9                 posters: 
10                 [ 
11                     {
12                         description:", with 'width' and 'height' attributes",
13                         url:null,
14                         reflectedUrl:"",
15                         width:320,
16                         height:240
17                     },
18                     {
19                         description:", size should equal image size",
20                         url:"content/greenbox.png",
21                         width:25,
22                         height:25
23                     },
24                     {
25                         description:", with NO 'width' or 'height' attributes so size should be &lt;video&gt; default",
26                         url:"",
27                         reflectedUrl:"video-poster.html",
28                         width:300,
29                         height:150
30                     },
31                     {
32                         description:", size should equal image size",
33                         url:"content/abe.png",
34                         width:76,
35                         height:103
36                     },
37                     {
38                         description:", invalid url so size should revert to &lt;video&gt; default",
39                         url:"content/bogus.png",
40                         width:300,
41                         height:150
42                     },
43                 ]
44             };
45
46             // Wait for |video| to have the |expectedWidth| and |expectedHeight|
47             // and invoke |callback()|.
48             function listenForWidthAndHeight(expectedWidth, expectedHeight, callback) {
49               if (video.clientWidth == expectedWidth && video.clientHeight == expectedHeight) {
50                 callback();
51               } else {
52                 // This uses a 20ms sleep loop to accomplish the wait, since the
53                 // standard specifies no events that fire on poster load or error.
54                 window.setTimeout(listenForWidthAndHeight, 20, expectedWidth, expectedHeight, callback);
55               }
56             }
57
58             function testPoster()
59             {
60                 var temp = document.body.offsetWidth;
61                 var poster = posterInfo.posters[posterInfo.current];
62
63                 var size = poster.url ? (" " + poster.width + "x" + poster.height) : "";
64                 var urlStr = typeof(poster.url) == "string" ? ("'" + poster.url + "'") : 'null';
65                 var desc = "<b>Testing" + size + " poster <em>"+ urlStr + "</em>" + poster.description + ".</b>";
66                 consoleWrite(desc);
67
68                 testExpected("video.getAttribute('poster')", poster.url);
69                 testExpected("relativeURL(video.poster)", poster.hasOwnProperty("reflectedUrl") ? poster.reflectedUrl : poster.url);
70                 testExpected("video.clientWidth", poster.width);
71                 testExpected("video.clientHeight", poster.height);
72
73                 // Remove width/height attributes if present
74                 if (video.width)
75                     video.removeAttribute('width');
76                 if (video.height)
77                     video.removeAttribute('height');
78
79                 posterInfo.current++;
80                 consoleWrite("");
81                 if (posterInfo.current >= posterInfo.posters.length) {
82                   endTest();
83                   return;
84                 }
85                 var currentPoster = posterInfo.posters[posterInfo.current];
86                 listenForWidthAndHeight(currentPoster.width, currentPoster.height, testPoster);
87                 var url = currentPoster.url;
88                 var desc = "<b>Setting poster to <em>\""+ url + "\"</em></b>";
89                 consoleWrite(desc);
90                 video.poster = url;
91             }
92
93             function unexpectedEvent(evt)
94             {
95                 consoleWrite("");
96                 failTest("Unexpected '" + evt.type + "' event fired!");
97             }
98
99             function setup()
100             {
101                 document.addEventListener("error", unexpectedEvent);
102                 document.addEventListener("load", unexpectedEvent);
103                 findMediaElement();
104                 testPoster();
105             }
106         </script>
107     </head>
108
109     <body>
110         <video controls width=320 height=240></video>
111         <p>Test &lt;video&gt; element with and without a poster.</p>
112         <script>setup();</script>
113     </body>
114 </html>