<html>
<head>
  <title>Hit testing on backface</title>
  <style type="text/css" media="screen">
  
  div:hover {
    outline: 4px solid orange;
  }
    #container {
      width: 400px;
      height: 200px;
      background-color: #EEE;
      border: 1px solid black;
      -webkit-transform-style: preserve-3d;
      -webkit-transform: translateZ(1px) rotateY(180deg);
    }
    
    .box {
      position: relative;
      display: inline-block;
      width: 160px;
      height: 160px;
      background-color: gray;
      margin: 18px;
      font-size: 200%;
      text-align: center;
    }
    
  </style>
  <script type="text/javascript" charset="utf-8">
    function log(s)
    {
      var results = document.getElementById('results');
      results.innerHTML += s + '<br>';
    }

    function runTest()
    {
      var firstHit = document.elementFromPoint(120, 150);
      var secondHit = document.elementFromPoint(300, 150);
      
      var box1 = document.getElementById('box1');
      var box2 = document.getElementById('box1');
      var container = document.getElementById('container');

      if (firstHit == container)
        log('Found container on left: PASS');
      else
        log('Found ' + firstHit.id + ' on left: FAIL');

        if (secondHit == box1)
          log('Found box1 on right: PASS');
        else
          log('Found ' + secondHit.id + ' on right: FAIL');
    }
    
  </script>
</head>
<body onload="runTest()">

<p>There are two boxes inside a container that is rotated 180&deg; in Y. box2 has backface-visibility: hidden, so you can't see it.</p>
<div id="container">
  <div class="box" id="box1">box1</div>
  <div class="box" id="box2" style="-webkit-backface-visibility: hidden;">box2</div>
</div>

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

</body>
</html>