According to `nsContainerFrame::ShouldAvoidBreakInside`, we allow a frame to break from inside when it is at the top of page/column, i.e. when `mIsTopOfPage` is true. This patch allows the content at the top of the column to honor the break-inside:avoid during column balancing, so it can now propagate the break-before status to nsColumnSetFrame if it needs to report such status. We don't need to worry about disallowing an break-inside:avoid content from breaking will trap the column balancing algorithm forever. If the content's block-size is larger than the column container's available content-box block-size, then the column balancing algorithm will give up and fill the columns sequentially at https://searchfox.org/mozilla-central/rev/4f2984be127d2e7c788cf1848d63dca63022beec/layout/generic/nsColumnSetFrame.cpp#1146-1162 The reference files are modified to reflect the rendering as of this patch. Note that browsers do not agree on the rendering of `1420528-1.html`. Before this patch, our rendering is the same as Chrome by placing "Spacer" in the first column, but now we agree with webkit by placing it in the second column. The multicol in `611574-2.html` is used for visual separation of subtests. I change it from column balancing to fill to workaround bug 1784002. Differential Revision: https://phabricator.services.mozilla.com/D154048
32 lines
879 B
HTML
32 lines
879 B
HTML
<html>
|
|
<head>
|
|
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=685012">
|
|
<link rel="help" href="http://www.w3.org/TR/CSS21/page.html#propdef-page-break-inside">
|
|
<meta name="flags" content="paged">
|
|
<meta charset="utf-8">
|
|
<title>Balancing Overflow, page-break-inside:avoid</title>
|
|
<style>
|
|
#colset { width: 200px;
|
|
padding: 2px;
|
|
column-count: 3;
|
|
column-gap: 2px;
|
|
column-fill: auto; }
|
|
#a { height: auto; background: lightblue;}
|
|
#b { height: 50px; background: lightblue;}
|
|
#c { height: 51px; background: orange;}
|
|
</style>
|
|
</head>
|
|
<!-- Removing whitespace in body for simpler frame trees -->
|
|
<body
|
|
><div id="colset"
|
|
><div
|
|
><div id="a"></div
|
|
><div id="b"
|
|
><div id="c"></div
|
|
><div id="d"></div
|
|
></div
|
|
></div
|
|
></div
|
|
></body>
|
|
</html>
|