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:
parent
5640779838
commit
fe7e797483
15 changed files with 174 additions and 40 deletions
|
@ -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; }
|
||||
};
|
||||
|
||||
}
|
||||
|
|
|
@ -245,6 +245,18 @@
|
|||
"none",
|
||||
"scale-down"
|
||||
],
|
||||
"outline-style": [
|
||||
"auto",
|
||||
"none",
|
||||
"dotted",
|
||||
"dashed",
|
||||
"solid",
|
||||
"double",
|
||||
"groove",
|
||||
"ridge",
|
||||
"inset",
|
||||
"outset"
|
||||
],
|
||||
"overflow": [
|
||||
"auto",
|
||||
"clip",
|
||||
|
|
|
@ -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": {
|
||||
|
|
|
@ -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:
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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;
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue