<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
          overflow: hidden;
      }

      #perspective {
          -webkit-perspective: 1000px;
          position: absolute;
          width: 600px;
          left: -600px;
      }

      #transformed {
          transform: rotateY(90deg);
          -webkit-transform-origin: right;
          background: green;
          height: 800px;
      }

      #absolute {
          /* This could be relative too, it just needs to be out of flow. */
          position: absolute;
      }

      #container {
          position: relative;
          overflow: hidden;
          width: 800px;
          height: 600px;
      }
    </style>
    <script>
      if (window.testRunner)
        testRunner.dumpAsTextWithPixelResults();


      function doTest() {
        var transformed = document.getElementById("transformed");

        if (window.internals)
          window.internals.forceCompositingUpdate(document);

        // Request a recomposite of the layer.
        transformed.style.opacity = 0.9;
        document.body.offsetTop;
        transformed.style.opacity = 1.0;

        if (window.internals)
          window.internals.forceCompositingUpdate(document);
      }

      window.onload = doTest;
    </script>
  </style>
  </head>
  <body>
    <!-- The green rectangle should be visible. -->
    <div id="container">
        <div id="perspective">
            <div id="transformed"></div>
            <div id="absolute"></div>
        </div>
    </div>
  </body>
</html>