<!DOCTYPE html>
<html>
<head>
<style>
video {
background-color: gray;
width: 500px;
height: 225px;
border-radius: 200px 0px 100px 0px;
will-change: transform;
}
</style>
<script>
if (window.testRunner) {
testRunner.waitUntilDone();
}
function canPlay() {
setTimeout(function() {
if (window.testRunner)
testRunner.notifyDone();
}, 0);
}
</script>
</head>
<body>
<h3>It passes if:</h3>
<ul>
<li>the video content has rounded corners (top left and bottom right)</li>
<li>the remaining space is gray and has same rounded corners as video content</li>
</ul>
<video preload='auto' src='../../media/resources/frame_size_change.webm' oncanplaythrough='canPlay();'></video>
</body>
</html>