mirrors/ladybird
0
0
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird.git synced 2025-07-29 12:19:54 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 9

LibWeb: Honor box-sizing for block-level replaced element widths

Browse source 
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/
This commit is contained in:
Andreas Kling 2025-07-13 16:38:33 +02:00 • committed by Jelle Raaijmakers
commit 11fa5fdd47
Notes: github-actions[bot] 2025-07-14 09:17:25 +00:00
3 changed files with 31 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

3
Libraries/LibWeb/Layout/BlockFormattingContext.cpp
View file

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

15
Tests/LibWeb/Layout/expected/block-and-inline/img-as-block-with-box-sizing-border-box.txt Normal file
View file

@ -0,0 +1,15 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x416 [BFC] children: not-inline
BlockContainer <body> at (8,8) content-size 400x400 floating [BFC] children: not-inline
ImageBox <img> 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<HTML>) [0,0 800x416]
PaintableWithLines (BlockContainer<BODY>) [8,8 400x400]
ImagePaintable (ImageBox<IMG>) [8,8 400x400]
PaintableWithLines (BlockContainer(anonymous)) [8,408 400x0]
SC for Viewport<#document> [0,0 800x600] [children: 1] (z-index: auto)
SC for BlockContainer<HTML> [0,0 800x416] [children: 0] (z-index: auto)

14
Tests/LibWeb/Layout/input/block-and-inline/img-as-block-with-box-sizing-border-box.html Normal file
View file

@ -0,0 +1,14 @@
<!doctype html><style>
* { outline: 1px solid black; }
body {
float: left;
}
img {
display: block;
padding-left: 50px;
padding-right: 50px;
width: 400px;
height: 400px;
box-sizing: border-box;
}
</style><body><img src="../400.png" />