| <!DOCTYPE html> |
| <html> |
| <head> |
| <script src="../../resources/js-test-pre.js"></script> |
| <script> |
| function test() |
| { |
| 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."); |
| |
| var ele = {}; |
| ['tr1-td1', 'tr1-td2', 'tr1-td3', 'tr1-td4', |
| 'tr2-td1', 'tr2-td2', 'tr2-td3', 'tr2-td4', |
| 'tr3-td1', 'tr3-td2', 'tr3-td3', 'tr3-td4', |
| 'tr4-td1', 'tr4-td2', 'tr4-td3', 'tr4-td4'].forEach(function(a) { |
| ele[a] = document.getElementById(a); |
| hittest(ele[a], a); |
| ele[a].innerHTML = ''; |
| }); |
| |
| isSuccessfullyParsed(); |
| } |
| function hittest(ele, orgElement, expected1, expected2) |
| { |
| middleX = ele.getBoundingClientRect().right / 2; |
| edge = ele.getBoundingClientRect().bottom; |
| debug('Executing for element '+orgElement+' on the bottom edge of the table cell:'); |
| |
| switch(orgElement) { |
| case ('tr1-td1'): |
| shouldBe("document.elementFromPoint(middleX, edge - 1).id", "'tr1-td1'"); |
| shouldBe("document.elementFromPoint(middleX, edge).id", "'tr2-td1'"); |
| shouldBe("document.elementFromPoint(middleX, edge + 1).id", "'tr2-td1'"); |
| break; |
| case ('tr1-td2'): |
| case ('tr1-td3'): |
| shouldBe("document.elementFromPoint(middleX, edge - 1).id", "'tr1-td1'"); |
| shouldBe("document.elementFromPoint(middleX, edge).id", "'tr2-td1'"); |
| shouldBe("document.elementFromPoint(middleX, edge + 1).id", "'tr2-td1'"); |
| break; |
| case ('tr1-td4'): |
| shouldBe("document.elementFromPoint(middleX, edge - 1).id", "'tr1-td2'"); |
| shouldBe("document.elementFromPoint(middleX, edge).id", "'tr2-td2'"); |
| shouldBe("document.elementFromPoint(middleX, edge + 1).id", "'tr2-td2'"); |
| break; |
| case ('tr2-td1'): |
| shouldBe("document.elementFromPoint(middleX, edge - 1).id", "'tr2-td1'"); |
| shouldBe("document.elementFromPoint(middleX, edge).id", "'tr3-td1'"); |
| shouldBe("document.elementFromPoint(middleX, edge + 1).id", "'tr3-td1'"); |
| break; |
| case ('tr2-td2'): |
| case ('tr2-td3'): |
| shouldBe("document.elementFromPoint(middleX, edge - 1).id", "'tr2-td1'"); |
| shouldBe("document.elementFromPoint(middleX, edge).id", "'tr3-td1'"); |
| shouldBe("document.elementFromPoint(middleX, edge + 1).id", "'tr3-td1'"); |
| break; |
| case ('tr2-td4'): |
| shouldBe("document.elementFromPoint(middleX, edge - 1).id", "'tr2-td2'"); |
| shouldBe("document.elementFromPoint(middleX, edge).id", "'tr3-td2'"); |
| shouldBe("document.elementFromPoint(middleX, edge + 1).id", "'tr3-td2'"); |
| break; |
| case ('tr3-td1'): |
| case ('tr3-td2'): |
| case ('tr3-td3'): |
| shouldBe("document.elementFromPoint(middleX, edge - 1).id", "'tr3-td1'"); |
| shouldBe("document.elementFromPoint(middleX, edge).id", "'tr4-td1'"); |
| shouldBe("document.elementFromPoint(middleX, edge + 1).id", "'tr4-td1'"); |
| break; |
| case ('tr3-td4'): |
| shouldBe("document.elementFromPoint(middleX, edge - 1).id", "'tr3-td2'"); |
| shouldBe("document.elementFromPoint(middleX, edge).id", "'tr4-td2'"); |
| shouldBe("document.elementFromPoint(middleX, edge + 1).id", "'tr4-td2'"); |
| break; |
| case ('tr4-td1'): |
| shouldBe("document.elementFromPoint(middleX, edge - 1).id", "'tr4-td1'"); |
| shouldBe("document.elementFromPoint(middleX, edge).id", "''"); |
| shouldBe("document.elementFromPoint(middleX, edge + 1).id", "''"); |
| break; |
| case ('tr4-td2'): |
| shouldBe("document.elementFromPoint(middleX, edge - 1).id", "'tr4-td2'"); |
| shouldBe("document.elementFromPoint(middleX, edge).id", "''"); |
| shouldBe("document.elementFromPoint(middleX, edge + 1).id", "''"); |
| break; |
| case ('tr4-td3'): |
| shouldBe("document.elementFromPoint(middleX, edge - 1).id", "''"); |
| shouldBe("document.elementFromPoint(middleX, edge).id", "''"); |
| shouldBe("document.elementFromPoint(middleX, edge + 1).id", "''"); |
| break; |
| case ('tr4-td4'): |
| shouldBe("document.elementFromPoint(middleX, edge - 1).id", "'tr4-td4'"); |
| shouldBe("document.elementFromPoint(middleX, edge).id", "''"); |
| shouldBe("document.elementFromPoint(middleX, edge + 1).id", "''"); |
| break; |
| default: |
| break; |
| } |
| } |
| </script> |
| <style> |
| table |
| { |
| border-spacing: 0px; |
| font-size: 1000%; |
| } |
| td |
| { |
| padding: 0px; |
| border: 1px solid black; |
| } |
| </style> |
| </head> |
| <body onload="test()"> |
| <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> |
| <table cellspacing=0> |
| <tr id="tr1"> |
| <td id="tr1-td1">1</td> |
| <td id="tr1-td2">1</td> |
| <td id="tr1-td3"></td> |
| <td id="tr1-td4">1</td> |
| </tr> |
| <tr id="tr2"> |
| <td id="tr2-td1">1</td> |
| <td id="tr2-td2">1</td> |
| <td id="tr2-td3"></td> |
| <td id="tr2-td4">1</td> |
| </tr> |
| <tr id="tr3"> |
| <td id="tr3-td1"></td> |
| <td id="tr3-td2"></td> |
| <td id="tr3-td3"></td> |
| <td id="tr3-td4"></td> |
| </tr> |
| <tr id="tr4"> |
| <td id="tr4-td1">1</td> |
| <td id="tr4-td2">1</td> |
| <td id="tr4-td3"></td> |
| <td id="tr4-td4">1</td> |
| </tr> |
| </table> |
| <p id="description"></p> |
| <div id="console"></div> |
| </body> |
| </html> |
