<!DOCTYPE html>
<div id="multicol" style="columns:3; column-fill:auto; column-gap:0; height:90px; line-height:20px;">
<br>
<br>
<table cellspacing="0" cellpadding="0">
<tr style="height:50px;">
<td><br></td>
</tr>
<tr id="secondRow" style="height:61px; background:blue;">
<td id="secondCell"><div style="width:61px;"><br></div></td>
</tr>
<tr>
<td><br></td>
</tr>
</table>
</div>
<script src="../resources/testharness.js"></script>
<script src="../resources/testharnessreport.js"></script>
<script>
var multicol = document.getElementById("multicol");
var row = document.getElementById("secondRow");
var cell = document.getElementById("secondCell");
// Check the height of the second row and its cell a few times, with a
// layout pass between each check, to verify that it's stable.
test(() => {
assert_equals(cell.offsetTop, 50);
assert_equals(cell.offsetHeight, 61);
assert_equals(row.offsetTop, 50);
assert_equals(row.offsetHeight, 61);
}, "Row height should be as specified.");
test(() => {
// Change width and verify that layout remains the same, block direction-wise.
multicol.style.width = "500px";
assert_equals(cell.offsetTop, 50);
assert_equals(cell.offsetHeight, 61);
assert_equals(row.offsetTop, 50);
assert_equals(row.offsetHeight, 61);
}, "Row height should be as specified after relayout.");
test(() => {
// Change width and verify that layout remains the same, block direction-wise.
multicol.style.width = "550px";
assert_equals(cell.offsetTop, 50);
assert_equals(cell.offsetHeight, 61);
assert_equals(row.offsetTop, 50);
assert_equals(row.offsetHeight, 61);
}, "Row height should be as specified after another relayout.");
test(() => {
// Change width and verify that layout remains the same, block direction-wise.
multicol.style.width = "600px";
assert_equals(cell.offsetTop, 50);
assert_equals(cell.offsetHeight, 61);
assert_equals(row.offsetTop, 50);
assert_equals(row.offsetHeight, 61);
}, "Row height should be as specified after yet another relayout.");
</script>
Codebase Browser
chromium