1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-05-31 08:38:12 +00:00

LibWeb: Add proper support for text-decoration-line property values

The code handling the rendering of the text-decoration-line got moved
into its own function to reduce clutter.
The CSS property text-decoration-line now supports underline, overline
and line-through.
This commit is contained in:
Tobias Christiansen 2021-07-28 16:44:26 +02:00 committed by Andreas Kling
parent b7ca269b4d
commit 4c17f389db
2 changed files with 38 additions and 2 deletions

View file

@ -36,6 +36,42 @@ static bool is_all_whitespace(const StringView& string)
return true;
}
void TextNode::paint_text_decoration(Gfx::Painter& painter, LineBoxFragment const& fragment) const
{
Gfx::IntPoint line_start_point {};
Gfx::IntPoint line_end_point {};
auto& font = fragment.layout_node().font();
auto fragment_box = enclosing_int_rect(fragment.absolute_rect());
auto glyph_height = font.glyph_height();
auto baseline = fragment_box.height() / 2 - (glyph_height + 4) / 2 + glyph_height;
switch (computed_values().text_decoration_line()) {
case CSS::TextDecorationLine::None:
return;
break;
case CSS::TextDecorationLine::Underline:
line_start_point = fragment_box.top_left().translated(0, baseline + 2);
line_end_point = fragment_box.top_right().translated(0, baseline + 2);
break;
case CSS::TextDecorationLine::Overline:
line_start_point = fragment_box.top_left().translated(0, baseline - glyph_height);
line_end_point = fragment_box.top_right().translated(0, baseline - glyph_height);
break;
case CSS::TextDecorationLine::LineThrough: {
auto x_height = font.x_height();
line_start_point = fragment_box.top_left().translated(0, baseline - x_height / 2);
line_end_point = fragment_box.top_right().translated(0, baseline - x_height / 2);
break;
} break;
case CSS::TextDecorationLine::Blink:
// Conforming user agents may simply not blink the text
break;
}
painter.draw_line(line_start_point, line_end_point, computed_values().color());
}
void TextNode::paint_fragment(PaintContext& context, const LineBoxFragment& fragment, PaintPhase phase) const
{
auto& painter = context.painter();
@ -50,8 +86,7 @@ void TextNode::paint_fragment(PaintContext& context, const LineBoxFragment& frag
if (document().inspected_node() == &dom_node())
context.painter().draw_rect(enclosing_int_rect(fragment.absolute_rect()), Color::Magenta);
if (computed_values().text_decoration_line() == CSS::TextDecorationLine::Underline)
painter.draw_line(enclosing_int_rect(fragment.absolute_rect()).bottom_left().translated(0, 1), enclosing_int_rect(fragment.absolute_rect()).bottom_right().translated(0, 1), computed_values().color());
paint_text_decoration(painter, fragment);
// FIXME: text-transform should be done already in layout, since uppercase glyphs may be wider than lowercase, etc.
auto text = m_text_for_rendering;