LibWeb: Stop changing width of block-level flex containers during layout

If the parent BFC can come up with a nice stretch-fit width for the flex container, it will have already done so *before* even entering flex layout. There's no need to do it again, midway through the flex layout algorithm. This wasn't just unnecessary, but we were also doing it incorrectly and not taking margins into account when calculating the amount of available space for stretch-fit. This led to oversized flex containers in the presence of negative margins. Fixes SerenityOS#18614
emilitzerjo · May 8, 2023 · 1ebae7a · 1ebae7a
1 parent 771208d
commit 1ebae7a
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 4 deletions.
diff --git a/...line/max-width-on-child-block-with-width-auto-contributes-to-intrinsic-size-of-parent.txt b/...line/max-width-on-child-block-with-width-auto-contributes-to-intrinsic-size-of-parent.txt
@@ -1,6 +1,6 @@
 Viewport <#document> at (0,0) content-size 800x600 children: not-inline
   BlockContainer <html> at (1,1) content-size 798x39.46875 [BFC] children: not-inline
-    Box <body.outer> at (10,10) content-size 764x21.46875 flex-container(row) [FFC] children: not-inline
+    Box <body.outer> at (10,10) content-size 780x21.46875 flex-container(row) [FFC] children: not-inline
       BlockContainer <div.middle> at (11,11) content-size 202x19.46875 flex-item [BFC] children: not-inline
         BlockContainer <div.inner> at (12,12) content-size 200x17.46875 children: inline
           line 0 width: 45.15625, height: 17.46875, bottom: 17.46875, baseline: 13.53125

diff --git a/...b/Layout/expected/flex/flex-container-with-max-width-and-negative-margin-in-same-axis.txt b/...b/Layout/expected/flex/flex-container-with-max-width-and-negative-margin-in-same-axis.txt
@@ -0,0 +1,7 @@
+Viewport <#document> at (0,0) content-size 800x600 children: not-inline
+  BlockContainer <html> at (0,0) content-size 800x116 [BFC] children: not-inline
+    BlockContainer <body> at (8,8) content-size 784x100 children: not-inline
+      BlockContainer <div#container-of-flex> at (8,8) content-size 100x100 children: not-inline
+        Box <div#flex> at (-92,8) content-size 200x100 flex-container(row) [FFC] children: not-inline
+          BlockContainer <(anonymous)> at (-92,8) content-size 0x0 [BFC] children: inline
+            TextNode <#text>
diff --git a/Tests/LibWeb/Layout/expected/table/in-auto-height-flex-item.txt b/Tests/LibWeb/Layout/expected/table/in-auto-height-flex-item.txt
@@ -1,6 +1,6 @@
 Viewport <#document> at (0,0) content-size 800x600 children: not-inline
   BlockContainer <html> at (1,1) content-size 798x39.46875 [BFC] children: not-inline
-    Box <body> at (10,10) content-size 764x21.46875 flex-container(row) [FFC] children: not-inline
+    Box <body> at (10,10) content-size 780x21.46875 flex-container(row) [FFC] children: not-inline
       BlockContainer <div.upper> at (11,11) content-size 41.78125x19.46875 flex-item [BFC] children: not-inline
         TableWrapper <(anonymous)> at (11,11) content-size 41.78125x19.46875 [BFC] children: not-inline
           TableBox <(anonymous)> at (11,11) content-size 41.78125x19.46875 [TFC] children: not-inline

diff --git a/...Web/Layout/input/flex/flex-container-with-max-width-and-negative-margin-in-same-axis.html b/...Web/Layout/input/flex/flex-container-with-max-width-and-negative-margin-in-same-axis.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html><html><head><style>
+#container-of-flex {
+    max-width: 100px;
+}
+
+#flex {
+    display: flex;
+    margin-left: -100px;
+    background-color: orange;
+    height: 100px;
+}
+</style></head><body><div id="container-of-flex"><div id="flex"> </div>
diff --git a/Userland/Libraries/LibWeb/Layout/BlockFormattingContext.cpp b/Userland/Libraries/LibWeb/Layout/BlockFormattingContext.cpp
@@ -1056,9 +1056,10 @@ CSSPixels BlockFormattingContext::greatest_child_width(Box const& box) const
     return max_width;
 }
 
-void BlockFormattingContext::determine_width_of_child(Box const& box, AvailableSpace const& available_space)
+void BlockFormattingContext::determine_width_of_child(Box const&, AvailableSpace const&)
 {
-    compute_width(box, available_space);
+    // NOTE: We don't do anything here, since we'll have already determined the width of the child
+    //       before recursing into nested layout within the child.
 }
 
 void BlockFormattingContext::determine_height_of_child(Box const& box, AvailableSpace const& available_space)