chromium/third_party/blink/web_tests/tables/hittesting/filltable-outline.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title>Fill Table Hit Test</title>
  <style>
    table.testtable { border-width: 0 0 0 0; border-collapse: collapse;}
    table.testtable td {  font-size: 20px; 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 hitArray = new Array();
    var logMsg = "";
    var failed = false;

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

    for (var row = 0; row < 10; ++row) {
        hitArray[row] = new Array();
        for (var col = 0; col < 10; ++col) {
            hitArray[row][col] = false;
        } 
    }

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

    function doTest() {
        // This test confirms that hits pass through large cell outlines.
        var ypos = cellHeight /2 ;
        for (var row = 0; row < 10; row++) {
          var xpos = cellWidth / 2; 
          for (var col = 0; col < 10; 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;
        }
        // Hide the outlines now.
        var outline1 = document.getElementById("outline1");
        outline1.style.outline = "none";
        var outline2 = document.getElementById("outline2");
        outline2.style.outline = "none";
        document.body.innerHTML =(failed ? "FAIL!!!<br/>" : "SUCCESS!!!<br/>") +logMsg;
        if (window.testRunner) {
            testRunner.notifyDone();
        }
    }

    function cellHit(cell) {
        hitArray[cell.parentNode.rowIndex][cell.cellIndex] = true;
    }

    function setup() {
        setTimeout('doTest()', 10);
    }
  </script>
</head>

<body onload="setup()" >
  <table class="testtable" cellpadding="0" cellspacing="0">
      <tr>
          <td onmousemove="cellHit(this)"></td>
          <td onmousemove="cellHit(this)"></td>
          <td onmousemove="cellHit(this)"></td>
          <td onmousemove="cellHit(this)"></td>
          <td onmousemove="cellHit(this)"></td>
          <td onmousemove="cellHit(this)"></td>
          <td onmousemove="cellHit(this)"></td>
          <td onmousemove="cellHit(this)"></td>
          <td onmousemove="cellHit(this)"></td>
          <td onmousemove="cellHit(this)"></td>
      </tr>
      <tr>
          <td onmousemove="cellHit(this)"></td>
          <td onmousemove="cellHit(this)"></td>
          <td onmousemove="cellHit(this)"></td>
          <td onmousemove="cellHit(this)"></td>
          <td onmousemove="cellHit(this)"></td>
          <td onmousemove="cellHit(this)"></td>
          <td onmousemove="cellHit(this)"></td>
          <td onmousemove="cellHit(this)"></td>
          <td onmousemove="cellHit(this)"></td>
          <td onmousemove="cellHit(this)"></td>
      </tr>
      <tr>
          <td onmousemove="cellHit(this)"></td>
          <td onmousemove="cellHit(this)"></td>
          <td onmousemove="cellHit(this)"></td>
          <td onmousemove="cellHit(this)"></td>
          <td onmousemove="cellHit(this)" id="outline1" style="outline: 50px solid red;"></td>
          <td onmousemove="cellHit(this)"></td>
          <td onmousemove="cellHit(this)"></td>
          <td onmousemove="cellHit(this)"></td>
          <td onmousemove="cellHit(this)"></td>
          <td onmousemove="cellHit(this)"></td>
      </tr>
      <tr>
          <td onmousemove="cellHit(this)"></td>
          <td onmousemove="cellHit(this)"></td>
          <td onmousemove="cellHit(this)"></td>
          <td onmousemove="cellHit(this)"></td>
          <td onmousemove="cellHit(this)"></td>
          <td onmousemove="cellHit(this)"></td>
          <td onmousemove="cellHit(this)"></td>
          <td onmousemove="cellHit(this)"></td>
          <td onmousemove="cellHit(this)"></td>
          <td onmousemove="cellHit(this)"></td>
      </tr>
      <tr>
          <td  onmousemove="cellHit(this)"></td>
          <td  onmousemove="cellHit(this)"></td>
          <td  onmousemove="cellHit(this)"></td>
          <td  onmousemove="cellHit(this)"></td>
          <td  onmousemove="cellHit(this)"></td>
          <td  onmousemove="cellHit(this)" id="cellabove" style="background-color: red;"></td>
          <td  onmousemove="cellHit(this)"></td>
          <td  onmousemove="cellHit(this)"></td>
          <td  onmousemove="cellHit(this)"></td>
          <td  onmousemove="cellHit(this)"></td>
      </tr>
      <tr>
          <td  onmousemove="cellHit(this)"></td>
          <td  onmousemove="cellHit(this)"></td>
          <td  onmousemove="cellHit(this)"></td>
          <td  onmousemove="cellHit(this)"></td>
          <td  onmousemove="cellHit(this)" id="cellleft"></td>
          <td  onmousemove="cellHit(this)" id="outline2" style="outline: 50px solid red;"></td>
          <td  onmousemove="cellHit(this)" id="cellright"></td>
          <td  onmousemove="cellHit(this)"></td>
          <td  onmousemove="cellHit(this)"></td>
          <td  onmousemove="cellHit(this)"></td>
      </tr>
      <tr>
          <td  onmousemove="cellHit(this)"></td>
          <td  onmousemove="cellHit(this)"></td>
          <td  onmousemove="cellHit(this)"></td>
          <td  onmousemove="cellHit(this)"></td>
          <td  onmousemove="cellHit(this)" id="cellbelow"></td>
          <td  onmousemove="cellHit(this)"></td>
          <td  onmousemove="cellHit(this)"></td>
          <td  onmousemove="cellHit(this)"></td>
          <td  onmousemove="cellHit(this)"></td>
          <td  onmousemove="cellHit(this)"></td>
      </tr>
      <tr>
          <td  onmousemove="cellHit(this)"></td>
          <td  onmousemove="cellHit(this)"></td>
          <td  onmousemove="cellHit(this)"></td>
          <td  onmousemove="cellHit(this)"></td>
          <td  onmousemove="cellHit(this)"></td>
          <td  onmousemove="cellHit(this)"></td>
          <td  onmousemove="cellHit(this)"></td>
          <td  onmousemove="cellHit(this)"></td>
          <td  onmousemove="cellHit(this)"></td>
          <td  onmousemove="cellHit(this)"></td>
      </tr>
      <tr>
          <td  onmousemove="cellHit(this)"></td>
          <td  onmousemove="cellHit(this)"></td>
          <td  onmousemove="cellHit(this)"></td>
          <td  onmousemove="cellHit(this)"></td>
          <td  onmousemove="cellHit(this)"></td>
          <td  onmousemove="cellHit(this)"></td>
          <td  onmousemove="cellHit(this)"></td>
          <td  onmousemove="cellHit(this)"></td>
          <td  onmousemove="cellHit(this)"></td>
          <td  onmousemove="cellHit(this)"></td>
      </tr>
      <tr>
          <td  onmousemove="cellHit(this)"></td>
          <td  onmousemove="cellHit(this)"></td>
          <td  onmousemove="cellHit(this)"></td>
          <td  onmousemove="cellHit(this)"></td>
          <td  onmousemove="cellHit(this)"></td>
          <td  onmousemove="cellHit(this)"></td>
          <td  onmousemove="cellHit(this)"></td>
          <td  onmousemove="cellHit(this)"></td>
          <td  onmousemove="cellHit(this)"></td>
          <td  onmousemove="cellHit(this)"></td>
      </tr>
  </table>
</body>

</html>