<!DOCTYPE html>

<html>
<head>
    <style type="text/css" media="screen">
        
        body {
            margin: 0;
        }

        video {
            width: 100px;
            height: 100px;
        }
        
        .container {
            position: absolute;
            top: 50px;
            left: 50px;
            height: 200px;
            width: 200px;
        }
        
        #scroller {
            overflow-y: scroll;
            height: 200px;
            width: 200px;
            border: 1px solid black;
        }
        
        .content {
            height: 500px;
        }
        
        .box {
            height: 100px;
            width: 100px;
        }

        .tester {
            position: relative;
            margin-top: 50px;
            background-color: green;
        }
        
        .indicator {
            position: absolute;
            left: 50px;
            top: 50px;
            background-color: red;
        }
    </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()
      {
        document.getElementById('scroller').scrollTop = 50;
      }

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

  <div class="container">
    <div id="scroller">
        <div class="content">
            <div class="tester box"></div>
        </div>
    </div>
    <p>The green box should obscure the red box, and move when you drag the scrollbar.</p>
  </div>
  
  <video></video>

</body>
</html>