mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2025-07-30 04:39:06 +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; }
|
[[nodiscard]] CSSPixels line_height() const { return *m_line_height; }
|
||||||
void set_line_height(Badge<StyleComputer> const&, CSSPixels line_height) { m_line_height = 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;
|
bool operator==(ComputedProperties const&) const;
|
||||||
|
|
||||||
|
|
@ -271,6 +273,7 @@ private:
|
||||||
RefPtr<Gfx::Font const> m_first_available_computed_font;
|
RefPtr<Gfx::Font const> m_first_available_computed_font;
|
||||||
|
|
||||||
Optional<CSSPixels> m_line_height;
|
Optional<CSSPixels> m_line_height;
|
||||||
|
Optional<CSSPixels> m_font_size;
|
||||||
|
|
||||||
PseudoClassBitmap m_attempted_pseudo_class_matches;
|
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()
|
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;
|
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.
|
// 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.
|
// 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.
|
// 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.
|
// 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_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_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_font_kerning(computed_style.font_kerning());
|
||||||
computed_values.set_line_height(computed_style.line_height());
|
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