<!DOCTYPE html>
<html>
<head>
<style>
  video {
/*    display: block;*/
    width: 120px;
    height: 200px;
    margin: 5px;
    padding: 20px;
    border: 20px solid rgba(0, 0, 128, 0.5);
    background-color: gray;
  }
  
  .big {
      height: 300px;
      width: 350px;
  }
  .smaller {
      height: 180px;
      width: 400px;
  }
</style>
<script src="../../media/media-file.js"></script>
<script>
    if (window.testRunner) {
        testRunner.waitUntilDone();
        testRunner.dumpAsText();
    }

    function init()
    {
        setSrcByTagName("video", findMediaFile("video", "../../media/content/test"));

        var totalCount = document.getElementsByTagName('video').length;
        var count = totalCount;
        document.addEventListener("canplaythrough", function () {
            if (!--count) {
                if (window.testRunner)
                    setTimeout(function() {
                        if (window.internals)
                            document.getElementById('results').innerText = window.internals.layerTreeAsText(document, internals.LAYER_TREE_INCLUDES_CONTENT_LAYERS);
                        testRunner.notifyDone();
                    }, totalCount * 150);
            }
        }, true);
    }
</script>

</head>
<body onload="init();">
    <video style="object-fit: fill"></video>
    <video style="object-fit: cover"></video>
    <video style="object-fit: contain"></video>
    <video class="big" style="object-fit: scale-down"></video>
    <video class="smaller" style="object-fit: scale-down"></video>
    <video style="object-fit: none"></video>
<pre id="results"></pre>
</body>
</html>