third_party/WebKit/LayoutTests/media/video-object-fit-expected.html

   1 <!DOCTYPE html>
   2 <html>
   3   <head>
   4     <title>object-fit, video</title>
   5     <style>
   6       .group > div {
   7         display: inline-block;
   8         overflow: hidden;
   9         width: 120px;
  10         height: 120px;
  11         border: 1px solid blue;
  12         background-color: gray;
  13         margin: 10px;
  14       }
  15
  16       .group > * > * { display: block; }
  17       .group > *:nth-child(1) > * { width:100%; height:100%; }
  18       .group > *:nth-child(2) > * { width:100%; margin-top:15px; }
  19       .group > *:nth-child(3) > * { height:100%; margin-left:-20px; }
  20       .group > *:nth-child(4) > * { margin-left:-100px; margin-top:-60px; }
  21       .group > *:nth-child(5) > * { width:100%; margin-top:15px; }
  22     </style>
  23     <script src=media-file.js></script>
  24     <script>
  25         if (window.testRunner)
  26           testRunner.waitUntilDone();
  27
  28         function init()
  29         {
  30             setSrcByTagName("video", findMediaFile("video", "content/test"));
  31
  32             var totalCount = document.getElementsByTagName('video').length;
  33             var count = totalCount;
  34             document.addEventListener("canplaythrough", function () {
  35                 if (!--count) {
  36                     if (window.testRunner)
  37                         setTimeout(function() { testRunner.notifyDone(); }, totalCount * 150);
  38                 }
  39             }, true);
  40         }
  41     </script>
  42
  43   </head>
  44   <body onload="init();">
  45     <div class="group">
  46       <!-- Note about the first video here: There's no way to unlock a video from its
  47            aspect ratio without using object-fit:fill, so we have to use it here as well
  48            as in the test file. In order to actually being able to detect failures, use a
  49            different background color. -->
  50       <div style="background:salmon;"><video style="object-fit:fill;"></video></div>
  51       <div><video></video></div>
  52       <div><video></video></div>
  53       <div><video></video></div>
  54       <div><video></video></div>
  55     </div>
  56   </body>
  57 </html>