<html>
<head>
  <title>Hit testing on preserves-3d element</title>
  <style type="text/css" media="screen">
      .container
      {
        position: absolute;
        height: 200px;
        width:200px;
        top: 0;
        left: 0;
        background-color: gray;
      }

      #target
      {
        position: relative;
        height: 160px;
        width: 160px;
        margin: 20px;
        background-color: #DDD;
        -webkit-transform-style: preserve-3d;
      }
      
      #results {
        margin-top: 210px;
      }
  </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="container">
    <div id="target">
    </div>
  </div>
  <div id="results"></div>

</body>
</html>