We use cookies to ensure you get the best experience on our website
ホーム エクスプローラ ヘルプ
登録 サインイン
0ct0pu5
/
ladybird
1
0
フォーク 0
ファイル 課題 0 プルリクエスト 0 Wiki
ソースを参照

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 年 前
親
771208d2e2
コミット
1ebae7a779
5 ファイル変更、24 行追加、4 行削除
分割表示 差分情報を表示
  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
ファイルの表示 

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

+ 7 - 0
Tests/LibWeb/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>

+ 1 - 1
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

+ 12 - 0
Tests/LibWeb/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>

+ 3 - 2
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)

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