From 11fa5fdd47bfa4a75e6c53f9c2d469e8d0de65e5 Mon Sep 17 00:00:00 2001 From: Andreas Kling Date: Sun, 13 Jul 2025 16:38:33 +0200 Subject: [PATCH] LibWeb: Honor box-sizing for block-level replaced element widths Before this change, we were always behaving as if box-sizing were content-box for block-level replaced element widths. This fixes the squishy logo on https://videolan.org/ --- .../LibWeb/Layout/BlockFormattingContext.cpp | 3 ++- .../img-as-block-with-box-sizing-border-box.txt | 15 +++++++++++++++ .../img-as-block-with-box-sizing-border-box.html | 14 ++++++++++++++ 3 files changed, 31 insertions(+), 1 deletion(-) create mode 100644 Tests/LibWeb/Layout/expected/block-and-inline/img-as-block-with-box-sizing-border-box.txt create mode 100644 Tests/LibWeb/Layout/input/block-and-inline/img-as-block-with-box-sizing-border-box.html diff --git a/Libraries/LibWeb/Layout/BlockFormattingContext.cpp b/Libraries/LibWeb/Layout/BlockFormattingContext.cpp index 7ea418b94df..3794bf7ddfc 100644 --- a/Libraries/LibWeb/Layout/BlockFormattingContext.cpp +++ b/Libraries/LibWeb/Layout/BlockFormattingContext.cpp @@ -432,13 +432,14 @@ void BlockFormattingContext::compute_width_for_block_level_replaced_element_in_n margin_right = zero_value; auto& box_state = m_state.get_mutable(box); - box_state.set_content_width(compute_width_for_replaced_element(box, available_space)); + auto width = compute_width_for_replaced_element(box, available_space); box_state.margin_left = margin_left.to_px(box); box_state.margin_right = margin_right.to_px(box); box_state.border_left = computed_values.border_left().width; box_state.border_right = computed_values.border_right().width; box_state.padding_left = padding_left; box_state.padding_right = padding_right; + box_state.set_content_width(calculate_inner_width(box, available_space.width, CSS::Size::make_px(width))); } void BlockFormattingContext::resolve_used_height_if_not_treated_as_auto(Box const& box, AvailableSpace const& available_space) diff --git a/Tests/LibWeb/Layout/expected/block-and-inline/img-as-block-with-box-sizing-border-box.txt b/Tests/LibWeb/Layout/expected/block-and-inline/img-as-block-with-box-sizing-border-box.txt new file mode 100644 index 00000000000..417a6ef2a81 --- /dev/null +++ b/Tests/LibWeb/Layout/expected/block-and-inline/img-as-block-with-box-sizing-border-box.txt @@ -0,0 +1,15 @@ +Viewport <#document> at (0,0) content-size 800x600 children: not-inline + BlockContainer at (0,0) content-size 800x416 [BFC] children: not-inline + BlockContainer at (8,8) content-size 400x400 floating [BFC] children: not-inline + ImageBox at (58,8) content-size 300x400 children: not-inline + BlockContainer <(anonymous)> at (8,408) content-size 400x0 children: inline + TextNode <#text> + +ViewportPaintable (Viewport<#document>) [0,0 800x600] + PaintableWithLines (BlockContainer) [0,0 800x416] + PaintableWithLines (BlockContainer) [8,8 400x400] + ImagePaintable (ImageBox) [8,8 400x400] + PaintableWithLines (BlockContainer(anonymous)) [8,408 400x0] + +SC for Viewport<#document> [0,0 800x600] [children: 1] (z-index: auto) + SC for BlockContainer [0,0 800x416] [children: 0] (z-index: auto) diff --git a/Tests/LibWeb/Layout/input/block-and-inline/img-as-block-with-box-sizing-border-box.html b/Tests/LibWeb/Layout/input/block-and-inline/img-as-block-with-box-sizing-border-box.html new file mode 100644 index 00000000000..382a07fd75a --- /dev/null +++ b/Tests/LibWeb/Layout/input/block-and-inline/img-as-block-with-box-sizing-border-box.html @@ -0,0 +1,14 @@ +