<html>
<head>
  <style type="text/css" media="screen">
  
  div:hover {
    outline: 2px solid orange;
  }
    #container {
      width: 200px;
      height: 200px;
      border: 1px solid black;
      -webkit-perspective: 500px;
    }
    
    .box {
      width: 200px;
      height: 200px;
      position: absolute;
      background-color: gray;
    }
    
    .middle {
      -webkit-transform-origin: 10% 50%;
      -webkit-transform: rotateY(40deg);
    }
    
    .box:hover {
      background-color: orange !important;
    }
    
    .child {
      position: absolute;
      top: 100px;
      left: 100px;
      background-color: blue;
      -webkit-transform: translateZ(1px);
    }
    
    #results {
      margin-top: 100px;
    }
  </style>
  <script src="resources/hit-test-utils.js"></script>
  <script>
    var hitTestData = [
      { 'point': [30, 30], 'target' : 'box1' },
      { 'point': [80, 100], 'target' : 'box1' },
      { 'point': [100, 120], 'target' : 'box2' },
      { 'point': [200, 250], 'target' : 'box2' },
    ];
    window.addEventListener('load', runTest, false);
  </script>
</head>
<body>

<div id="container">
  <div class="middle box" id="box1">
    <div class="child box" id="box2"></div>
  </div>
</div>

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