<!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/media-file.js"></script>
<script>
if (window.testRunner)
testRunner.waitUntilDone();
function init()
{
setSrcByTagName("video", findMediaFile("video", "content/test"));
var totalCount = document.getElementsByTagName('video').length;
var count = totalCount;
document.addEventListener("canplaythrough", function () {
if (!--count)
setTimeout(function() { changeStyle(); }, 250);
}, true);
function changeStyle()
video1.style.objectFit = 'contain';
video2.style.objectFit = 'cover';
video3.style.objectFit = 'fill';
video4.style.objectFit = 'scale-down';
setTimeout(function() { testRunner.notifyDone(); }, 250);
</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>
