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>