0ct0pu5/ladybird
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 2

LibWeb: Resolve vertical padding of inline elements

Browse source
This commit is contained in:
goldenzach 2024-04-23 13:34:09 -06:00 • committed by Aliaksandr Kalenik
parent 988c8451d4
commit 65eb7699f4
Notes: sideshowbarker 2024-07-17 05:58:46 +09:00
4 changed files with 32 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
Tests/LibWeb/Layout/expected/span-with-padding.txt Normal file
View file

@ -0,0 +1,13 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x36 [BFC] children: not-inline
BlockContainer <body> at (8,8) content-size 784x20 children: inline
InlineNode <span>
frag 0 from TextNode start: 0, length: 4, rect: [111,8 42.28125x20] baseline: 15.390625
"Text"
TextNode <#text>
ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x36]
PaintableWithLines (BlockContainer<BODY>) [8,8 784x20]
InlinePaintable (InlineNode<SPAN>)
TextPaintable (TextNode<#text>)

10
Tests/LibWeb/Layout/input/span-with-padding.html Normal file
View file

@ -0,0 +1,10 @@
<!DOCTYPE html><style>
span {
background:#000000;
padding:25px 50px 75px 100px;
font-size:18px;
color:#FFFFFF;
border-style: solid;
border-color: #1111FF;
}
</style><span>Text</span>

3
Userland/Libraries/LibWeb/Layout/InlineLevelIterator.cpp
View file

@ -38,6 +38,9 @@ void InlineLevelIterator::enter_node_with_box_model_metrics(Layout::NodeWithStyl
used_values.border_left = computed_values.border_left().width;
used_values.padding_left = computed_values.padding().left().to_px(node, m_containing_block_used_values.content_width());
used_values.padding_bottom = computed_values.padding().bottom().to_px(node, m_containing_block_used_values.content_width());
used_values.padding_top = computed_values.padding().top().to_px(node, m_containing_block_used_values.content_width());
m_extra_leading_metrics->margin += used_values.margin_left;
m_extra_leading_metrics->border += used_values.border_left;
m_extra_leading_metrics->padding += used_values.padding_left;

6
Userland/Libraries/LibWeb/Painting/InlinePaintable.cpp
View file

@ -92,6 +92,9 @@ void InlinePaintable::paint(PaintContext& context, PaintPhase phase) const
absolute_fragment_rect.set_width(absolute_fragment_rect.width() + extra_end_width);
}
absolute_fragment_rect.translate_by(0, -box_model().padding.top);
absolute_fragment_rect.set_height(absolute_fragment_rect.height() + box_model().padding.top + box_model().padding.bottom);
auto const& border_radii_data = fragment.border_radii_data();
paint_background(context, layout_node(), absolute_fragment_rect, computed_values().background_color(), computed_values().image_rendering(), &computed_values().background_layers(), border_radii_data);
@ -137,6 +140,9 @@ void InlinePaintable::paint(PaintContext& context, PaintPhase phase) const
absolute_fragment_rect.set_width(absolute_fragment_rect.width() + extra_end_width);
}
absolute_fragment_rect.translate_by(0, -box_model().padding.top);
absolute_fragment_rect.set_height(absolute_fragment_rect.height() + box_model().padding.top + box_model().padding.bottom);
auto borders_rect = absolute_fragment_rect.inflated(borders_data.top.width, borders_data.right.width, borders_data.bottom.width, borders_data.left.width);
auto border_radii_data = fragment.border_radii_data();