<!DOCTYPE html>
<head>
  <style type="text/css">
  #main {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 200px;
    height: 100px;
    z-index: -100;
    background-color: #eee;
  }
  #main:hover {
    background-color: orange;
  }
  
  #results {
    margin-top: 150px;
  }
  </style>
  <script type="text/javascript" charset="utf-8">
    if (window.testRunner)
      testRunner.dumpAsText();

    function runTest()
    {
      var hitElement = document.elementFromPoint(50, 50);
      var results = document.getElementById('results');
      var main = document.getElementById('main');
      if (hitElement == main)
        results.innerHTML = 'Hit testing found div "main": PASS';
      else
        results.innerHTML = 'Hit testing did not find div "main": FAIL';
    }
  </script>
</head>
<body onload="runTest()">
    <div id="main">
      Div with z-index: -100
    </div>
    <div id="results">
    </div>
</body>
</html>