<!DOCTYPE html>
<html>
  <head>
    <style>
      video {
        background-color: gray;
        width: 500px;
        height: 225px;
        border-radius: 200px 0px 100px 0px;
        box-shadow: 0 0 8px 8px red;
        margin: 10px;
        transform: translateZ(0);
      }
    </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>
        <li>has box shadow around the video element</li>
      </ul>
      <video src='../../media/resources/frame_size_change.webm' oncanplaythrough='canPlay();'></video>
   </body>
</html>