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

Fixes layout of page toolbar on Wikipedia.
cubiclove · Aug 13, 2023 · b6f9f4c · b6f9f4c
1 parent 97ba1ff
commit b6f9f4c
Show file tree

Hide file tree

Showing 5 changed files with 94 additions and 16 deletions.
diff --git a/...bWeb/Layout/expected/block-and-inline/float-max-content-containing-block-flex-display.txt b/...bWeb/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>)
diff --git a/Tests/LibWeb/Layout/expected/block-and-inline/float-max-content-containing-block.txt b/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>)
diff --git a/...LibWeb/Layout/input/block-and-inline/float-max-content-containing-block-flex-display.html b/...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>
diff --git a/Tests/LibWeb/Layout/input/block-and-inline/float-max-content-containing-block.html b/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>
diff --git a/Userland/Libraries/LibWeb/Layout/BlockFormattingContext.cpp b/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 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_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) {
  // If 'width' is computed as 'auto', the used value is the "shrink-to-fit" width.
  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);
 
- // 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;
@@ -898,7 +901,6 @@ void BlockFormattingContext::layout_floating_box(Box const& box, BlockContainer
  VERIFY(box.is_floating());
 
  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);
 
@@ -957,7 +959,11 @@ void BlockFormattingContext::layout_floating_box(Box const& box, BlockContainer
  bool fits_next_to_preceding_float = false;
  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();
- 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 {
  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;