<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Video overlay</title>
  <style type="text/css" media="screen">
    body {
      height: 1000px;
    }
    
    video {
      margin-top: 80px;
      width: 400px;
      height: 300px;
    }
    
    #fixed-bar {
      position: fixed;
      left: 0;
      top: 0;
      width: 500px;
      height: 60px;
      background-color: rgba(0, 0, 255, 0.8);
    }
  </style>
  <script src="../resources/media-testing.js"></script>
  <script src="../../media/media-file.js"></script>
  <script type="text/javascript" charset="utf-8">
    function testDone()
    {
      if (window.testRunner)
        testRunner.notifyDone();
    }

    function modifyDocument()
    {
      window.scrollBy(50, 50);
    }

    function doTest()
    {
      var video = document.getElementsByTagName('video')[0];
      setupVideo(video, '../resources/video', modifyDocument, testDone);
    }
  </script>
</head>
<body onload="doTest()">
    <video></video>

    <p>The blue bar should be in front of the video, and at the top of the page.</p>
    <div id="fixed-bar"></div>
</body>
</html>