<html>
<head>
  <title>Hit Test: Table with Cell Levels </title>
  <style>
    table.testtable {border: 0px; border-collapse: collapse;}
    table.testtable td { font-size: 20px; border: none; background-color: red; border-spacing:0px; width:30px; height:30px;}
    body { margin: 0px 0px 0px 0px; }
  </style>

<script language="JavaScript" type="text/javascript">
    var cellHeight = 30;
    var cellWidth = 30;
    var logMsg = "";
    var failed = false;
    var hitArray = [[false, false, false],
                    [false, false, false],
                    [false, false, false]];


    if (window.testRunner) {
        window.testRunner.dumpAsText();
        window.testRunner.waitUntilDone();
    }

    function clearHitArray() {
      for (var i = 0; i < hitArray.length; ++i) {
          for (var j = 0; j < hitArray[i].length; ++j) {
             hitArray[i][j] = false;
          } 
      }
    }

    function cellHit_r1c1(cell) {
      hitArray[0][0] = true;
    }

    function cellHit_r1c2(cell) {
      hitArray[0][1] = true;
    }

    function cellHit_r1c3(cell) {
      hitArray[0][2] = true;
    }
    
    function cellHit_r2c1(cell) {
      hitArray[1][0] = true;
    }

    function cellHit_r2c2(cell) {
      hitArray[1][1] = true;
      // The second grid slot that this cell occupies is obscured by another cell.
      //hitArray[2][1] = true;
    }

    function cellHit_r2c3(cell) {
      hitArray[1][2] = true;
    }

    function cellHit_r3c1(cell) {
      hitArray[2][0] = true;
      hitArray[2][1] = true;
    }

    function cellHit_r3c3(cell) {
      hitArray[2][2] = true;
    }

    function doTest() {
      var ypos = cellHeight / 2;
      for (var row = 0; row < 3; row++) {
        var xpos = cellWidth / 2;
        for (var col = 0; col < 3; col++) {
          logMsg += "Hit cell at row: " + row + ", column: " + col + ": ";
          var elem = document.elementFromPoint(xpos, ypos);
          if (elem) elem.onmousemove();
          if (!hitArray[row][col]) failed = true;
          logMsg += (hitArray[row][col] ? "SUCCESS" : "FAIL") + "<br />";
          clearHitArray();
          xpos += cellWidth;
        }
        ypos += cellHeight;
      }
      document.body.innerHTML =(failed ? "FAIL!!!<br/>" : "SUCCESS!!!<br/>") +logMsg;
      if (window.testRunner) {
          window.testRunner.notifyDone();
      }
    }
</script>
</head>
<body onload="doTest()">
  <table class="testtable"> 
    <tr>
      <td onmousemove="cellHit_r1c1(this)"></td>
      <td onmousemove="cellHit_r1c2(this)"></td>
      <td onmousemove="cellHit_r1c3(this)"></td>
    </tr>
    <tr>
    <td onmousemove="cellHit_r2c1(this)"></td>
    <td onmousemove="cellHit_r2c2(this)" rowspan="2"></td>
    <td onmousemove="cellHit_r2c3(this)"></td>
    </tr>
    <tr>
      <td onmousemove="cellHit_r3c1(this)" colspan="2"></td> 
      <td onmousemove="cellHit_r3c3(this)"></td> 
    </tr>
  </table>
</body>
</html>