[css-flexbox] incorrect layout with max-height and flex-direction column and justify-content center

pgorszkowski-igalia · pgorszkowski-igalia · commit cb045d2934cd · 2024-11-26T09:43:08.000+01:00
https://bugs.webkit.org/show_bug.cgi?id=282036 Reviewed by NOBODY (OOPS!). After calculation of the flex item size and adjusting it to min/max size of the flex item we should also check how the calculated size corresponds to specified max size of the whole container. In case the adjusted flex item size is bigger than the max size of the whole container we should use the flex item size calculated before adjusting to flex item min/max size. There is new layout test which tests the problem. * LayoutTests/css3/flexbox/nested-flexbox-max-height-expected.txt: Added. * LayoutTests/css3/flexbox/nested-flexbox-max-height.html: Added. * Source/WebCore/rendering/RenderFlexibleBox.cpp: (WebCore::RenderFlexibleBox::resolveFlexibleLengths):
diff --git a/LayoutTests/css3/flexbox/nested-flexbox-max-height-expected.txt b/LayoutTests/css3/flexbox/nested-flexbox-max-height-expected.txt
@@ -0,0 +1,5 @@
+Only red square should be visible
+
+
+PASS #container 1
+A
diff --git a/LayoutTests/css3/flexbox/nested-flexbox-max-height.html b/LayoutTests/css3/flexbox/nested-flexbox-max-height.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<link href="resources/flexbox.css" rel="stylesheet">
+<script src="../../resources/testharness.js"></script>
+<script src="../../resources/testharnessreport.js"></script>
+<script src="../../resources/check-layout-th.js"></script>
+<script>
+function run() {
+  checkLayout('#container');
+}
+</script>
+<body onload="run()">
+<p>Only red square should be visible</p>
+<div id="log"></div>
+<div id="container" class="flexbox column" style="max-height: 100px; height: 100px; width: 100px; background: green">
+    <div class="flexbox column justify-content-center" style="height: 400px; background: red" data-expected-height="100">A</div>
+</div>
diff --git a/Source/WebCore/rendering/RenderFlexibleBox.cpp b/Source/WebCore/rendering/RenderFlexibleBox.cpp
@@ -1587,6 +1587,21 @@ bool RenderFlexibleBox::resolveFlexibleLengths(FlexSign flexSign, Vector<FlexIte
             childSize += LayoutUnit::fromFloatRound(extraSpace);
 
         LayoutUnit adjustedChildSize = flexItem.constrainSizeByMinMax(childSize);
+
+        // Adjust flex item size with the specified container max size.
+        auto maximumSize = isHorizontalFlow() ? style().maxWidth() : style().maxHeight();
+        const auto minimumSize = isHorizontalFlow() ? style().minWidth() : style().minHeight();
+        if (maximumSize.isFixed()) {
+            // The fixed min height/width should be considered as maximum size if it is bigger than fixed max height/width.
+            if (minimumSize.isFixed() && minimumSize.value() > maximumSize.value())
+                maximumSize = minimumSize;
+
+            // If the size of flex item adjusted to its min/max size is bigger than the maximum size of the container, then
+            // we use flext item size calculated before adjusting the min/max size of the flex item.
+            if (adjustedChildSize > LayoutUnit { maximumSize.value() })
+                adjustedChildSize = std::max(LayoutUnit { }, childSize);
+        }
+
         ASSERT(adjustedChildSize >= 0);
         flexItem.flexedContentSize = adjustedChildSize;
         usedFreeSpace += adjustedChildSize - flexItem.flexBaseContentSize;

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +Only red square should be visible
++
++
 +PASS #container 1
 +A