mirror of
https://github.com/mozilla/gecko-dev.git
synced 2025-11-10 21:28:04 +02:00
3789b2c558
Automatic update from web-platform-tests[css-flexbox] ChildIntrinsicLogicalWidth should use fit-content, not max-content This function needs to match the actual sizing we use. But, since this is the cross-axis size, we use fit-content: https://drafts.csswg.org/css-flexbox/#algo-cross-item See LayoutBox::SizesLogicalWidthToFitContent and LayoutBox::ComputeLogicalWidthUsing for where we do that fit-content sizing; this code makes us match the ComputeLogicalWidthUsing calculation. This bug is currently somewhat hard to trigger because it requires a combination of all of: - flex-wrap: wrap - flex-direction: column - More than one flex line - Not using align-items: flex-start or align-content: flex-start - No explicit width on the flex item - The max-content width needs to be larger than the width of flexbox The reason this does not matter in other cases is because we only use this function to set FlexLine::cross_axis_extent, which we overwrite in AlignFlexLines if we only have one line. And if we do have more than one line, we only use this value for aligning items and lines, so it only matters if we don't use flex-start alignment. This bug will be much easier to trigger once bug 599828 is fixed (there are at least two real-world sites that are affected by this once that bug is fixed) Bug: 876749 Change-Id: I673026bedfaf0e4c4a25830ef686b200ec8f54a1 Reviewed-on: https://chromium-review.googlesource.com/c/1327746 Commit-Queue: Christian Biesinger <cbiesinger@chromium.org> Reviewed-by: Morten Stenshorne <mstensho@chromium.org> Cr-Commit-Position: refs/heads/master@{#607342} -- wpt-commits: 2281bfa056ad0ca78b9ef60ca2deb0d7f845890f wpt-pr: 13991
30 lines
1.7 KiB
HTML
30 lines
1.7 KiB
HTML
<!DOCTYPE html>
|
|
<link rel="author" title="Google LLC" href="http://www.google.com" />
|
|
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#cross-sizing" />
|
|
<title>css-flexbox: Tests that we size items in a wrapping column flexbox as fit-content</title>
|
|
<link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
|
|
<meta name="assert" content="The flexbox here should have two flex lines, each 50px wide and 100px tall. The flex items overflow but are transparent." />
|
|
|
|
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
|
|
|
<!-- This makes sure that we only see green if the flex items are sized correctly -->
|
|
<div style="position: absolute; width: 100px; height: 100px; background: green;"></div>
|
|
|
|
<div style="display: flex; flex-direction: column; flex-wrap: wrap; width: 50px; height: 100px; line-height: 20px;">
|
|
<div style="background-color: red; height: 100px;">
|
|
<!-- These zero-height divs give the flex item has a min-content width of
|
|
25px and a max-content width of 125px -->
|
|
<div style="width: 25px; display: inline-block;"></div>
|
|
<div style="width: 25px; display: inline-block;"></div>
|
|
<div style="width: 25px; display: inline-block;"></div>
|
|
<div style="width: 25px; display: inline-block;"></div>
|
|
<div style="width: 25px; display: inline-block;"></div>
|
|
</div>
|
|
<div style="background-color: red; height: 100px;">
|
|
<div style="width: 25px; display: inline-block;"></div>
|
|
<div style="width: 25px; display: inline-block;"></div>
|
|
<div style="width: 25px; display: inline-block;"></div>
|
|
<div style="width: 25px; display: inline-block;"></div>
|
|
<div style="width: 25px; display: inline-block;"></div>
|
|
</div>
|
|
</div>
|