Title: [294744] trunk
- Revision
- 294744
- Author
- [email protected]
- Date
- 2022-05-24 07:22:19 -0700 (Tue, 24 May 2022)
Log Message
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
Modified Paths
Added Paths
Diff
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-minimum-height-flex-items-031-expected.txt (0 => 294744)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-minimum-height-flex-items-031-expected.txt (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-minimum-height-flex-items-031-expected.txt 2022-05-24 14:22:19 UTC (rev 294744)
@@ -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
+
+
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-minimum-height-flex-items-031.html (0 => 294744)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-minimum-height-flex-items-031.html (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-minimum-height-flex-items-031.html 2022-05-24 14:22:19 UTC (rev 294744)
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<link rel="author" title="Oriol Brufau" href=""
+<link rel="help" href=""
+<link rel="help" href=""
+<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=""
+<script src=""
+<script src=""
+<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>
Modified: trunk/Source/WebCore/rendering/RenderBox.cpp (294743 => 294744)
--- trunk/Source/WebCore/rendering/RenderBox.cpp 2022-05-24 13:34:14 UTC (rev 294743)
+++ trunk/Source/WebCore/rendering/RenderBox.cpp 2022-05-24 14:22:19 UTC (rev 294744)
@@ -3266,7 +3266,7 @@
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::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())
Modified: trunk/Source/WebCore/rendering/RenderFlexibleBox.cpp (294743 => 294744)
--- trunk/Source/WebCore/rendering/RenderFlexibleBox.cpp 2022-05-24 13:34:14 UTC (rev 294743)
+++ trunk/Source/WebCore/rendering/RenderFlexibleBox.cpp 2022-05-24 14:22:19 UTC (rev 294744)
@@ -523,6 +523,11 @@
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();
Modified: trunk/Source/WebCore/rendering/RenderFlexibleBox.h (294743 => 294744)
--- trunk/Source/WebCore/rendering/RenderFlexibleBox.h 2022-05-24 13:34:14 UTC (rev 294743)
+++ trunk/Source/WebCore/rendering/RenderFlexibleBox.h 2022-05-24 14:22:19 UTC (rev 294744)
@@ -91,6 +91,8 @@
enum class GapType { BetweenLines, BetweenItems };
LayoutUnit computeGap(GapType) const;
+ bool shouldApplyMinBlockSizeAutoForChild(const RenderBox&) const;
+
protected:
void computeIntrinsicLogicalWidths(LayoutUnit& minLogicalWidth, LayoutUnit& maxLogicalWidth) const override;
_______________________________________________
webkit-changes mailing list
[email protected]
https://lists.webkit.org/mailman/listinfo/webkit-changes
