<!DOCTYPE html>
<html>
  <head>
    <title>Self painting layers</title>

    <style type="text/css" media="screen">

    #container {
      width: 300px;
      margin: 10px;
      border: 1px solid black;
    }
    
    #details {
     width: 300px;
     height: 150px;
     margin: 10px;
     overflow: auto;
     border: 1px solid black;
    }

    #details > div {
      width: 100%;
      height: 500px;
      font-size: 24pt;
      line-height: 150%;
    }
    </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('details').scrollTop = 24;
      }

      function doTest()
      {
        var video = document.getElementsByTagName('video')[0];
        setupVideo(video, 'resources/video', modifyDocument, testDone);
      }
    </script>
  </head>
  <body onload="doTest()">
      <p>You should not see double text when the div scrolls</p>
        <div id="container">
          <video id="video" width="300" height="200"></video>
        </div>

        <div id="details">
            <div>
              Scrolled<br>text<br>here.
            </div>
        </div>

  </body>
</html>