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

   1 <!DOCTYPE html>
   2 <html>
   3   <head>
   4     <title>changing object-fit values on video elements</title>
   5     <style>
   6       video {
   7         width: 120px;
   8         height: 120px;
   9         border: 1px solid blue;
  10         background-color: gray;
  11         margin: 10px;
  12       }
  13     </style>
  14     <script src=media-file.js></script>
  15     <script>
  16         if (window.testRunner)
  17           testRunner.waitUntilDone();
  18
  19         function init()
  20         {
  21             setSrcByTagName("video", findMediaFile("video", "content/test"));
  22
  23             var totalCount = document.getElementsByTagName('video').length;
  24             var count = totalCount;
  25             document.addEventListener("canplaythrough", function () {
  26                 if (!--count)
  27                     setTimeout(function() { changeStyle(); }, 500);
  28             }, true);
  29         }
  30
  31         function changeStyle()
  32         {
  33             video1.style.objectFit = 'contain';
  34             video2.style.objectFit = 'cover';
  35             video3.style.objectFit = 'fill';
  36             video4.style.objectFit = 'scale-down';
  37
  38             if (window.testRunner) {
  39                 setTimeout(function() { testRunner.notifyDone(); }, 500);
  40             }
  41         }
  42     </script>
  43
  44   </head>
  45   <body onload="init();">
  46     <video id="video1" style="object-fit:fill;"></video>
  47     <video id="video2" style="object-fit:contain;"></video>
  48     <video id="video3" style="object-fit:cover;"></video>
  49     <video id="video4" style="object-fit:none;"></video>
  50   </body>
  51 </html>