<!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 type="text/javascript" charset="utf-8">
      if (window.layoutTestController)
        layoutTestController.waitUntilDone();

      function testOnLoad()
      {
        window.setTimeout(function() {
          document.getElementById('details').scrollTop = 100;
          if (window.layoutTestController)
            layoutTestController.notifyDone();
        }, 0);
      }
      
      window.addEventListener('load', function() {
        document.getElementById('video').src = "resources/video.mp4";
      }, false);
    </script>
  </head>
  <body>
      <p>The red box in the overflow:scroll div should be scrolled out of view.</p>
        <div id="container">
          <video id="video" width="300" height="200" onload="testOnLoad()"></video>
        </div>

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

  </body>
</html>