mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2024-11-27 01:50:24 +00:00
LibWeb: Compute text-decoration-thickness
values
This commit is contained in:
parent
0f7156ed81
commit
b6b116d5f2
Notes:
sideshowbarker
2024-07-17 17:52:18 +09:00
Author: https://github.com/krkk Commit: https://github.com/SerenityOS/serenity/commit/b6b116d5f2 Pull-request: https://github.com/SerenityOS/serenity/pull/12915 Reviewed-by: https://github.com/AtkinsSJ ✅
3 changed files with 16 additions and 3 deletions
|
@ -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<int> 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<int> 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<int> 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; }
|
||||
|
|
|
@ -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());
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue