<html>
<head>
  <title>Hit testing on preserves-3d element</title>
  <style type="text/css" media="screen">
    .container {
      -webkit-perspective: 500px;
    }
    .set {
      position: absolute;
      top: 8px;
    }
    .box {
      height: 100px;
      width: 100px;
    }

    .should-be-visible { background-color: green !important; }
    .composited {
      transform: rotate3d(0, 0, 1, 45deg);
    }

    .intermediate {
      transform: rotate3d(0, 0, 1, -45deg);
      -webkit-transform-style: preserve-3d;
      background-color: red;
    }

    #results {
      position: absolute;
      top: 200;
    }
  </style>
  <script type="text/javascript" charset="utf-8">
    if (window.testRunner)
      testRunner.dumpAsText();

    function runTest()
    {
      var hit = document.elementFromPoint(100, 100);
      var results = document.getElementById('results');
      if (hit == document.getElementById('target'))
        results.innerHTML = 'Hit target without crashing: PASSED';
      else
        results.innerHTML = 'Did not crash but failed to find target: FAIL';
    }
  </script>
</head>
<body onload="runTest()">

<div class="set">
 <div class="container">
  <div class="intermediate">
   <div id="target" class="composited box should-be-visible"></div>
  </div>
 </div>
</div>

<div id="results"></div>
</body>
</html>