<!DOCTYPE html>
<html>
  <head>
    <title>Layers inside overflow-scroll</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%;
    }
    
    .compositing {
      height: 100px;
      width: 100px;
      background-color: red;
      -webkit-transform: translateZ(0);
    }
    </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 = 100;
      }
      
      function doTest()
      {
          var video = document.getElementsByTagName('video')[0];
          setupVideo(video, 'resources/video', modifyDocument, testDone);
      }
    </script>
  </head>
  <body onload="doTest()">
      <p>The red box in the overflow:scroll div should be scrolled out of view.</p>
        <div id="container">
          <video width="300" height="200"></video>
        </div>

        <div id="details">
            <div>
              <div class="compositing"></div>
            </div>
        </div>

  </body>
</html>