Ladybird/ladybird
1
0
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird.git synced 2025-06-08 05:27:14 +09:00
Code Activity

LibWeb: Consider margins during fit-content sizing in BFC

Browse source 
`BlockFormattingContext::compute_width()` stores the left and right
margins in the layout state at the very end of the function. However,
before doing so, it calls `FormattingContext::calculate_inner_width()`
which ends up calling `FormattingContext::calculate_stretch_fit_width()`
if the current box has `width: fit-content`.

Due to this, `calculate_stretch_fit_width()` would always see the
margins from the layout state as zero and therefore not take them into
account. Subsequently, the calculated width ended up being wrong.

Saving margins on the layout state earlier, before calling
`calculate_inner_width()`, makes sure that the width is calculated
correctly.
This commit is contained in:
InvalidUsernameException 2025-06-04 20:19:21 +02:00 • committed by Alexander Kalenik
parent ede84567f1
commit 1d0cfdc839
Notes: github-actions[bot] 2025-06-05 15:57:15 +00:00
3 changed files with 72 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -208,12 +208,14 @@ void BlockFormattingContext::compute_width(Box const& box, AvailableSpace const&
auto zero_value = CSS::Length::make_px(0);
auto margin_left = CSS::Length::make_auto();
auto margin_right = CSS::Length::make_auto();
auto margin_left = computed_values.margin().left().resolved(box, width_of_containing_block);
auto margin_right = computed_values.margin().right().resolved(box, width_of_containing_block);
auto const padding_left = computed_values.padding().left().resolved(box, width_of_containing_block).to_px(box);
auto const padding_right = computed_values.padding().right().resolved(box, width_of_containing_block).to_px(box);
auto& box_state = m_state.get_mutable(box);
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;

53
Tests/LibWeb/Layout/expected/bfc-fit-content-width-with-margin.txt Normal file
View file

@ -0,0 +1,53 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x304 [BFC] children: not-inline
BlockContainer <body> at (8,8) content-size 784x288 children: not-inline
BlockContainer <div.margin-left> at (243.1875,8) content-size 548.8125x162 children: inline
frag 0 from TextNode start: 1, length: 62, rect: [243.1875,8 515.390625x18] baseline: 13.796875
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce"
frag 1 from TextNode start: 64, length: 68, rect: [243.1875,26 543.484375x18] baseline: 13.796875
"cursus est eget nisl porta, id vulputate velit imperdiet. Vestibulum"
frag 2 from TextNode start: 133, length: 69, rect: [243.1875,44 533.765625x18] baseline: 13.796875
"mollis ligula sit amet ligula aliquam, vitae vulputate magna iaculis."
frag 3 from TextNode start: 203, length: 68, rect: [243.1875,62 533.015625x18] baseline: 13.796875
"Nulla et augue fringilla, molestie nulla blandit, condimentum risus."
frag 4 from TextNode start: 272, length: 58, rect: [243.1875,80 488.140625x18] baseline: 13.796875
"Suspendisse lectus augue, sodales vitae metus ac, interdum"
frag 5 from TextNode start: 331, length: 63, rect: [243.1875,98 526.546875x18] baseline: 13.796875
"volutpat arcu. Aenean eu placerat risus, at dictum lectus. Nunc"
frag 6 from TextNode start: 395, length: 64, rect: [243.1875,116 524.5x18] baseline: 13.796875
"maximus est eu risus porta tincidunt. Cras nec felis tellus. Sed"
frag 7 from TextNode start: 460, length: 66, rect: [243.1875,134 523.078125x18] baseline: 13.796875
"euismod ultricies ipsum, eget ultricies nisl dignissim nec. Mauris"
frag 8 from TextNode start: 527, length: 21, rect: [243.1875,152 178.53125x18] baseline: 13.796875
"aliquet rhoncus urna."
TextNode <#text>
BlockContainer <(anonymous)> at (8,170) content-size 784x0 children: inline
TextNode <#text>
BlockContainer <div.margin-right> at (8,170) content-size 548.8125x126 children: inline
frag 0 from TextNode start: 1, length: 63, rect: [8,170 531.765625x18] baseline: 13.796875
"Pellentesque quis vulputate urna. Mauris semper elementum velit"
frag 1 from TextNode start: 65, length: 62, rect: [8,188 529.640625x18] baseline: 13.796875
"vitae accumsan. Fusce aliquam nunc non suscipit laoreet. Etiam"
frag 2 from TextNode start: 128, length: 66, rect: [8,206 532.9375x18] baseline: 13.796875
"hendrerit sollicitudin nisl non placerat. Cras vulputate, nunc non"
frag 3 from TextNode start: 195, length: 64, rect: [8,224 515.765625x18] baseline: 13.796875
"fringilla dapibus, nisl eros volutpat enim, eget consequat lacus"
frag 4 from TextNode start: 260, length: 62, rect: [8,242 513.421875x18] baseline: 13.796875
"turpis imperdiet mi. Aenean vitae consequat tellus, eu sodales"
frag 5 from TextNode start: 323, length: 57, rect: [8,260 481.359375x18] baseline: 13.796875
"tortor. Duis euismod, odio auctor varius auctor, mi augue"
frag 6 from TextNode start: 381, length: 56, rect: [8,278 469.453125x18] baseline: 13.796875
"faucibus erat, non euismod turpis metus sit amet turpis."
TextNode <#text>
BlockContainer <(anonymous)> at (8,296) content-size 784x0 children: inline
TextNode <#text>
ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x304]
PaintableWithLines (BlockContainer<BODY>) [8,8 784x288]
PaintableWithLines (BlockContainer<DIV>.margin-left) [243.1875,8 548.8125x162]
TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer(anonymous)) [8,170 784x0]
PaintableWithLines (BlockContainer<DIV>.margin-right) [8,170 548.8125x126]
TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer(anonymous)) [8,296 784x0]

15
Tests/LibWeb/Layout/input/bfc-fit-content-width-with-margin.html Normal file
View file

@ -0,0 +1,15 @@
<!DOCTYPE html>
<style>
div {
background-color: lightgrey;
width: fit-content;
}
.margin-left { margin-left: 30%; }
.margin-right { margin-right: 30%; }
</style>
<div class="margin-left">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce cursus est eget nisl porta, id vulputate velit imperdiet. Vestibulum mollis ligula sit amet ligula aliquam, vitae vulputate magna iaculis. Nulla et augue fringilla, molestie nulla blandit, condimentum risus. Suspendisse lectus augue, sodales vitae metus ac, interdum volutpat arcu. Aenean eu placerat risus, at dictum lectus. Nunc maximus est eu risus porta tincidunt. Cras nec felis tellus. Sed euismod ultricies ipsum, eget ultricies nisl dignissim nec. Mauris aliquet rhoncus urna.
</div>
<div class="margin-right">
Pellentesque quis vulputate urna. Mauris semper elementum velit vitae accumsan. Fusce aliquam nunc non suscipit laoreet. Etiam hendrerit sollicitudin nisl non placerat. Cras vulputate, nunc non fringilla dapibus, nisl eros volutpat enim, eget consequat lacus turpis imperdiet mi. Aenean vitae consequat tellus, eu sodales tortor. Duis euismod, odio auctor varius auctor, mi augue faucibus erat, non euismod turpis metus sit amet turpis.
</div>