third_party/WebKit/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                         description:", with only a 'width' attribute so size should have the same aspect ratio as &lt;video&gt; default",
  45                         url:"",
  46                         reflectedUrl:"video-poster.html",
  47                         width:600,
  48                         height:300,
  49                         widthAttr: 600
  50                     },
  51                     {
  52                         description:", with only a 'width' attribute so size should equal a scaled up image size with the same aspect ratio as the original image",
  53                         url:"content/abe.png",
  54                         width:152,
  55                         height:206,
  56                         widthAttr: 152
  57                     },
  58                     {
  59                         description:", invalid url w/ width attribute so size should have the same aspect ratio as &lt;video&gt; default",
  60                         url:"content/bogus.png",
  61                         width:600,
  62                         height:300,
  63                         widthAttr: 600
  64                     },
  65                 ]
  66             };
  67
  68             // Wait for |video| to have the |expectedWidth| and |expectedHeight|
  69             // and invoke |callback()|.
  70             function listenForWidthAndHeight(expectedWidth, expectedHeight, callback) {
  71               if (video.clientWidth == expectedWidth && video.clientHeight == expectedHeight) {
  72                 callback();
  73               } else {
  74                 // This uses a 20ms sleep loop to accomplish the wait, since the
  75                 // standard specifies no events that fire on poster load or error.
  76                 window.setTimeout(listenForWidthAndHeight, 20, expectedWidth, expectedHeight, callback);
  77               }
  78             }
  79
  80             function testPoster()
  81             {
  82                 var temp = document.body.offsetWidth;
  83                 var poster = posterInfo.posters[posterInfo.current];
  84
  85                 var size = poster.url ? (" " + poster.width + "x" + poster.height) : "";
  86                 var urlStr = typeof(poster.url) == "string" ? ("'" + poster.url + "'") : 'null';
  87                 var desc = "<b>Testing" + size + " poster <em>"+ urlStr + "</em>" + poster.description + ".</b>";
  88                 consoleWrite(desc);
  89
  90                 testExpected("video.getAttribute('poster')", poster.url);
  91                 testExpected("relativeURL(video.poster)", poster.hasOwnProperty("reflectedUrl") ? poster.reflectedUrl : poster.url);
  92                 testExpected("video.clientWidth", poster.width);
  93                 testExpected("video.clientHeight", poster.height);
  94
  95                 // Remove width/height attributes if present
  96                 if (video.width)
  97                     video.removeAttribute('width');
  98                 if (video.height)
  99                     video.removeAttribute('height');
 100
 101                 posterInfo.current++;
 102                 consoleWrite("");
 103                 if (posterInfo.current >= posterInfo.posters.length) {
 104                   endTest();
 105                   return;
 106                 }
 107                 var currentPoster = posterInfo.posters[posterInfo.current];
 108
 109                 if (currentPoster.widthAttr)
 110                     video.width = currentPoster.widthAttr;
 111
 112                 var url = currentPoster.url;
 113                 var desc = "<b>Setting poster to <em>\""+ url + "\"</em></b>";
 114                 consoleWrite(desc);
 115                 video.poster = url;
 116                 listenForWidthAndHeight(currentPoster.width, currentPoster.height, testPoster);
 117             }
 118
 119             function unexpectedEvent(evt)
 120             {
 121                 consoleWrite("");
 122                 failTest("Unexpected '" + evt.type + "' event fired!");
 123             }
 124
 125             function setup()
 126             {
 127                 document.addEventListener("error", unexpectedEvent);
 128                 document.addEventListener("load", unexpectedEvent);
 129                 findMediaElement();
 130                 testPoster();
 131             }
 132         </script>
 133     </head>
 134
 135     <body>
 136         <video controls width=320 height=240></video>
 137         <p>Test &lt;video&gt; element with and without a poster.</p>
 138         <script>setup();</script>
 139     </body>
 140 </html>