<!DOCTYPE html>
<p>There should be a green square below, and no red.</p>
<!-- In the first layout pass we'll use the specified column height. We'll need
to insert pagination struts at breaks if some unbreakable content (such as
a line) would otherwise be broken in half. When calculating a balanced
column height, we need to subtract these struts again, to calculate a
minimal column height. The final column height (in the second layout pass)
in this case should be 60px, since that's what the contents
require. (8*20px + 2*40px) / 4 = 60px -->
<div style="columns:4; column-gap:0; width:60px; height:80px; orphans:1; widows:1; line-height:20px;">
<div id="parent" style="background:red;">
<div id="child1" style="background:green;">
<br>
<br>
<br>
<br>
<!-- In the first layout pass, when column height is 80px, as
specified, there'll be a break between these two
lines. There'll be no pagination strut, though, since four
lines take up exactly 80px. -->
<br>
<br>
<br>
</div>
<!-- There'll be a break between these two blocks. At this point in the
first layout pass we have 20px left in the second column (since it
contains 3 lines == 60px). The 20px will be lost, and the next
block therefore needs a pagination strut of 20px. -->
<div id="child2" style="line-height:40px; background:green;">
<br>
</div>
<div id="child3" style="background:green;">
<br>
</div>
<!-- There'll be another break between these two blocks. At this point
in the first layout pass we have 20px left in the third column. The
situation is exactly the same as at the previous breaks. We need
another pagination strut of 20px. -->
<div id="child4" style="line-height:40px; background:green;">
<br>
</div>
</div>
<!-- The height of #parent (which comprises the entire multicol container)
in the first layout pass will be the height of all lines, plus
pagination struts. We have 8 lines that are 20px tall, and 2 lines that
are 40px tall. We have one pagination strut before the the third column
and one before the fourth one, each 20px. Total height of #parent in
the initial layout pass will be 8*20px + 2*40px + 2*20px = 280px. To
find the minimal balanced height, we should look strictly at the
contents, and subtract the 40px of strut. We end up with 240px, which
we should balance over the 4 columns. So we get a column height of
60px. -->
</div>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script>
test(() => {
var parent = document.getElementById("parent");
var child1 = document.getElementById("child1");
var child2 = document.getElementById("child2");
var child3 = document.getElementById("child3");
var child4 = document.getElementById("child4");
assert_equals(parent.offsetHeight, 240);
assert_equals(child1.offsetHeight, 140);
assert_equals(child2.offsetHeight, 40);
assert_equals(child3.offsetHeight, 20);
assert_equals(child4.offsetHeight, 40);
}, "Balance, non-auto height, unused space at break after perfect break with no space loss");
</script>
Codebase Browser
chromium