<!DOCTYPE html>
<html>
<head>
  <style type="text/css" media="screen">

    .movie {
        position: absolute;
        overflow: hidden;
        height: 200px;
        width: 110px;
        padding: 10px;
        background-color: white;
        border: 1px solid black;
    }

    video {
        background-color: black;
    }

    .box {
      width: 100px;
      height: 100px;
    }

    .test {
        position: relative;
        margin-top: -100px;
        background-color: green;
    }

    .indicator {
        background-color: red;
    }
  </style>
  <script type="text/javascript" charset="utf-8">
    if (window.testRunner)
      testRunner.waitUntilDone();
  </script>
</head>
<body>

    <p>You should see a green box under the video. If you see red, the test failed.</p>
    <div class="movie content">
        <video height="100" width="100"></video>
        <div class="indicator box"></div>
        <div class="test box"></div>
    </div>

    <script type="text/javascript" charset="utf-8">
      var video = document.getElementsByTagName('video')[0];
      video.requestVideoFrameCallback( _ => { testRunner.notifyDone(); });
      video.src = '../resources/video.' + (video.canPlayType('video/ogg') ? 'ogv' : 'mp4');
    </script>

</body>
</html>