third_party/WebKit/LayoutTests/fast/table/hittest-tablecell-with-borders-bottom-edge.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <script src="../../resources/js-test.js"></script>
   5 <script>
   6 function test()
   7 {
   8     description("An event generated on the edge of a table cell is not being consumed by the appropriate underlying element. This test verifies that the hittest result on the bottom edge of a table cell (with borders) returns the proper underlying element.");
   9
  10     var ele = {};
  11     ['tr1-td1', 'tr1-td2', 'tr1-td3', 'tr1-td4',
  12      'tr2-td1', 'tr2-td2', 'tr2-td3', 'tr2-td4',
  13      'tr3-td1', 'tr3-td2', 'tr3-td3', 'tr3-td4',
  14      'tr4-td1', 'tr4-td2', 'tr4-td3', 'tr4-td4'].forEach(function(a) {
  15         ele[a] = document.getElementById(a);
  16         hittest(ele[a], a);
  17         ele[a].innerHTML = '';
  18     });
  19
  20     isSuccessfullyParsed();
  21 }
  22 function hittest(ele, orgElement, expected1, expected2)
  23 {
  24     middleX = ele.getBoundingClientRect().right / 2;
  25     edge = ele.getBoundingClientRect().bottom;
  26     debug('Executing for element '+orgElement+' on the bottom edge of the table cell:');
  27
  28     switch(orgElement) {
  29         case ('tr1-td1'):
  30                 shouldBe("document.elementFromPoint(middleX, edge - 1).id", "'tr1-td1'");
  31                 shouldBe("document.elementFromPoint(middleX, edge).id", "'tr2-td1'");
  32                 shouldBe("document.elementFromPoint(middleX, edge + 1).id", "'tr2-td1'");
  33                 break;
  34         case ('tr1-td2'):
  35         case ('tr1-td3'):
  36                 shouldBe("document.elementFromPoint(middleX, edge - 1).id", "'tr1-td1'");
  37                 shouldBe("document.elementFromPoint(middleX, edge).id", "'tr2-td1'");
  38                 shouldBe("document.elementFromPoint(middleX, edge + 1).id", "'tr2-td1'");
  39                 break;
  40         case ('tr1-td4'):
  41                 shouldBe("document.elementFromPoint(middleX, edge - 1).id", "'tr1-td2'");
  42                 shouldBe("document.elementFromPoint(middleX, edge).id", "'tr2-td2'");
  43                 shouldBe("document.elementFromPoint(middleX, edge + 1).id", "'tr2-td2'");
  44                 break;
  45         case ('tr2-td1'):
  46                 shouldBe("document.elementFromPoint(middleX, edge - 1).id", "'tr2-td1'");
  47                 shouldBe("document.elementFromPoint(middleX, edge).id", "'tr3-td1'");
  48                 shouldBe("document.elementFromPoint(middleX, edge + 1).id", "'tr3-td1'");
  49                 break;
  50         case ('tr2-td2'):
  51         case ('tr2-td3'):
  52                 shouldBe("document.elementFromPoint(middleX, edge - 1).id", "'tr2-td1'");
  53                 shouldBe("document.elementFromPoint(middleX, edge).id", "'tr3-td1'");
  54                 shouldBe("document.elementFromPoint(middleX, edge + 1).id", "'tr3-td1'");
  55                 break;
  56         case ('tr2-td4'):
  57                 shouldBe("document.elementFromPoint(middleX, edge - 1).id", "'tr2-td2'");
  58                 shouldBe("document.elementFromPoint(middleX, edge).id", "'tr3-td2'");
  59                 shouldBe("document.elementFromPoint(middleX, edge + 1).id", "'tr3-td2'");
  60                 break;
  61    case ('tr3-td1'):
  62    case ('tr3-td2'):
  63    case ('tr3-td3'):
  64                 shouldBe("document.elementFromPoint(middleX, edge - 1).id", "'tr3-td1'");
  65                 shouldBe("document.elementFromPoint(middleX, edge).id", "'tr4-td1'");
  66                 shouldBe("document.elementFromPoint(middleX, edge + 1).id", "'tr4-td1'");
  67                 break;
  68         case ('tr3-td4'):
  69                 shouldBe("document.elementFromPoint(middleX, edge - 1).id", "'tr3-td2'");
  70                 shouldBe("document.elementFromPoint(middleX, edge).id", "'tr4-td2'");
  71                 shouldBe("document.elementFromPoint(middleX, edge + 1).id", "'tr4-td2'");
  72                 break;
  73         case ('tr4-td1'):
  74                 shouldBe("document.elementFromPoint(middleX, edge - 1).id", "'tr4-td1'");
  75                 shouldBe("document.elementFromPoint(middleX, edge).id", "''");
  76                 shouldBe("document.elementFromPoint(middleX, edge + 1).id", "''");
  77                 break;
  78         case ('tr4-td2'):
  79                 shouldBe("document.elementFromPoint(middleX, edge - 1).id", "'tr4-td2'");
  80                 shouldBe("document.elementFromPoint(middleX, edge).id", "''");
  81                 shouldBe("document.elementFromPoint(middleX, edge + 1).id", "''");
  82                 break;
  83         case ('tr4-td3'):
  84                 shouldBe("document.elementFromPoint(middleX, edge - 1).id", "''");
  85                 shouldBe("document.elementFromPoint(middleX, edge).id", "''");
  86                 shouldBe("document.elementFromPoint(middleX, edge + 1).id", "''");
  87                 break;
  88         case ('tr4-td4'):
  89                 shouldBe("document.elementFromPoint(middleX, edge - 1).id", "'tr4-td4'");
  90                 shouldBe("document.elementFromPoint(middleX, edge).id", "''");
  91                 shouldBe("document.elementFromPoint(middleX, edge + 1).id", "''");
  92                 break;
  93         default:
  94                 break;
  95     }
  96 }
  97 </script>
  98 <style>
  99     table
 100     {
 101         border-spacing: 0px;
 102         font-size: 1000%;
 103     }
 104     td
 105         {
 106         padding: 0px;
 107         border: 1px solid black;
 108     }
 109 </style>
 110 </head>
 111 <body onload="test()">
 112     <p>Test for Bugzilla <a href="https://bugs.webkit.org/show_bug.cgi?id=74864">Bug 74864</a>: There is additional space not belonged to a table between the table cells.</p>
 113     <table cellspacing=0>
 114         <tr id="tr1">
 115             <td id="tr1-td1">1</td>
 116             <td id="tr1-td2">1</td>
 117             <td id="tr1-td3"></td>
 118             <td id="tr1-td4">1</td>
 119         </tr>
 120         <tr id="tr2">
 121             <td id="tr2-td1">1</td>
 122             <td id="tr2-td2">1</td>
 123             <td id="tr2-td3"></td>
 124             <td id="tr2-td4">1</td>
 125         </tr>
 126         <tr id="tr3">
 127             <td id="tr3-td1"></td>
 128             <td id="tr3-td2"></td>
 129             <td id="tr3-td3"></td>
 130             <td id="tr3-td4"></td>
 131         </tr>
 132         <tr id="tr4">
 133             <td id="tr4-td1">1</td>
 134             <td id="tr4-td2">1</td>
 135             <td id="tr4-td3"></td>
 136             <td id="tr4-td4">1</td>
 137         </tr>
 138     </table>
 139     <p id="description"></p>
 140     <div id="console"></div>
 141 </body>
 142 </html>