Skip to content
Permalink
Browse files
Obey intrinsic min-height in nested column flex container
https://bugs.webkit.org/show_bug.cgi?id=240068

Reviewed by Sergio Villar Senin.

Fixes a regression from bug 230755. An intrinsic min-height should make
a column flex container grow enough for its contents, even if it's also
a flex item with a small definite flex-basis like 0px.

Test: imported/w3c/web-platform-tests/css/css-flexbox/flex-minimum-height-flex-items-031.html

Canonical link: https://commits.webkit.org/250912@main
git-svn-id: https://svn.webkit.org/repository/webkit/trunk@294744 268f45cc-cd09-0410-ab3c-d52691b4dbfc
  • Loading branch information
Loirooriol committed May 24, 2022
1 parent 2df4ae0 commit 22bef8729d8fd0ce7afa59a56de7ae1061b9b235
Showing 5 changed files with 289 additions and 3 deletions.
@@ -0,0 +1,220 @@

PASS .flex 1
PASS .flex 2
PASS .flex 3
PASS .flex 4
PASS .flex 5
PASS .flex 6
PASS .flex 7
PASS .flex 8
PASS .flex 9
PASS .flex 10
PASS .flex 11
PASS .flex 12
PASS .flex 13
PASS .flex 14
PASS .flex 15
PASS .flex 16
PASS .flex 17
PASS .flex 18
PASS .flex 19
PASS .flex 20
PASS .flex 21
PASS .flex 22
PASS .flex 23
PASS .flex 24
PASS .flex 25
PASS .flex 26
PASS .flex 27
PASS .flex 28
PASS .flex 29
PASS .flex 30
PASS .flex 31
PASS .flex 32
PASS .flex 33
PASS .flex 34
PASS .flex 35
PASS .flex 36
PASS .flex 37
PASS .flex 38
PASS .flex 39
PASS .flex 40
PASS .flex 41
PASS .flex 42
PASS .flex 43
PASS .flex 44
PASS .flex 45
PASS .flex 46
PASS .flex 47
PASS .flex 48
PASS .flex 49
PASS .flex 50
PASS .flex 51
PASS .flex 52
PASS .flex 53
PASS .flex 54
PASS .flex 55
PASS .flex 56
PASS .flex 57
PASS .flex 58
PASS .flex 59
PASS .flex 60
PASS .flex 61
PASS .flex 62
PASS .flex 63
PASS .flex 64
PASS .flex 65
PASS .flex 66
PASS .flex 67
PASS .flex 68
PASS .flex 69
PASS .flex 70
PASS .flex 71
PASS .flex 72
1
2
1
2
1
2
1
2
1
2
1
2
1
2
1
2
1
2
1
2
1
2
1
2
1
2
1
2
1
2
1
2
1
2
1
2
1
2
1
2
1
2
1
2
1
2
1
2
1
2
1
2
1
2
1
2
1
2
1
2
1
2
1
2
1
2
1
2
1
2
1
2

1
2
1
2
1
2
1
2
1
2
1
2
1
2
1
2
1
2
1
2
1
2
1
2
1
2
1
2
1
2
1
2
1
2
1
2
1
2
1
2
1
2
1
2
1
2
1
2
1
2
1
2
1
2
1
2
1
2
1
2
1
2
1
2
1
2
1
2
1
2
1
2


@@ -0,0 +1,54 @@
<!DOCTYPE html>
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#min-size-auto">
<link rel="help" href="https://bugs.webkit.org/show_bug.cgi?id=240068">
<meta name="assert" content="An intrinsic min-height can make a column flex container grow enough for its contents, even if it's also a flex item with 'flex-basis: 0px'.">

<div id="log"></div>

