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;
}
```

Userland/Libraries/LibWeb/CSS/ComputedValues.h

@@ -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; }
 };
 
 }

Userland/Libraries/LibWeb/CSS/Enums.json

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

Userland/Libraries/LibWeb/CSS/Properties.json

@@ -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": {

Userland/Libraries/LibWeb/CSS/ResolvedCSSStyleDeclaration.cpp

@@ -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:

Userland/Libraries/LibWeb/CSS/StyleProperties.cpp

@@ -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);

Userland/Libraries/LibWeb/CSS/StyleProperties.h

@@ -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;