third_party/WebKit/LayoutTests/fast/table/hittest-tablecell-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 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         case ('tr2-td2'):
  47         case ('tr2-td3'):
  48                 shouldBe("document.elementFromPoint(middleX, edge - 1).id", "'tr2-td1'");
  49                 shouldBe("document.elementFromPoint(middleX, edge).id", "'tr4-td1'");
  50                 shouldBe("document.elementFromPoint(middleX, edge + 1).id", "'tr4-td1'");
  51                 break;
  52         case ('tr2-td4'):
  53                 shouldBe("document.elementFromPoint(middleX, edge - 1).id", "'tr2-td2'");
  54                 shouldBe("document.elementFromPoint(middleX, edge).id", "'tr4-td2'");
  55                 shouldBe("document.elementFromPoint(middleX, edge + 1).id", "'tr4-td2'");
  56                 break;
  57    case ('tr3-td1'):
  58    case ('tr3-td2'):
  59    case ('tr3-td3'):
  60                 shouldBe("document.elementFromPoint(middleX, edge - 1).id", "''");
  61                 shouldBe("document.elementFromPoint(middleX, edge).id", "'tr4-td1'");
  62                 shouldBe("document.elementFromPoint(middleX, edge + 1).id", "'tr4-td1'");
  63                 break;
  64         case ('tr3-td4'):
  65                 shouldBe("document.elementFromPoint(middleX, edge - 1).id", "''");
  66                 shouldBe("document.elementFromPoint(middleX, edge).id", "'tr4-td2'");
  67                 shouldBe("document.elementFromPoint(middleX, edge + 1).id", "'tr4-td2'");
  68                 break;
  69         case ('tr4-td1'):
  70                 shouldBe("document.elementFromPoint(middleX, edge - 1).id", "'tr4-td1'");
  71                 shouldBe("document.elementFromPoint(middleX, edge).id", "''");
  72                 shouldBe("document.elementFromPoint(middleX, edge + 1).id", "''");
  73                 break;
  74         case ('tr4-td2'):
  75                 shouldBe("document.elementFromPoint(middleX, edge - 1).id", "'tr4-td2'");
  76                 shouldBe("document.elementFromPoint(middleX, edge).id", "''");
  77                 shouldBe("document.elementFromPoint(middleX, edge + 1).id", "''");
  78                 break;
  79         case ('tr4-td3'):
  80                 shouldBe("document.elementFromPoint(middleX, edge - 1).id", "''");
  81                 shouldBe("document.elementFromPoint(middleX, edge).id", "''");
  82                 shouldBe("document.elementFromPoint(middleX, edge + 1).id", "''");
  83                 break;
  84         case ('tr4-td4'):
  85                 shouldBe("document.elementFromPoint(middleX, edge - 1).id", "'tr4-td4'");
  86                 shouldBe("document.elementFromPoint(middleX, edge).id", "''");
  87                 shouldBe("document.elementFromPoint(middleX, edge + 1).id", "''");
  88                 break;
  89         default:
  90                 break;
  91     }
  92 }
  93 </script>
  94 <style>
  95     table
  96     {
  97         border-spacing: 0px;
  98         font-size: 1000%;
  99     }
 100     td { padding: 0px; }
 101 </style>
 102 </head>
 103 <body onload="test()">
 104     <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>
 105     <table cellspacing=0>
 106         <tr id="tr1">
 107             <td id="tr1-td1">1</td>
 108             <td id="tr1-td2">1</td>
 109             <td id="tr1-td3"></td>
 110             <td id="tr1-td4">1</td>
 111         </tr>
 112         <tr id="tr2">
 113             <td id="tr2-td1">1</td>
 114             <td id="tr2-td2">1</td>
 115             <td id="tr2-td3"></td>
 116             <td id="tr2-td4">1</td>
 117         </tr>
 118         <tr id="tr3">
 119             <td id="tr3-td1"></td>
 120             <td id="tr3-td2"></td>
 121             <td id="tr3-td3"></td>
 122             <td id="tr3-td4"></td>
 123         </tr>
 124         <tr id="tr4">
 125             <td id="tr4-td1">1</td>
 126             <td id="tr4-td2">1</td>
 127             <td id="tr4-td3"></td>
 128             <td id="tr4-td4">1</td>
 129         </tr>
 130     </table>
 131     <p id="description"></p>
 132     <div id="console"></div>
 133 </body>
 134 </html>