<html>
<head>
  <style type="text/css">
    body {
      margin: 0;
    }
    #container {
      width: 200px;
      height: 200px;
      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-origin: 10% 50%;
      -webkit-transform: rotateY(90deg);
    }

    #top {
      -webkit-transform-origin: 50% 10%;
      -webkit-transform: rotateX(-90deg);
    }

    #right {
      -webkit-transform-origin: 90% 50%;
      -webkit-transform: rotateY(-90deg);
    }

    #bottom {
      -webkit-transform-origin: 50% 90%;
      -webkit-transform: rotateX(90deg);
    }

    .box:hover {
      background-color: orange;
    }
  </style>
  <script src="resources/hit-test-utils.js"></script>
  <script>
      var hitTestData = [
        { 'point': [85, 100], 'target' : 'left' },
        { 'point': [155, 80], 'target' : 'top' },
        { 'point': [230, 80], 'target' : 'right' },
        { 'point': [155, 220], 'target' : 'bottom' },
        { 'point': [60, 60], 'target' : 'container' },
        { 'point': [100, 100], 'target' : 'container' },
        { 'point': [240, 240], 'target' : 'container' },
        { 'point': [200, 200], '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>