1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-27 00:37:45 +00:00

LibWeb: Implement the CSS outline property :^)

...along with `outline-color`, `outline-style`, and `outline-width`.

This re-uses the existing border-painting code, which seems to work well
enough!

This replaces the previous code for drawing focus-outlines, with generic
outline painting for any elements that want it. Focus outlines are now
instead supported by this code in Default.css:

```css
:focus-visible {
    outline: auto;
}
```
This commit is contained in:
Sam Atkins 2023-08-02 17:24:14 +01:00 committed by Andreas Kling
parent 5640779838
commit fe7e797483
15 changed files with 174 additions and 40 deletions

View file

@ -107,6 +107,9 @@ public:
static Vector<Vector<String>> grid_template_areas() { return {}; }
static CSS::Time transition_delay() { return CSS::Time::make_seconds(0); }
static CSS::ObjectFit object_fit() { return CSS::ObjectFit::Fill; }
static Color outline_color() { return Color::Black; }
static CSS::OutlineStyle outline_style() { return CSS::OutlineStyle::None; }
static CSS::Length outline_width() { return CSS::Length::make_px(3); }
};
enum class BackgroundSize {
@ -324,6 +327,10 @@ public:
CSS::FontVariant font_variant() const { return m_inherited.font_variant; }
CSS::Time transition_delay() const { return m_noninherited.transition_delay; }
Color outline_color() const { return m_noninherited.outline_color; }
CSS::OutlineStyle outline_style() const { return m_noninherited.outline_style; }
CSS::Length outline_width() const { return m_noninherited.outline_width; }
ComputedValues clone_inherited_values() const
{
ComputedValues clone;
@ -434,6 +441,9 @@ protected:
Gfx::Color stop_color { InitialValues::stop_color() };
float stop_opacity { InitialValues::stop_opacity() };
CSS::Time transition_delay { InitialValues::transition_delay() };
Color outline_color { InitialValues::outline_color() };
CSS::OutlineStyle outline_style { InitialValues::outline_style() };
CSS::Length outline_width { InitialValues::outline_width() };
} m_noninherited;
};
@ -543,6 +553,9 @@ public:
void set_stop_color(Color value) { m_noninherited.stop_color = value; }
void set_stop_opacity(float value) { m_noninherited.stop_opacity = value; }
void set_text_anchor(CSS::TextAnchor value) { m_inherited.text_anchor = value; }
void set_outline_color(Color value) { m_noninherited.outline_color = value; }
void set_outline_style(CSS::OutlineStyle value) { m_noninherited.outline_style = value; }
void set_outline_width(CSS::Length value) { m_noninherited.outline_width = value; }
};
}

View file

@ -245,6 +245,18 @@
"none",
"scale-down"
],
"outline-style": [
"auto",
"none",
"dotted",
"dashed",
"solid",
"double",
"groove",
"ridge",
"inset",
"outset"
],
"overflow": [
"auto",
"clip",

View file

@ -1587,8 +1587,7 @@
"outline": {
"affects-layout": false,
"inherited": false,
"__comment": "FIXME: Initial value is really `medium invert none` but we don't yet parse the outline shorthand.",
"initial": "none",
"initial": "medium currentColor none",
"longhands": [
"outline-color",
"outline-style",
@ -1598,12 +1597,10 @@
"outline-color": {
"affects-layout": false,
"inherited": false,
"initial": "invert",
"__comment": "FIXME: We don't yet support `invert`. Until we do, the spec directs us to use `currentColor` as the default instead, and reject `invert`",
"initial": "currentColor",
"valid-types": [
"color"
],
"valid-identifiers": [
"invert"
]
},
"outline-style": {
@ -1611,7 +1608,7 @@
"inherited": false,
"initial": "none",
"valid-types": [
"line-style"
"outline-style"
]
},
"outline-width": {

View file

@ -729,6 +729,19 @@ ErrorOr<RefPtr<StyleValue const>> ResolvedCSSStyleDeclaration::style_value_for_p
return NumberStyleValue::create(layout_node.computed_values().opacity());
case PropertyID::Order:
return IntegerStyleValue::create(layout_node.computed_values().order());
case PropertyID::Outline: {
return StyleValueList::create(
{ TRY(style_value_for_property(layout_node, PropertyID::OutlineColor)).release_nonnull(),
TRY(style_value_for_property(layout_node, PropertyID::OutlineStyle)).release_nonnull(),
TRY(style_value_for_property(layout_node, PropertyID::OutlineWidth)).release_nonnull() },
StyleValueList::Separator::Space);
}
case PropertyID::OutlineColor:
return ColorStyleValue::create(layout_node.computed_values().outline_color());
case PropertyID::OutlineStyle:
return IdentifierStyleValue::create(to_value_id(layout_node.computed_values().outline_style()));
case PropertyID::OutlineWidth:
return LengthStyleValue::create(layout_node.computed_values().outline_width());
case PropertyID::OverflowX:
return IdentifierStyleValue::create(to_value_id(layout_node.computed_values().overflow_x()));
case PropertyID::OverflowY:

View file

@ -626,6 +626,12 @@ Optional<CSS::LineStyle> StyleProperties::line_style(CSS::PropertyID property_id
return value_id_to_line_style(value->to_identifier());
}
Optional<CSS::OutlineStyle> StyleProperties::outline_style() const
{
auto value = property(CSS::PropertyID::OutlineStyle);
return value_id_to_outline_style(value->to_identifier());
}
Optional<CSS::Float> StyleProperties::float_() const
{
auto value = property(CSS::PropertyID::Float);

View file

@ -68,6 +68,7 @@ public:
Optional<CSS::Cursor> cursor() const;
Optional<CSS::WhiteSpace> white_space() const;
Optional<CSS::LineStyle> line_style(CSS::PropertyID) const;
Optional<CSS::OutlineStyle> outline_style() const;
Vector<CSS::TextDecorationLine> text_decoration_line() const;
Optional<CSS::TextDecorationStyle> text_decoration_style() const;
Optional<CSS::TextTransform> text_transform() const;