blob: 1c38ddca4e71e77d69ab810ce318aee39933fde8 [file] [log] [blame]
<style>
td { padding: 10px }
</style>
<div style="-webkit-writing-mode: vertical-rl; writing-mode: vertical-rl">
<table>
<tr id="tr1">
<td id="td1a"><span id="s1a">1-A</span></td>
<td id="td1b"><span id="s1b">1-B</span></td>
</tr>
<tr id="tr2">
<td id="td2a"><span id="s2a">2-A</span></td>
<td id="td2b"><span id="s2b">2-B</span></td>
</tr>
</table>
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<script>
function doesRectContainRect(parent, child) {
if (child.top < parent.top) {
return false;
}
if (child.bottom > parent.bottom) {
return false;
}
if (child.left < parent.left) {
return false;
}
if (child.right > parent.right) {
return false;
}
return true;
}
function rectToString(rect) {
return "(" + rect.left + " " + rect.top + " - " + rect.right + " " + rect.bottom + ")"
}
function assert_contains(parent, child, description) {
assert_true(doesRectContainRect(parent, child),
description + " " + rectToString(parent) + " should contain " + rectToString(child));
}
function checkRowColumn(row, column) {
var columnName = ["a", "b", "c", "d", "e"];
var trId = "tr" + (row + 1);
var tr = document.getElementById(trId);
var trRect = tr.getBoundingClientRect();
var name = (row + 1).toString() + "-" + columnName[column].toUpperCase();
var spanId = "s" + (row + 1) + columnName[column];
var span = document.getElementById(spanId);
var spanRect = span.getBoundingClientRect();
assert_contains(trRect, spanRect, name);
}
test(function() {
for (var row = 0; row < 2; row++) {
for (var column = 0; column < 2; column++) {
checkRowColumn(row, column);
}
}
}, "The child of td should be inside of tr in vertical table");
</script>
</div>