diff --git a/Libraries/LibWeb/Layout/BlockFormattingContext.cpp b/Libraries/LibWeb/Layout/BlockFormattingContext.cpp index 3729ae7fb98..05b18c5b7a8 100644 --- a/Libraries/LibWeb/Layout/BlockFormattingContext.cpp +++ b/Libraries/LibWeb/Layout/BlockFormattingContext.cpp @@ -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; diff --git a/Tests/LibWeb/Layout/expected/bfc-fit-content-width-with-margin.txt b/Tests/LibWeb/Layout/expected/bfc-fit-content-width-with-margin.txt new file mode 100644 index 00000000000..a0a9c603b7a --- /dev/null +++ b/Tests/LibWeb/Layout/expected/bfc-fit-content-width-with-margin.txt @@ -0,0 +1,53 @@ +Viewport <#document> at (0,0) content-size 800x600 children: not-inline + BlockContainer at (0,0) content-size 800x304 [BFC] children: not-inline + BlockContainer at (8,8) content-size 784x288 children: not-inline + BlockContainer 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 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) [0,0 800x304] + PaintableWithLines (BlockContainer) [8,8 784x288] + PaintableWithLines (BlockContainer
.margin-left) [243.1875,8 548.8125x162] + TextPaintable (TextNode<#text>) + PaintableWithLines (BlockContainer(anonymous)) [8,170 784x0] + PaintableWithLines (BlockContainer
.margin-right) [8,170 548.8125x126] + TextPaintable (TextNode<#text>) + PaintableWithLines (BlockContainer(anonymous)) [8,296 784x0] diff --git a/Tests/LibWeb/Layout/input/bfc-fit-content-width-with-margin.html b/Tests/LibWeb/Layout/input/bfc-fit-content-width-with-margin.html new file mode 100644 index 00000000000..563a63c137e --- /dev/null +++ b/Tests/LibWeb/Layout/input/bfc-fit-content-width-with-margin.html @@ -0,0 +1,15 @@ + + +
+ 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. +
+
+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. +