mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2025-07-28 11:49:44 +00:00
LibWeb: Handle percentage font-size values
This commit is contained in:
Gingeh
Sam Atkins
parent
b46378085d
commit
b85a8a23a7
Notes:
github-actions[bot]
2025-06-24 11:44:06 +00:00
Author: https://github.com/Gingeh
Commit: b85a8a23a7
Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/5186
Reviewed-by: https://github.com/AtkinsSJ ✅
5 changed files with 77 additions and 2 deletions
|
|
@ -218,6 +218,8 @@ public:
|
|||
|
||||
[[nodiscard]] CSSPixels line_height() const { return *m_line_height; }
|
||||
void set_line_height(Badge<StyleComputer> const&, CSSPixels line_height) { m_line_height = line_height; }
|
||||
[[nodiscard]] CSSPixels font_size() const { return *m_font_size; }
|
||||
void set_font_size(Badge<StyleComputer> const&, CSSPixels font_size) { m_font_size = font_size; }
|
||||
|
||||
bool operator==(ComputedProperties const&) const;
|
||||
|
||||
|
|
@ -271,6 +273,7 @@ private:
|
|||
RefPtr<Gfx::Font const> m_first_available_computed_font;
|
||||
|
||||
Optional<CSSPixels> m_line_height;
|
||||
Optional<CSSPixels> m_font_size;
|
||||
|
||||
PseudoClassBitmap m_attempted_pseudo_class_matches;
|
||||
};
|
||||
|
|
|
|||
|
|
@ -2492,8 +2492,17 @@ void StyleComputer::absolutize_values(ComputedProperties& style, GC::Ptr<DOM::El
|
|||
style.first_available_computed_font().pixel_metrics()
|
||||
};
|
||||
|
||||
auto font_size = style.property(CSS::PropertyID::FontSize).as_length().length().to_px(viewport_rect(), font_metrics, m_root_element_font_metrics);
|
||||
// "A percentage value specifies an absolute font size relative to the parent element’s computed font-size. Negative percentages are invalid."
|
||||
auto& font_size_value_slot = style.m_property_values[to_underlying(CSS::PropertyID::FontSize)];
|
||||
if (font_size_value_slot && font_size_value_slot->is_percentage()) {
|
||||
auto parent_font_size = get_inherit_value(CSS::PropertyID::FontSize, element)->as_length().length().to_px(viewport_rect(), font_metrics, m_root_element_font_metrics);
|
||||
font_size_value_slot = LengthStyleValue::create(
|
||||
Length::make_px(CSSPixels::nearest_value_for(parent_font_size * font_size_value_slot->as_percentage().percentage().as_fraction())));
|
||||
}
|
||||
|
||||
auto font_size = font_size_value_slot->as_length().length().to_px(viewport_rect(), font_metrics, m_root_element_font_metrics);
|
||||
font_metrics.font_size = font_size;
|
||||
style.set_font_size({}, font_size);
|
||||
|
||||
// NOTE: Percentage line-height values are relative to the font-size of the element.
|
||||
// We have to resolve them right away, so that the *computed* line-height is ready for inheritance.
|
||||
|
|
|
|||
|
|
@ -385,7 +385,7 @@ void NodeWithStyle::apply_style(CSS::ComputedProperties const& computed_style)
|
|||
// m_font is used by Length::to_px() when resolving sizes against this layout node.
|
||||
// That's why it has to be set before everything else.
|
||||
computed_values.set_font_list(computed_style.computed_font_list());
|
||||
computed_values.set_font_size(computed_style.property(CSS::PropertyID::FontSize).as_length().length().to_px(*this));
|
||||
computed_values.set_font_size(computed_style.font_size());
|
||||
computed_values.set_font_weight(round_to<int>(computed_style.property(CSS::PropertyID::FontWeight).as_number().number()));
|
||||
computed_values.set_font_kerning(computed_style.font_kerning());
|
||||
computed_values.set_line_height(computed_style.line_height());
|
||||
|
|
|
|||
55
Tests/LibWeb/Layout/expected/percentage-font-size.txt
Normal file
55
Tests/LibWeb/Layout/expected/percentage-font-size.txt
Normal file
|
|
@ -0,0 +1,55 @@
|
|||
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
|
||||
BlockContainer <html> at (0,0) content-size 800x98 [BFC] children: not-inline
|
||||
BlockContainer <body> at (8,8) content-size 784x82 children: not-inline
|
||||
BlockContainer <(anonymous)> at (8,8) content-size 784x0 children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div> at (8,8) content-size 784x18 children: inline
|
||||
frag 0 from TextNode start: 0, length: 1, rect: [8,8 11.5625x18] baseline: 13.796875
|
||||
"X"
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> at (8,26) content-size 784x0 children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div> at (8,26) content-size 784x0 children: inline
|
||||
frag 0 from TextNode start: 0, length: 1, rect: [8,26 0x0] baseline: 0.296875
|
||||
"X"
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> at (8,26) content-size 784x0 children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div> at (8,26) content-size 784x9 children: inline
|
||||
frag 0 from TextNode start: 0, length: 1, rect: [8,26 5.78125x9] baseline: 6.90625
|
||||
"X"
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> at (8,35) content-size 784x0 children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div> at (8,35) content-size 784x18 children: inline
|
||||
frag 0 from TextNode start: 0, length: 1, rect: [8,35 11.5625x18] baseline: 13.796875
|
||||
"X"
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> at (8,53) content-size 784x0 children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div> at (8,53) content-size 784x37 children: inline
|
||||
frag 0 from TextNode start: 0, length: 1, rect: [8,53 23.125x37] baseline: 28.09375
|
||||
"X"
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> at (8,90) content-size 784x0 children: inline
|
||||
TextNode <#text>
|
||||
|
||||
ViewportPaintable (Viewport<#document>) [0,0 800x600]
|
||||
PaintableWithLines (BlockContainer<HTML>) [0,0 800x98]
|
||||
PaintableWithLines (BlockContainer<BODY>) [8,8 784x82]
|
||||
PaintableWithLines (BlockContainer(anonymous)) [8,8 784x0]
|
||||
PaintableWithLines (BlockContainer<DIV>) [8,8 784x18]
|
||||
TextPaintable (TextNode<#text>)
|
||||
PaintableWithLines (BlockContainer(anonymous)) [8,26 784x0]
|
||||
PaintableWithLines (BlockContainer<DIV>) [8,26 784x0]
|
||||
TextPaintable (TextNode<#text>)
|
||||
PaintableWithLines (BlockContainer(anonymous)) [8,26 784x0]
|
||||
PaintableWithLines (BlockContainer<DIV>) [8,26 784x9]
|
||||
TextPaintable (TextNode<#text>)
|
||||
PaintableWithLines (BlockContainer(anonymous)) [8,35 784x0]
|
||||
PaintableWithLines (BlockContainer<DIV>) [8,35 784x18]
|
||||
TextPaintable (TextNode<#text>)
|
||||
PaintableWithLines (BlockContainer(anonymous)) [8,53 784x0]
|
||||
PaintableWithLines (BlockContainer<DIV>) [8,53 784x37]
|
||||
TextPaintable (TextNode<#text>)
|
||||
PaintableWithLines (BlockContainer(anonymous)) [8,90 784x0]
|
||||
8
Tests/LibWeb/Layout/input/percentage-font-size.html
Normal file
8
Tests/LibWeb/Layout/input/percentage-font-size.html
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
<!DOCTYPE html>
|
||||
<body>
|
||||
<div style="font-size: -100%">X</div>
|
||||
<div style="font-size: 0%">X</div>
|
||||
<div style="font-size: 50%">X</div>
|
||||
<div style="font-size: 100%">X</div>
|
||||
<div style="font-size: 200%">X</div>
|
||||
</body>
|
||||
Loading…
Add table
Add a link
Reference in a new issue