<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        overflow:hidden;
      }

      #outer-scrollable {
        position: absolute;
        top: 0px;
        left: 0px;
        right: 0px;
        bottom: 0px;
        overflow: scroll;
      }

      #tall {
        height: 1000px;
      }

      #inner-scrollable {
        position: relative;
        overflow: auto;
        width: 200px;
        height: 200px;
        z-index: 0;
      }

      #content {
        width: 300px;
        height: 300px;
        background-color: blue;
        margin: 0px;
        -webkit-transform:translateZ(0);
      }
    </style>
    <script>
      function doTest() {
        if (window.testRunner)
          testRunner.dumpAsText(true);

        // This test succeeds if the scrollbars on the inner-scrollable
        // are positioned properly.
        var scroller = document.getElementById("outer-scrollable");
        scroller.scrollTop = 100;
      }
      window.addEventListener("load", doTest, false);
    </script>
  </head>
  <body>
    <div id="outer-scrollable">
      <div id="tall">
        <div id="inner-scrollable">
          <div id="content"></div>
        </div>
      </div>
    </div>
  </body>
</html>