diff --git a/Userland/Libraries/LibWeb/CSS/ComputedValues.h b/Userland/Libraries/LibWeb/CSS/ComputedValues.h index 0989f731af..c5cef946e8 100644 --- a/Userland/Libraries/LibWeb/CSS/ComputedValues.h +++ b/Userland/Libraries/LibWeb/CSS/ComputedValues.h @@ -23,6 +23,7 @@ public: static CSS::TextAlign text_align() { return CSS::TextAlign::Left; } static CSS::Position position() { return CSS::Position::Static; } static CSS::TextDecorationLine text_decoration_line() { return CSS::TextDecorationLine::None; } + static CSS::Length text_decoration_thickness() { return Length::make_px(1); } static CSS::TextDecorationStyle text_decoration_style() { return CSS::TextDecorationStyle::Solid; } static CSS::TextTransform text_transform() { return CSS::TextTransform::None; } static CSS::Display display() { return CSS::Display { CSS::Display::Outside::Inline, CSS::Display::Inside::Flow }; } @@ -111,6 +112,7 @@ public: Optional const& z_index() const { return m_noninherited.z_index; } CSS::TextAlign text_align() const { return m_inherited.text_align; } CSS::TextDecorationLine text_decoration_line() const { return m_noninherited.text_decoration_line; } + CSS::LengthPercentage text_decoration_thickness() const { return m_noninherited.text_decoration_thickness; } CSS::TextDecorationStyle text_decoration_style() const { return m_noninherited.text_decoration_style; } Color text_decoration_color() const { return m_noninherited.text_decoration_color; } CSS::TextTransform text_transform() const { return m_inherited.text_transform; } @@ -198,6 +200,7 @@ protected: CSS::Display display { InitialValues::display() }; Optional z_index; CSS::TextDecorationLine text_decoration_line { InitialValues::text_decoration_line() }; + CSS::LengthPercentage text_decoration_thickness { InitialValues::text_decoration_thickness() }; CSS::TextDecorationStyle text_decoration_style { InitialValues::text_decoration_style() }; Color text_decoration_color { InitialValues::color() }; CSS::Position position { InitialValues::position() }; @@ -257,6 +260,7 @@ public: void set_z_index(Optional value) { m_noninherited.z_index = value; } void set_text_align(CSS::TextAlign text_align) { m_inherited.text_align = text_align; } void set_text_decoration_line(CSS::TextDecorationLine value) { m_noninherited.text_decoration_line = value; } + void set_text_decoration_thickness(CSS::LengthPercentage value) { m_noninherited.text_decoration_thickness = value; } void set_text_decoration_style(CSS::TextDecorationStyle value) { m_noninherited.text_decoration_style = value; } void set_text_decoration_color(Color value) { m_noninherited.text_decoration_color = value; } void set_text_transform(CSS::TextTransform value) { m_inherited.text_transform = value; } diff --git a/Userland/Libraries/LibWeb/Layout/Node.cpp b/Userland/Libraries/LibWeb/Layout/Node.cpp index c4fde9780a..768658fa57 100644 --- a/Userland/Libraries/LibWeb/Layout/Node.cpp +++ b/Userland/Libraries/LibWeb/Layout/Node.cpp @@ -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()); diff --git a/Userland/Libraries/LibWeb/Layout/TextNode.cpp b/Userland/Libraries/LibWeb/Layout/TextNode.cpp index dfcdf7acda..4099c74450 100644 --- a/Userland/Libraries/LibWeb/Layout/TextNode.cpp +++ b/Userland/Libraries/LibWeb/Layout/TextNode.cpp @@ -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; } }