We use cookies to ensure you get the best experience on our website
Etusivu Tutki Apua
Rekisteröidy Kirjaudu sisään
0ct0pu5
/
ladybird
1
0
Fork 0
Tiedostot Ongelmat 0 Pull-pyynnöt 0 Wiki
Selaa lähdekoodia

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 #18614
Andreas Kling 2 vuotta sitten
vanhempi
771208d2e2
commit
1ebae7a779
5 muutettua tiedostoa jossa 24 lisäystä ja 4 poistoa
Yhdistetty näkymä Näytä diff tilastot
  1. 1 1
      Tests/LibWeb/Layout/expected/block-and-inline/max-width-on-child-block-with-width-auto-contributes-to-intrinsic-size-of-parent.txt
  2. 7 0
      Tests/LibWeb/Layout/expected/flex/flex-container-with-max-width-and-negative-margin-in-same-axis.txt
  3. 1 1
      Tests/LibWeb/Layout/expected/table/in-auto-height-flex-item.txt
  4. 12 0
      Tests/LibWeb/Layout/input/flex/flex-container-with-max-width-and-negative-margin-in-same-axis.html
  5. 3 2
      Userland/Libraries/LibWeb/Layout/BlockFormattingContext.cpp

+ 1 - 1
Tests/LibWeb/Layout/expected/block-and-inline/max-width-on-child-block-with-width-auto-contributes-to-intrinsic-size-of-parent.txt
Näytä tiedosto 

@@ -1,6 +1,6 @@
 
 Viewport <#document> at (0,0) content-size 800x600 children: not-inline
 
 Viewport <#document> at (0,0) content-size 800x600 children: not-inline
 
   BlockContainer <html> at (1,1) content-size 798x39.46875 [BFC] 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.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
 
         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
 
           line 0 width: 45.15625, height: 17.46875, bottom: 17.46875, baseline: 13.53125

+ 7 - 0
Tests/LibWeb/Layout/expected/flex/flex-container-with-max-width-and-negative-margin-in-same-axis.txt
Näytä tiedosto 

@@ -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>

+ 1 - 1
Tests/LibWeb/Layout/expected/table/in-auto-height-flex-item.txt
Näytä tiedosto 

@@ -1,6 +1,6 @@
 
 Viewport <#document> at (0,0) content-size 800x600 children: not-inline
 
 Viewport <#document> at (0,0) content-size 800x600 children: not-inline
 
   BlockContainer <html> at (1,1) content-size 798x39.46875 [BFC] 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
 
       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
 
         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
 
           TableBox <(anonymous)> at (11,11) content-size 41.78125x19.46875 [TFC] children: not-inline

+ 12 - 0
Tests/LibWeb/Layout/input/flex/flex-container-with-max-width-and-negative-margin-in-same-axis.html
Näytä tiedosto 

@@ -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>

+ 3 - 2
Userland/Libraries/LibWeb/Layout/BlockFormattingContext.cpp
Näytä tiedosto 

@@ -1056,9 +1056,10 @@ CSSPixels BlockFormattingContext::greatest_child_width(Box const& box) const
 
     return max_width;
 
     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)
 
 void BlockFormattingContext::determine_height_of_child(Box const& box, AvailableSpace const& available_space)

Contact | Legal | Takedown | Status
Self-hosted public services - About
NibbleSpot by 0ct0pu5