RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-25 20:47:45 +00:00
Code Issues Activity Actions

LibWeb: Implement the CSS outline property :^)

Browse source 
...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
Download patch file Download diff file Expand all files Collapse all files

13
Userland/Libraries/LibWeb/CSS/ComputedValues.h
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; }
};
}