<html>
<head>
  <style type="text/css">
    #container {
      margin: 80px 0px;
      height: 300px;
      width: 300px;
      -webkit-perspective: 500;
    }

    #parent {
      width: 280px;
      height: 280px;
      background-color: green;
      opacity: 0.9999;
      -webkit-transform-style: flat;
      -webkit-transform: rotateY(80deg);
    }

    #child {
      background-color: green;
      -webkit-transform: translateZ(0);
    }

    #bad {
      position: absolute;
      top: 120px;
      left: 115px;
      width: 20px;
      height: 200px;
      background-color: red;
    }
  </style>
  <script>
    if (window.testRunner)
      testRunner.dumpAsText(true);
  </script>
</head>
<body>
  <!-- This div should be covered up -->
  <div id="bad"></div>

  <div id="container">
    <div id="parent">
      <div id="child"></div>
    </div>
  </div>
</body>
</html>