Explorar o código

LibWeb: Fix handling of max-content containing block for floating box

Fixes layout of page toolbar on Wikipedia.
Andi Gallo hai 1 ano
pai
achega
b6f9f4c28c

+ 27 - 0
Tests/LibWeb/Layout/expected/block-and-inline/float-max-content-containing-block-flex-display.txt

@@ -0,0 +1,27 @@
+Viewport <#document> at (0,0) content-size 800x600 children: not-inline
+  BlockContainer <html> at (0,0) content-size 800x600 [BFC] children: not-inline
+    BlockContainer <body> at (8,8) content-size 784x0 children: not-inline
+      Box <div.display_flex> at (8,8) content-size 23.609375x17.46875 floating flex-container(row) [FFC] children: not-inline
+        BlockContainer <div> at (8,8) content-size 23.609375x17.46875 flex-item [BFC] children: not-inline
+          BlockContainer <div> at (8,8) content-size 23.609375x17.46875 floating [BFC] children: not-inline
+            BlockContainer <span> at (8,8) content-size 14.265625x17.46875 floating [BFC] children: inline
+              line 0 width: 14.265625, height: 17.46875, bottom: 17.46875, baseline: 13.53125
+                frag 0 from TextNode start: 0, length: 1, rect: [8,8 14.265625x17.46875]
+                  "A"
+              TextNode <#text>
+            BlockContainer <span> at (22.265625,8) content-size 9.34375x17.46875 floating [BFC] children: inline
+              line 0 width: 9.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
+                frag 0 from TextNode start: 0, length: 1, rect: [22.265625,8 9.34375x17.46875]
+                  "B"
+              TextNode <#text>
+
+PaintableWithLines (Viewport<#document>) [0,0 800x600]
+  PaintableWithLines (BlockContainer<HTML>) [0,0 800x600]
+    PaintableWithLines (BlockContainer<BODY>) [8,8 784x0] overflow: [8,8 23.609375x17.46875]
+      PaintableBox (Box<DIV>.display_flex) [8,8 23.609375x17.46875]
+        PaintableWithLines (BlockContainer<DIV>) [8,8 23.609375x17.46875]
+          PaintableWithLines (BlockContainer<DIV>) [8,8 23.609375x17.46875]
+            PaintableWithLines (BlockContainer<SPAN>) [8,8 14.265625x17.46875]
+              TextPaintable (TextNode<#text>)
+            PaintableWithLines (BlockContainer<SPAN>) [22.265625,8 9.34375x17.46875]
+              TextPaintable (TextNode<#text>)

+ 23 - 0
Tests/LibWeb/Layout/expected/block-and-inline/float-max-content-containing-block.txt

@@ -0,0 +1,23 @@
+Viewport <#document> at (0,0) content-size 800x600 children: not-inline
+  BlockContainer <html> at (0,0) content-size 800x600 [BFC] children: not-inline
+    BlockContainer <body> at (8,8) content-size 784x0 children: not-inline
+      BlockContainer <div> at (8,8) content-size 23.609375x17.46875 floating [BFC] children: not-inline
+        BlockContainer <span> at (8,8) content-size 14.265625x17.46875 floating [BFC] children: inline
+          line 0 width: 14.265625, height: 17.46875, bottom: 17.46875, baseline: 13.53125
+            frag 0 from TextNode start: 0, length: 1, rect: [8,8 14.265625x17.46875]
+              "A"
+          TextNode <#text>
+        BlockContainer <span> at (22.265625,8) content-size 9.34375x17.46875 floating [BFC] children: inline
+          line 0 width: 9.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
+            frag 0 from TextNode start: 0, length: 1, rect: [22.265625,8 9.34375x17.46875]
+              "B"
+          TextNode <#text>
+
+PaintableWithLines (Viewport<#document>) [0,0 800x600]
+  PaintableWithLines (BlockContainer<HTML>) [0,0 800x600]
+    PaintableWithLines (BlockContainer<BODY>) [8,8 784x0] overflow: [8,8 23.609375x17.46875]
+      PaintableWithLines (BlockContainer<DIV>) [8,8 23.609375x17.46875]
+        PaintableWithLines (BlockContainer<SPAN>) [8,8 14.265625x17.46875]
+          TextPaintable (TextNode<#text>)
+        PaintableWithLines (BlockContainer<SPAN>) [22.265625,8 9.34375x17.46875]
+          TextPaintable (TextNode<#text>)

+ 13 - 0
Tests/LibWeb/Layout/input/block-and-inline/float-max-content-containing-block-flex-display.html

@@ -0,0 +1,13 @@
+<style>
+    .display_flex {
+        display: flex;
+    }
+
+    div {
+        float: left;
+    }
+
+    span {
+        float: left;
+    }
+</style><div class="display_flex"><div><div><span>A</span><span>B</span></div></div></div>

+ 9 - 0
Tests/LibWeb/Layout/input/block-and-inline/float-max-content-containing-block.html

@@ -0,0 +1,9 @@
+<style>
+    div {
+        float: left;
+    }
+
+    span {
+        float: left;
+    }
+</style><div><span>A</span><span>B</span></div>

+ 22 - 16
Userland/Libraries/LibWeb/Layout/BlockFormattingContext.cpp

@@ -290,10 +290,7 @@ void BlockFormattingContext::compute_width_for_floating_box(Box const& box, Avai
     auto& computed_values = box.computed_values();
     auto& computed_values = box.computed_values();
 
 
     auto zero_value = CSS::Length::make_px(0);
     auto zero_value = CSS::Length::make_px(0);
-    auto width_of_containing_block = available_space.width.to_px_or_zero();
-    auto width_of_containing_block_as_length_for_resolve = CSS::Length::make_px(width_of_containing_block);
-    if (!available_space.width.is_definite())
-        width_of_containing_block_as_length_for_resolve = CSS::Length::make_px(0);
+    auto width_of_containing_block_as_length_for_resolve = CSS::Length::make_px(available_space.width.to_px_or_zero());
 
 
     auto margin_left = computed_values.margin().left().resolved(box, width_of_containing_block_as_length_for_resolve);
     auto margin_left = computed_values.margin().left().resolved(box, width_of_containing_block_as_length_for_resolve);
     auto margin_right = computed_values.margin().right().resolved(box, width_of_containing_block_as_length_for_resolve);
     auto margin_right = computed_values.margin().right().resolved(box, width_of_containing_block_as_length_for_resolve);
@@ -309,18 +306,24 @@ void BlockFormattingContext::compute_width_for_floating_box(Box const& box, Avai
     auto compute_width = [&](auto width) {
     auto compute_width = [&](auto width) {
         // If 'width' is computed as 'auto', the used value is the "shrink-to-fit" width.
         // If 'width' is computed as 'auto', the used value is the "shrink-to-fit" width.
         if (width.is_auto()) {
         if (width.is_auto()) {
-
-            // Find the available width: in this case, this is the width of the containing
-            // block minus the used values of 'margin-left', 'border-left-width', 'padding-left',
-            // 'padding-right', 'border-right-width', 'margin-right', and the widths of any relevant scroll bars.
-            auto available_width = width_of_containing_block
-                - margin_left.to_px(box) - computed_values.border_left().width - padding_left
-                - padding_right - computed_values.border_right().width - margin_right.to_px(box);
-
             auto result = calculate_shrink_to_fit_widths(box);
             auto result = calculate_shrink_to_fit_widths(box);
 
 
-            // Then the shrink-to-fit width is: min(max(preferred minimum width, available width), preferred width).
-            width = CSS::Length::make_px(min(max(result.preferred_minimum_width, available_width), result.preferred_width));
+            if (available_space.width.is_definite()) {
+                // Find the available width: in this case, this is the width of the containing
+                // block minus the used values of 'margin-left', 'border-left-width', 'padding-left',
+                // 'padding-right', 'border-right-width', 'margin-right', and the widths of any relevant scroll bars.
+                auto available_width = available_space.width.to_px_or_zero()
+                    - margin_left.to_px(box) - computed_values.border_left().width - padding_left
+                    - padding_right - computed_values.border_right().width - margin_right.to_px(box);
+                // Then the shrink-to-fit width is: min(max(preferred minimum width, available width), preferred width).
+                width = CSS::Length::make_px(min(max(result.preferred_minimum_width, available_width), result.preferred_width));
+            } else if (available_space.width.is_indefinite() || available_space.width.is_max_content()) {
+                // Fold the formula for shrink-to-fit width for indefinite and max-content available width.
+                width = CSS::Length::make_px(result.preferred_width);
+            } else {
+                // Fold the formula for shrink-to-fit width for min-content available width.
+                width = CSS::Length::make_px(min(result.preferred_minimum_width, result.preferred_width));
+            }
         }
         }
 
 
         return width;
         return width;
@@ -898,7 +901,6 @@ void BlockFormattingContext::layout_floating_box(Box const& box, BlockContainer
     VERIFY(box.is_floating());
     VERIFY(box.is_floating());
 
 
     auto& box_state = m_state.get_mutable(box);
     auto& box_state = m_state.get_mutable(box);
-    CSSPixels width_of_containing_block = available_space.width.to_px_or_zero();
 
 
     resolve_vertical_box_model_metrics(box);
     resolve_vertical_box_model_metrics(box);
 
 
@@ -957,7 +959,11 @@ void BlockFormattingContext::layout_floating_box(Box const& box, BlockContainer
                 bool fits_next_to_preceding_float = false;
                 bool fits_next_to_preceding_float = false;
                 if (side == FloatSide::Left) {
                 if (side == FloatSide::Left) {
                     tentative_offset_from_edge = preceding_float.offset_from_edge + preceding_float_state.content_width() + preceding_float_state.margin_box_right() + box_state.margin_box_left();
                     tentative_offset_from_edge = preceding_float.offset_from_edge + preceding_float_state.content_width() + preceding_float_state.margin_box_right() + box_state.margin_box_left();
-                    fits_next_to_preceding_float = (tentative_offset_from_edge + box_state.content_width() + box_state.margin_box_right()) <= width_of_containing_block;
+                    if (available_space.width.is_definite()) {
+                        fits_next_to_preceding_float = (tentative_offset_from_edge + box_state.content_width() + box_state.margin_box_right()) <= available_space.width.to_px_or_zero();
+                    } else if (available_space.width.is_max_content() || available_space.width.is_indefinite()) {
+                        fits_next_to_preceding_float = true;
+                    }
                 } else {
                 } else {
                     tentative_offset_from_edge = preceding_float.offset_from_edge + preceding_float_state.margin_box_left() + box_state.margin_box_right() + box_state.content_width();
                     tentative_offset_from_edge = preceding_float.offset_from_edge + preceding_float_state.margin_box_left() + box_state.margin_box_right() + box_state.content_width();
                     fits_next_to_preceding_float = tentative_offset_from_edge >= 0;
                     fits_next_to_preceding_float = tentative_offset_from_edge >= 0;