<html>
<head>
  <style>
    body {
      margin: 0;
    }
    
    #container {
      width: 400px;
      height: 400px;
      margin: 50px;
      border: 1px solid black;
      -webkit-perspective: 500px;
    }
    
    .box {
      position: absolute;
      width: 200px;
      height: 200px;
      background-color: gray;
      opacity: 0.75;
    }
    
    #left {
      -webkit-transform: rotateY(-75deg);
      left: 20px;
      top: 100px;
    }

    #top {
      -webkit-transform: rotateX(75deg);
      top: 20px;
      left: 100px;
    }

    #right {
      -webkit-transform: rotateY(75deg);
      left: 180px;
      top: 100px;
    }

    #bottom {
      -webkit-transform: rotateX(-75deg);
      top: 180px;
      left: 100px;
    }

    .box:hover {
      background-color: orange;
    }
  </style>
  <script src="resources/hit-test-utils.js"></script>
  <script>
      var hitTestData = [
        { 'point': [170, 250], 'target' : 'left' },
        { 'point': [260, 170], 'target' : 'top' },
        { 'point': [330, 250], 'target' : 'right' },
        { 'point': [260, 330], 'target' : 'bottom' },
        { 'point': [60, 60], 'target' : 'container' },
        { 'point': [160, 160], 'target' : 'container' },
        { 'point': [190, 190], 'target' : 'container' },
        { 'point': [310, 310], 'target' : 'container' },
      ];
      window.addEventListener('load', runTest, false);
  </script>
</head>
<body>

<div id="container">
  <div class="box" id="left"></div>
  <div class="box" id="top"></div>
  <div class="box" id="right"></div>
  <div class="box" id="bottom"></div>
</div>

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

</body>
</html>