Ting-Yu Lin
7406dab054
TL;DR: When computing the inline-size of each column (the `-moz-column-content` anonymous block under `nsColumnSetFrame`) in `ChooseColumnStrategy()`, it is sufficient to use the available inline-size that `ColumnSetWrapperFrame` passes down. Considering the computed inline-size can be wrong in an edge case described below. Details: The used inline-size of `nsColumnSetFrame` is computed from the union of every *non-empty* columns [1]. A column content is considered empty if it contains only overflow containers. For example, a very short absolute containing block (absCB) may contain a tall abspos element that fragments over several columns. If the absCB fits in the first column, its remaining continuations become overflow containers (with zero block-size) holding the rest of the tall abspos continuations. In that case, an `nsColumnSetFrame` with two columns ends up with a final used inline-size of only one column wide, because the second column is considered empty. Now suppose this `nsColumnSetFrame` is itself inside a nested multicol structure, and needs to be fragmented. When reflowing the `nsColumnSetFrame` continuations, we override their *computed* inline-size with their prev-continuation's inline-size [2]. Thus, its computed inline-size is also one column wide, which by itself is fine. However, if we use that narrower inline-size to compute the column width, each column content's width becomes half a column wide, which is wrong. Instead, it is sufficient to use just the available inline-size passed down by `ColumnSetWrapperFrame` to determine the used column width. [1] https://searchfox.org/firefox-main/rev/897ad323744cc6d3afe39845cfb94b015e9f65a0/layout/generic/nsColumnSetFrame.cpp#760,923 [2] https://searchfox.org/firefox-main/rev/897ad323744cc6d3afe39845cfb94b015e9f65a0/layout/generic/nsContainerFrame.cpp#906-912 Differential Revision: https://phabricator.services.mozilla.com/D280191
51 lines
1.2 KiB
HTML
51 lines
1.2 KiB
HTML
<!DOCTYPE html>
|
|
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
|
<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
|
|
<link rel="help" href="https://drafts.csswg.org/css-multicol-1/#the-multi-column-model">
|
|
<link rel="help" href="https://drafts.csswg.org/css-position-3/#abspos-breaking">
|
|
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
|
|
<meta name="assert" content="Test that the nested column container has a correct column width in the outer multicol's second column.">
|
|
|
|
<style>
|
|
.multicol {
|
|
column-count: 2;
|
|
column-fill: auto;
|
|
column-gap: 0;
|
|
}
|
|
#outer {
|
|
width: 100px;
|
|
height: 100px;
|
|
background: red;
|
|
}
|
|
#nested {
|
|
width: 100%;
|
|
height: 200px;
|
|
}
|
|
#abscb {
|
|
position: relative;
|
|
width: 100%;
|
|
|
|
/* Use a height less than the outer column container's height 100px to trigger
|
|
the bug. */
|
|
height: 50px;
|
|
}
|
|
#abspos {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 400px;
|
|
background: green;
|
|
}
|
|
</style>
|
|
|
|
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
|
|
|
<div id="outer" class="multicol">
|
|
<div id="nested" class="multicol">
|
|
<div id="abscb">
|
|
<div id="abspos"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|