Merge pull request #1431 from WebPlatformForEmbedded/pgorszkowski/2.38/css-flexbox-incorrect-layout-with-max-height-and-flex-direction-column-and-justify-content-center

magomez · web-flow · commit d893a3ed1da3 · 2024-11-26T10:04:48.000+01:00
[css-flexbox] incorrect layout with max-height and flex-direction col…
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