RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-28 01:57:35 +00:00
Code Issues Activity Actions

LibWeb: Compute text-decoration-thickness values

Browse source
This commit is contained in:
Karol Kosek 2022-03-06 19:48:09 +01:00 • committed by Andreas Kling
parent 0f7156ed81
commit b6b116d5f2
3 changed files with 16 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

2
Userland/Libraries/LibWeb/Layout/Node.cpp
View file

@ -430,6 +430,8 @@ void NodeWithStyle::apply_style(const CSS::StyleProperties& specified_style)
// we just manually grab the value from `color`. This makes it dependent on `color` being
// specified first, so it's far from ideal.
computed_values.set_text_decoration_color(specified_style.color_or_fallback(CSS::PropertyID::TextDecorationColor, *this, computed_values.color()));
if (auto maybe_text_decoration_thickness = specified_style.length_percentage(CSS::PropertyID::TextDecorationThickness); maybe_text_decoration_thickness.has_value())
computed_values.set_text_decoration_thickness(maybe_text_decoration_thickness.release_value());
computed_values.set_z_index(specified_style.z_index());
computed_values.set_opacity(specified_style.opacity());

13
Userland/Libraries/LibWeb/Layout/TextNode.cpp
View file

@ -70,17 +70,24 @@ void TextNode::paint_text_decoration(Gfx::Painter& painter, LineBoxFragment cons
auto line_color = computed_values().text_decoration_color();
int line_thickness = [this] {
CSS::Length computed_thickness = computed_values().text_decoration_thickness().resolved(*this, CSS::Length(1, CSS::Length::Type::Em));
if (computed_thickness.is_auto())
return CSS::InitialValues::text_decoration_thickness().to_px(*this);
return computed_thickness.to_px(*this);
}();
switch (computed_values().text_decoration_style()) {
// FIXME: Implement the other styles
case CSS::TextDecorationStyle::Solid:
case CSS::TextDecorationStyle::Double:
case CSS::TextDecorationStyle::Dashed:
case CSS::TextDecorationStyle::Dotted:
painter.draw_line(line_start_point, line_end_point, line_color);
painter.draw_line(line_start_point, line_end_point, line_color, line_thickness);
break;
case CSS::TextDecorationStyle::Wavy:
// FIXME: There is a thing called text-decoration-thickness which also affects the amplitude here.
painter.draw_triangle_wave(line_start_point, line_end_point, line_color, 2);
painter.draw_triangle_wave(line_start_point, line_end_point, line_color, line_thickness + 1, line_thickness);
break;
}
}