<!DOCTYPE html>
<html>
<head>
<title>Document::nodesFromRect : Rect-based hit-testing on tables - bug 86605</title>
<style type="text/css">
#sandbox {
position: absolute;
left: 0px;
top: 0px;
width: 600px;
height: 800px;
}
#testtable {
margin: 100px;
width: 200px;
height: 200px;
}
.rtl {
direction: rtl;
}
.tblr {
-webkit-writing-mode: vertical-lr;
}
table td {
background: gray;
}
table:hover td {
background: rgba(0,0,0,0.1);
}
</style>
<script src="../../../resources/js-test.js"></script>
<script src="resources/nodesFromRect.js"></script>
</head>
<body>
<div id=sandbox>
<table id=testtable>
<tr id=tr1>
<td id=td11>
<td id=td12>
<td id=td13>
<td id=td14>
<tr id=tr2>
<td id=td21>
<td id=td22>
<td id=td23>
<td id=td24>
<tr id=tr3>
<td id=td31>
<td id=td32>
<td id=td33>
<td id=td34>
<tr id=tr4>
<td id=td41>
<td id=td42>
<td id=td43>
<td id=td44>
</table>
</div>
<script>
function runTest()
{
description(document.title);
var e = {};
// Set up shortcut access to elements
['sandbox', 'testtable', 'tr1', 'tr2', 'tr3', 'tr4',
'td11', 'td12', 'td13', 'td14',
'td21', 'td22', 'td23', 'td24',
'td31', 'td32', 'td33', 'td34',
'td41', 'td42', 'td43', 'td44'].forEach(function(a) {
e[a] = document.getElementById(a);
});
window.scrollTo(0, 0);
debug('Check area hits fully inside table cells');
check(115, 115, 21, 21, [e.td11]);
check(265, 115, 21, 21, [e.td14]);
check(165, 165, 21, 21, [e.td22]);
check(115, 265, 21, 21, [e.td41]);
debug('Check area hits across table border');
check(70, 115, 41, 21, [e.td11, e.testtable, e.sandbox]);
check(265, 70, 21, 41, [e.td14, e.testtable, e.sandbox]);
check(290, 290, 41, 41, [e.td44, e.testtable, e.sandbox]);
debug('Check area hits crossing neighbouring table cells');
check(170, 165, 41, 21, [e.td23, e.td22, e.testtable]);
check(240, 265, 41, 21, [e.td44, e.td43, e.testtable]);
check(165, 170, 21, 41, [e.td32, e.td22, e.testtable]);
check(265, 240, 21, 41, [e.td44, e.td34, e.testtable]);
check(170, 170, 41, 41, [e.td33, e.td32, e.td23, e.td22, e.testtable]);
debug('Check area hits crossing entire table cells');
check(110, 165, 181, 21, [e.td24, e.td23, e.td22, e.td21, e.testtable]);
check(165, 110, 21, 181, [e.td42, e.td32, e.td22, e.td12, e.testtable]);
check(90, 90, 121, 121, [e.td33, e.td32, e.td31,
e.td23, e.td22, e.td21,
e.td13, e.td12, e.td11,
e.testtable, e.sandbox]);
check(115, 230, 21, 131, [e.td41, e.td31, e.testtable, e.sandbox]);
check(230, 140, 131, 21, [e.td24, e.td23, e.td14, e.td13, e.testtable, e.sandbox]);
debug('Check area hits on right-to-left table');
e['testtable'].setAttribute('class', 'rtl');
check(265, 115, 21, 21, [e.td11]);
check(165, 165, 21, 21, [e.td23]);
check(165, 170, 21, 41, [e.td33, e.td23, e.testtable]);
debug('Check area hits on flipped (tb-lr) table');
e['testtable'].setAttribute('class', 'tblr');
check(265, 115, 21, 21, [e.td41]);
check(115, 265, 21, 21, [e.td14]);
check(110, 165, 181, 21, [e.td42, e.td32, e.td22, e.td12, e.testtable]);
}
runTest();
</script>
</body>
</html>
Codebase Browser
chromium