<!DOCTYPE html>
<meta charset="UTF-8">
<title>Collapsed borders track writing mode changes</title>
<link rel="help" href="https://drafts.csswg.org/css-tables/#border-collapsing">
<script src='/resources/testharness.js'></script>
<script src='/resources/testharnessreport.js'></script>
<script src="/common/rendering-utils.js"></script>
<style>
.bordermix {
border-top: 10px solid red;
border-bottom: 20px solid green;
border-left: 30px solid yellow;
border-right: 40px solid orange;
}
.vertical {
writing-mode: vertical-rl;
}
main td {
width:100px;
height:100px;
}
main table {
border-collapse: collapse;
}
</style>
<main>
<table class="bordermix targettable">
<td>TABLE</td>
</table>
<table class="targettable">
<tbody class="bordermix">
<td>TBODY</td>
</tbody>
</table>
<table class="targettable">
<tr class="bordermix">
<td>TR</td>
</tr>
</table>
<table class="targettable">
<td class="bordermix">TD</td>
</table>
</main>
<script>
var test = async_test("Table borders track writing mode changes");
let targets = Array.from(document.querySelectorAll(".targettable"));
function assertTargetSize() {
for (let target of targets) {
assert_equals(target.offsetWidth, 172);
assert_equals(target.offsetHeight, 132);
}
}
test.step(assertTargetSize);
waitForAtLeastOneFrame().then( _ => {
for (let target of targets)
target.classList.toggle("vertical");
document.body.offsetTop;
test.step(assertTargetSize);
test.done();
});
</script>
Codebase Browser
chromium