third_party/WebKit/LayoutTests/tables/hittesting/filltable-outline.html

   1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   2 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   3
   4 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
   5
   6 <head>
   7 <title>Fill Table Hit Test</title>
   8   <style>
   9     table.testtable { border-width: 0 0 0 0; border-collapse: collapse;}
  10     table.testtable td {  font-size: 20px; background-color: red; border-spacing:0px; width:30px; height:30px; }
  11     body { margin: 0px 0px 0px 0px; }
  12   </style>
  13   <script language="JavaScript" type="text/javascript">
  14     var cellHeight = 30;
  15     var cellWidth = 30;
  16     var hitArray = new Array();
  17     var logMsg = "";
  18     var failed = false;
  19
  20     if (window.testRunner) {
  21         window.testRunner.dumpAsText();
  22         window.testRunner.waitUntilDone();
  23     }
  24
  25     for (var row = 0; row < 10; ++row) {
  26         hitArray[row] = new Array();
  27         for (var col = 0; col < 10; ++col) {
  28             hitArray[row][col] = false;
  29         }
  30     }
  31
  32     function clearHitArray() {
  33         for (var i = 0; i < hitArray.length; ++i) {
  34             for (var j = 0; j < hitArray[i].length; ++j) {
  35                hitArray[i][j] = false;
  36             }
  37         }
  38     }
  39
  40     function doTest() {
  41         // This test confirms that hits pass through large cell outlines.
  42         var ypos = cellHeight /2 ;
  43         for (var row = 0; row < 10; row++) {
  44           var xpos = cellWidth / 2;
  45           for (var col = 0; col < 10; col++) {
  46               logMsg += "Hit cell at row: " + row + ", column: " + col + ": ";
  47               var elem = document.elementFromPoint(xpos, ypos);
  48               if (elem) elem.onmousemove();
  49               if (!hitArray[row][col]) failed = true;
  50               logMsg += (hitArray[row][col] ? "SUCCESS" : "FAIL") + "<br />";
  51               clearHitArray();
  52             xpos += cellWidth;
  53           }
  54           ypos += cellHeight;
  55         }
  56         // Hide the outlines now.
  57         var outline1 = document.getElementById("outline1");
  58         outline1.style.outline = "none";
  59         var outline2 = document.getElementById("outline2");
  60         outline2.style.outline = "none";
  61         document.body.innerHTML =(failed ? "FAIL!!!<br/>" : "SUCCESS!!!<br/>") +logMsg;
  62         if (window.testRunner) {
  63             window.testRunner.notifyDone();
  64         }
  65     }
  66
  67     function cellHit(cell) {
  68         hitArray[cell.parentNode.rowIndex][cell.cellIndex] = true;
  69     }
  70
  71     function setup() {
  72         setTimeout('doTest()', 10);
  73     }
  74   </script>
  75 </head>
  76
  77 <body onload="setup()" >
  78   <table class="testtable" cellpadding="0" cellspacing="0">
  79       <tr>
  80           <td onmousemove="cellHit(this)"></td>
  81           <td onmousemove="cellHit(this)"></td>
  82           <td onmousemove="cellHit(this)"></td>
  83           <td onmousemove="cellHit(this)"></td>
  84           <td onmousemove="cellHit(this)"></td>
  85           <td onmousemove="cellHit(this)"></td>
  86           <td onmousemove="cellHit(this)"></td>
  87           <td onmousemove="cellHit(this)"></td>
  88           <td onmousemove="cellHit(this)"></td>
  89           <td onmousemove="cellHit(this)"></td>
  90       </tr>
  91       <tr>
  92           <td onmousemove="cellHit(this)"></td>
  93           <td onmousemove="cellHit(this)"></td>
  94           <td onmousemove="cellHit(this)"></td>
  95           <td onmousemove="cellHit(this)"></td>
  96           <td onmousemove="cellHit(this)"></td>
  97           <td onmousemove="cellHit(this)"></td>
  98           <td onmousemove="cellHit(this)"></td>
  99           <td onmousemove="cellHit(this)"></td>
 100           <td onmousemove="cellHit(this)"></td>
 101           <td onmousemove="cellHit(this)"></td>
 102       </tr>
 103       <tr>
 104           <td onmousemove="cellHit(this)"></td>
 105           <td onmousemove="cellHit(this)"></td>
 106           <td onmousemove="cellHit(this)"></td>
 107           <td onmousemove="cellHit(this)"></td>
 108           <td onmousemove="cellHit(this)" id="outline1" style="outline: 50px solid red;"></td>
 109           <td onmousemove="cellHit(this)"></td>
 110           <td onmousemove="cellHit(this)"></td>
 111           <td onmousemove="cellHit(this)"></td>
 112           <td onmousemove="cellHit(this)"></td>
 113           <td onmousemove="cellHit(this)"></td>
 114       </tr>
 115       <tr>
 116           <td onmousemove="cellHit(this)"></td>
 117           <td onmousemove="cellHit(this)"></td>
 118           <td onmousemove="cellHit(this)"></td>
 119           <td onmousemove="cellHit(this)"></td>
 120           <td onmousemove="cellHit(this)"></td>
 121           <td onmousemove="cellHit(this)"></td>
 122           <td onmousemove="cellHit(this)"></td>
 123           <td onmousemove="cellHit(this)"></td>
 124           <td onmousemove="cellHit(this)"></td>
 125           <td onmousemove="cellHit(this)"></td>
 126       </tr>
 127       <tr>
 128           <td  onmousemove="cellHit(this)"></td>
 129           <td  onmousemove="cellHit(this)"></td>
 130           <td  onmousemove="cellHit(this)"></td>
 131           <td  onmousemove="cellHit(this)"></td>
 132           <td  onmousemove="cellHit(this)"></td>
 133           <td  onmousemove="cellHit(this)" id="cellabove" style="background-color: red;"></td>
 134           <td  onmousemove="cellHit(this)"></td>
 135           <td  onmousemove="cellHit(this)"></td>
 136           <td  onmousemove="cellHit(this)"></td>
 137           <td  onmousemove="cellHit(this)"></td>
 138       </tr>
 139       <tr>
 140           <td  onmousemove="cellHit(this)"></td>
 141           <td  onmousemove="cellHit(this)"></td>
 142           <td  onmousemove="cellHit(this)"></td>
 143           <td  onmousemove="cellHit(this)"></td>
 144           <td  onmousemove="cellHit(this)" id="cellleft"></td>
 145           <td  onmousemove="cellHit(this)" id="outline2" style="outline: 50px solid red;"></td>
 146           <td  onmousemove="cellHit(this)" id="cellright"></td>
 147           <td  onmousemove="cellHit(this)"></td>
 148           <td  onmousemove="cellHit(this)"></td>
 149           <td  onmousemove="cellHit(this)"></td>
 150       </tr>
 151       <tr>
 152           <td  onmousemove="cellHit(this)"></td>
 153           <td  onmousemove="cellHit(this)"></td>
 154           <td  onmousemove="cellHit(this)"></td>
 155           <td  onmousemove="cellHit(this)"></td>
 156           <td  onmousemove="cellHit(this)" id="cellbelow"></td>
 157           <td  onmousemove="cellHit(this)"></td>
 158           <td  onmousemove="cellHit(this)"></td>
 159           <td  onmousemove="cellHit(this)"></td>
 160           <td  onmousemove="cellHit(this)"></td>
 161           <td  onmousemove="cellHit(this)"></td>
 162       </tr>
 163       <tr>
 164           <td  onmousemove="cellHit(this)"></td>
 165           <td  onmousemove="cellHit(this)"></td>
 166           <td  onmousemove="cellHit(this)"></td>
 167           <td  onmousemove="cellHit(this)"></td>
 168           <td  onmousemove="cellHit(this)"></td>
 169           <td  onmousemove="cellHit(this)"></td>
 170           <td  onmousemove="cellHit(this)"></td>
 171           <td  onmousemove="cellHit(this)"></td>
 172           <td  onmousemove="cellHit(this)"></td>
 173           <td  onmousemove="cellHit(this)"></td>
 174       </tr>
 175       <tr>
 176           <td  onmousemove="cellHit(this)"></td>
 177           <td  onmousemove="cellHit(this)"></td>
 178           <td  onmousemove="cellHit(this)"></td>
 179           <td  onmousemove="cellHit(this)"></td>
 180           <td  onmousemove="cellHit(this)"></td>
 181           <td  onmousemove="cellHit(this)"></td>
 182           <td  onmousemove="cellHit(this)"></td>
 183           <td  onmousemove="cellHit(this)"></td>
 184           <td  onmousemove="cellHit(this)"></td>
 185           <td  onmousemove="cellHit(this)"></td>
 186       </tr>
 187       <tr>
 188           <td  onmousemove="cellHit(this)"></td>
 189           <td  onmousemove="cellHit(this)"></td>
 190           <td  onmousemove="cellHit(this)"></td>
 191           <td  onmousemove="cellHit(this)"></td>
 192           <td  onmousemove="cellHit(this)"></td>
 193           <td  onmousemove="cellHit(this)"></td>
 194           <td  onmousemove="cellHit(this)"></td>
 195           <td  onmousemove="cellHit(this)"></td>
 196           <td  onmousemove="cellHit(this)"></td>
 197           <td  onmousemove="cellHit(this)"></td>
 198       </tr>
 199   </table>
 200 </body>
 201
 202 </html>
 203