<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
<script>
for (let outerFlexDirection of ["column", "column-reverse"]) {
for (let innerFlexDirection of ["column", "column-reverse"]) {
for (let placeContent of ["start", "center", "end"]) {
for (let minHeight of ["auto", "min-content", "max-content"]) {
for (let flex of ["0 0 44px", "1 1 44px"]) {
const outer = document.createElement("div");
outer.className = "flex";
outer.style.display = "inline-flex";
outer.style.flexDirection = outerFlexDirection;
outer.style.border = "1px solid #000";
outer.dataset.expectedClientHeight = "104";

const inner = document.createElement("div");
inner.style.flexBasis = "0px";
inner.style.display = "flex";
inner.style.flexDirection = innerFlexDirection;
inner.style.placeContent = placeContent;
inner.style.minHeight = minHeight;
inner.style.border = "2px solid #0ff";
inner.dataset.expectedClientHeight = "100";

const content1 = document.createElement("div");
content1.style.flex = flex;
content1.style.border = "3px solid #f0f";
content1.dataset.expectedHeight = "50";

const content2 = content1.cloneNode();

content1.textContent = "1";
content2.textContent = "2";
inner.appendChild(content1);
inner.appendChild(content2);
outer.appendChild(inner);
document.body.appendChild(outer);
}
}
}
}
document.body.appendChild(document.createElement("br"));
}
checkLayout(".flex");
</script>
@@ -3266,7 +3266,7 @@ std::optional<LayoutUnit> RenderBox::computeIntrinsicLogicalContentHeightUsing(L
if (logicalHeightLength.isMinContent() || logicalHeightLength.isMaxContent() || logicalHeightLength.isFitContent() || logicalHeightLength.isLegacyIntrinsic()) {
if (intrinsicContentHeight)
return adjustIntrinsicLogicalHeightForBoxSizing(intrinsicContentHeight.value());
return intrinsicContentHeight;
return std::nullopt;
}
if (logicalHeightLength.isFillAvailable())
return containingBlock()->availableLogicalHeight(ExcludeMarginBorderPadding) - borderAndPadding;
@@ -3276,8 +3276,13 @@ std::optional<LayoutUnit> RenderBox::computeIntrinsicLogicalContentHeightUsing(L

std::optional<LayoutUnit> RenderBox::computeContentAndScrollbarLogicalHeightUsing(SizeType heightType, const Length& height, std::optional<LayoutUnit> intrinsicContentHeight) const
{
if (height.isAuto())
return heightType == MinSize ? std::optional<LayoutUnit>(0) : std::nullopt;
if (height.isAuto()) {
if (heightType != MinSize)
return std::nullopt;
if (intrinsicContentHeight && isFlexItem() && downcast<RenderFlexibleBox>(parent())->shouldApplyMinBlockSizeAutoForChild(*this))
return adjustIntrinsicLogicalHeightForBoxSizing(intrinsicContentHeight.value());
return std::optional<LayoutUnit>(0);
}
// FIXME: The CSS sizing spec is considering changing what min-content/max-content should resolve to.
// If that happens, this code will have to change.
if (height.isIntrinsic() || height.isLegacyIntrinsic())
@@ -523,6 +523,11 @@ bool RenderFlexibleBox::shouldApplyMinSizeAutoForChild(const RenderBox& child) c
return (minSize.isAuto() || childBlockSizeIsEquivalentToAutomaticSize) && (mainAxisOverflowForChild(child) == Overflow::Visible);
}

bool RenderFlexibleBox::shouldApplyMinBlockSizeAutoForChild(const RenderBox& child) const
{
return !mainAxisIsChildInlineAxis(child) && shouldApplyMinSizeAutoForChild(child);
}

Length RenderFlexibleBox::flexBasisForChild(const RenderBox& child) const
{
Length flexLength = child.style().flexBasis();
@@ -91,6 +91,8 @@ class RenderFlexibleBox : public RenderBlock {
enum class GapType { BetweenLines, BetweenItems };
LayoutUnit computeGap(GapType) const;

bool shouldApplyMinBlockSizeAutoForChild(const RenderBox&) const;

protected:
void computeIntrinsicLogicalWidths(LayoutUnit& minLogicalWidth, LayoutUnit& maxLogicalWidth) const override;

0 comments on commit 22bef87

Please sign in to comment.