video-object-fit-change.html | Explore in Territory

<!DOCTYPE html>
<html>
  <head>
    <title>changing object-fit values on video elements</title>
    <style>
      video {
        width: 120px;
        height: 120px;
        border: 1px solid blue;
        background-color: gray;
        margin: 10px;
      }
    </style>
    <script src=media-file.js></script>
    <script>
        if (window.testRunner)
          testRunner.waitUntilDone();

        function init()
        {
            var videosPresented = allVideosPresentedPromise();
            setSrcByTagName("video", "content/test.ogv");

            videosPresented.then(changeStyle);
        }

        function changeStyle()
        {
            video1.style.objectFit = 'contain';
            video2.style.objectFit = 'cover';
            video3.style.objectFit = 'fill';
            video4.style.objectFit = 'scale-down';

            if (window.testRunner) {
                setTimeout(function() { testRunner.notifyDone(); }, 500);
            }
        }
    </script>

  </head>
  <body onload="init();">
    <video id="video1" style="object-fit:fill;"></video>
    <video id="video2" style="object-fit:contain;"></video>
    <video id="video3" style="object-fit:cover;"></video>
    <video id="video4" style="object-fit:none;"></video>
  </body>
</html>
chromium/third_party/blink/web_tests/media/video-object-fit-change.html
