Google Git
Sign in
webkit / WebKit / a096b91166f1da77d728183369e63e2480b979db / . / LayoutTests / tables / hittesting / filltable-outline.html
blob: 58580680aaf41bf8d98a811e493842b5a03011f6 [file] [log] [blame]
<!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) {
window.testRunner.dumpAsText();
window.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) {
window.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>