LayoutTests/media/video-poster-scale.html

   1 <!DOCTYPE HTML5>
   2
   3 <html>
   4     <head>
   5         <title>'poster' aspect ratio test</title>
   6         <script src=video-test.js></script>
   7         <style>
   8             video {
   9                 border: 3px solid red;
  10                 background-color: #ee00ee;
  11             }
  12             #wide { width: 320px; height: 150px; }
  13             #tall { width: 150px; height: 320px; }
  14             #big { width: 320px; height: 240px; }
  15             #skinny { width: 50px; height: 320px; }
  16             #short { width: 320px; height: 50px; }
  17             #just_right { width: 76px; height: 103px; }
  18         </style>
  19         <script>
  20             var videos;
  21             function start()
  22             {
  23                 videos = document.getElementsByTagName('video');
  24                 for (var ndx = 0; ndx < videos.length; ndx++ ) {
  25                     testExpected("videos[" + ndx + "].getAttribute('poster')", "content/abe.png");
  26                     testExpected("relativeURL(videos[" + ndx + "].poster)", "content/abe.png");
  27                 }
  28
  29                 endTest();
  30             }
  31         </script>
  32     </head>
  33
  34
  35     <body onload="start()">
  36         <video poster="content/abe.png" id=wide></video>
  37         <br>
  38         <video poster="content/abe.png" id=just_right></video>
  39         <video poster="content/abe.png" id=no-style></video>
  40         <br>
  41         <video poster="content/abe.png" id=skinny></video>
  42         <video poster="content/abe.png" id=big></video>
  43         <video poster="content/abe.png" id=short></video>
  44         <br>
  45     </body>
  46 </html>