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; } ```
Author: https://github.com/AtkinsSJ Commit: https://github.com/SerenityOS/serenity/commit/fe7e797483 Pull-request: https://github.com/SerenityOS/serenity/pull/20331
2024-11-22 07:30:19 +00:00 · 2023-08-02 17:24:14 +01:00 · 2023-08-02 17:24:14 +01:00 · fe7e797483 · 2024-07-16 21:30:46 +09:00
commit fe7e797483
parent 5640779838
15 changed files with 174 additions and 40 deletions
--- a/Base/res/html/misc/inline-node.html
+++ b/Base/res/html/misc/inline-node.html
@ -32,6 +32,19 @@
            border-radius: 6px;
            box-shadow: 4px 4px 4px darkgreen;
        }
+
+        .outline {
+            outline: 3px dotted magenta;
+        }
+        .outline2 {
+            outline: 1px solid red;
+            border-radius: 10px;
+        }
+        .outline3 {
+            outline: 2px solid green;
+            border-radius: 10px;
+            border: 2px solid black;
+        }
    </style>
 </head>
 <body>
@ -43,5 +56,8 @@
        Hello world <span class="highlight">this is some text</span> in a box. <span class="bg-highlight">This text has a background</span> and <span class="br-highlight">this text has a shadow!</span>
    </div>
    <div style="background-color:red;width:3px">This text should only have a strip of red on the left</div>
+    <div class="box">
+        <span class="outline">This text has an outline</span> and <span class="outline2">this text has an outline with a border radius,</span> and <span class="outline3">this also has a border.</span>
+    </div>
 </body>
 </html>
--- a/Base/res/html/misc/outline.html
+++ b/Base/res/html/misc/outline.html
@ -0,0 +1,33 @@
+<!doctype html>
+<html>
+<head>
+    <title>Outlines</title>
+    <style>
+        p {
+            padding: 5px;
+            border: 2px solid black;
+        }
+        .outline-default {
+            outline: auto;
+        }
+        .outline-1 {
+            outline: 5px dashed magenta;
+        }
+        .outline-2 {
+            outline: 5px solid green;
+            border-radius: 10px;
+        }
+        .outline-currentcolor {
+            color: saddlebrown;
+            outline: 5px dotted currentcolor;
+        }
+    </style>
+</head>
+<body>
+<h1>Outlines</h1>
+<p class="outline-default">I have the default outline!</p>
+<p class="outline-1">I have an outline!</p>
+<p class="outline-2">I have an outline and a radius!</p>
+<p class="outline-currentcolor">My outline is dotted and brown!</p>
+</body>
+</html>
--- a/Base/res/html/misc/welcome.html
+++ b/Base/res/html/misc/welcome.html
@ -126,6 +126,7 @@
            <li><a href="fonts.html">Fonts</a></li>
            <li><a href="borders.html">Borders</a></li>
            <li><a href="border-radius.html">Border-Radius</a></li>
+            <li><a href="outline.html">Outlines</a></li>
            <li><a href="lists.html">Lists</a></li>
            <li><a href="flex.html">Flexboxes</a></li>
            <li><a href="flex-order.html">Flexbox order</a></li>
--- a/Userland/Libraries/LibWeb/CSS/ComputedValues.h
+++ b/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; }
 };

 }
--- a/Userland/Libraries/LibWeb/CSS/Enums.json
+++ b/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",
--- a/Userland/Libraries/LibWeb/CSS/Properties.json
+++ b/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": {
--- a/Userland/Libraries/LibWeb/CSS/ResolvedCSSStyleDeclaration.cpp
+++ b/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:
--- a/Userland/Libraries/LibWeb/CSS/StyleProperties.cpp
+++ b/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);
--- a/Userland/Libraries/LibWeb/CSS/StyleProperties.h
+++ b/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;
--- a/Userland/Libraries/LibWeb/Layout/Node.cpp
+++ b/Userland/Libraries/LibWeb/Layout/Node.cpp
@ -707,6 +707,13 @@ void NodeWithStyle::apply_style(const CSS::StyleProperties& computed_style)
    do_border_style(computed_values.border_right(), CSS::PropertyID::BorderRightWidth, CSS::PropertyID::BorderRightColor, CSS::PropertyID::BorderRightStyle);
    do_border_style(computed_values.border_bottom(), CSS::PropertyID::BorderBottomWidth, CSS::PropertyID::BorderBottomColor, CSS::PropertyID::BorderBottomStyle);

+    if (auto outline_color = computed_style.property(CSS::PropertyID::OutlineColor); outline_color->has_color())
+        computed_values.set_outline_color(outline_color->to_color(*this));
+    if (auto outline_style = computed_style.outline_style(); outline_style.has_value())
+        computed_values.set_outline_style(outline_style.value());
+    if (auto outline_width = computed_style.property(CSS::PropertyID::OutlineWidth); outline_width->is_length())
+        computed_values.set_outline_width(outline_width->as_length().length());
+
    computed_values.set_content(computed_style.content());
    computed_values.set_grid_auto_columns(computed_style.grid_auto_columns());
    computed_values.set_grid_auto_rows(computed_style.grid_auto_rows());
--- a/Userland/Libraries/LibWeb/Painting/BorderPainting.cpp
+++ b/Userland/Libraries/LibWeb/Painting/BorderPainting.cpp
@ -1,6 +1,6 @@
 /*
 * Copyright (c) 2020, Andreas Kling <kling@serenityos.org>
- * Copyright (c) 2021-2022, Sam Atkins <atkinssj@serenityos.org>
+ * Copyright (c) 2021-2023, Sam Atkins <atkinssj@serenityos.org>
 * Copyright (c) 2022, MacDue <macdue@dueutil.tech>
 *
 * SPDX-License-Identifier: BSD-2-Clause
@ -10,6 +10,8 @@
 #include <LibGfx/AntiAliasingPainter.h>
 #include <LibGfx/Painter.h>
 #include <LibGfx/Path.h>
+#include <LibWeb/DOM/Document.h>
+#include <LibWeb/Layout/Node.h>
 #include <LibWeb/Painting/BorderPainting.h>
 #include <LibWeb/Painting/PaintContext.h>

@ -627,4 +629,27 @@ void paint_all_borders(PaintContext& context, CSSPixelRect const& bordered_rect,
    }
 }

+Optional<BordersData> borders_data_for_outline(Layout::Node const& layout_node, Color outline_color, CSS::OutlineStyle outline_style, CSSPixels outline_width)
+{
+    CSS::LineStyle line_style;
+    if (outline_style == CSS::OutlineStyle::Auto) {
+        // `auto` lets us do whatever we want for the outline. 2px of the link colour seems reasonable.
+        line_style = CSS::LineStyle::Dotted;
+        outline_color = layout_node.document().link_color();
+        outline_width = 2;
+    } else {
+        line_style = CSS::value_id_to_line_style(CSS::to_value_id(outline_style)).value_or(CSS::LineStyle::None);
+    }
+
+    if (outline_color.alpha() == 0 || line_style == CSS::LineStyle::None || outline_width == 0)
+        return {};
+
+    CSS::BorderData border_data {
+        .color = outline_color,
+        .line_style = line_style,
+        .width = outline_width,
+    };
+    return BordersData { border_data, border_data, border_data, border_data };
+}
+
 }
--- a/Userland/Libraries/LibWeb/Painting/BorderPainting.h
+++ b/Userland/Libraries/LibWeb/Painting/BorderPainting.h
@ -1,5 +1,6 @@
 /*
 * Copyright (c) 2020, Andreas Kling <kling@serenityos.org>
+ * Copyright (c) 2021-2023, Sam Atkins <atkinssj@serenityos.org>
 *
 * SPDX-License-Identifier: BSD-2-Clause
 */
@ -55,6 +56,11 @@ struct BorderRadiiData {
        bottom_right.shrink(right, bottom);
        bottom_left.shrink(left, bottom);
    }
+
+    inline void inflate(CSSPixels top, CSSPixels right, CSSPixels bottom, CSSPixels left)
+    {
+        shrink(-top, -right, -bottom, -left);
+    }
 };

 BorderRadiiData normalized_border_radii_data(Layout::Node const&, CSSPixelRect const&, CSS::BorderRadiusData top_left_radius, CSS::BorderRadiusData top_right_radius, CSS::BorderRadiusData bottom_right_radius, CSS::BorderRadiusData bottom_left_radius);
@ -72,6 +78,9 @@ struct BordersData {
    CSS::BorderData left;
 };

+// Returns OptionalNone if there is no outline to paint.
+Optional<BordersData> borders_data_for_outline(Layout::Node const&, Color outline_color, CSS::OutlineStyle outline_style, CSSPixels outline_width);
+
 RefPtr<Gfx::Bitmap> get_cached_corner_bitmap(DevicePixelSize corners_size);

 void paint_border(PaintContext& context, BorderEdge edge, DevicePixelRect const& rect, Gfx::AntiAliasingPainter::CornerRadius const& radius, Gfx::AntiAliasingPainter::CornerRadius const& opposite_radius, BordersData const& borders_data, Gfx::Path& path, bool last);
--- a/Userland/Libraries/LibWeb/Painting/InlinePaintable.cpp
+++ b/Userland/Libraries/LibWeb/Painting/InlinePaintable.cpp
@ -86,7 +86,7 @@ void InlinePaintable::paint(PaintContext& context, PaintPhase phase) const
        });
    }

-    if (phase == PaintPhase::Border) {
+    auto paint_border_or_outline = [&](Optional<BordersData> outline_data = {}) {
        auto top_left_border_radius = computed_values().border_top_left_radius();
        auto top_right_border_radius = computed_values().border_top_right_radius();
        auto bottom_right_border_radius = computed_values().border_bottom_right_radius();
@ -115,13 +115,31 @@ void InlinePaintable::paint(PaintContext& context, PaintPhase phase) const
                absolute_fragment_rect.set_width(absolute_fragment_rect.width() + extra_end_width);
            }

-            auto bordered_rect = absolute_fragment_rect.inflated(borders_data.top.width, borders_data.right.width, borders_data.bottom.width, borders_data.left.width);
-            auto border_radii_data = normalized_border_radii_data(layout_node(), bordered_rect, top_left_border_radius, top_right_border_radius, bottom_right_border_radius, bottom_left_border_radius);
+            auto borders_rect = absolute_fragment_rect.inflated(borders_data.top.width, borders_data.right.width, borders_data.bottom.width, borders_data.left.width);
+            auto border_radii_data = normalized_border_radii_data(layout_node(), borders_rect, top_left_border_radius, top_right_border_radius, bottom_right_border_radius, bottom_left_border_radius);

-            paint_all_borders(context, bordered_rect, border_radii_data, borders_data);
+            if (outline_data.has_value()) {
+                border_radii_data.inflate(outline_data->top.width, outline_data->right.width, outline_data->bottom.width, outline_data->left.width);
+                borders_rect.inflate(outline_data->top.width, outline_data->right.width, outline_data->bottom.width, outline_data->left.width);
+                paint_all_borders(context, borders_rect, border_radii_data, *outline_data);
+            } else {
+                paint_all_borders(context, borders_rect, border_radii_data, borders_data);
+            }

            return IterationDecision::Continue;
        });
+    };
+
+    if (phase == PaintPhase::Border) {
+        paint_border_or_outline();
+    }
+
+    if (phase == PaintPhase::Outline) {
+        auto outline_width = computed_values().outline_width().to_px(layout_node());
+        auto maybe_outline_data = borders_data_for_outline(layout_node(), computed_values().outline_color(), computed_values().outline_style(), outline_width);
+        if (maybe_outline_data.has_value()) {
+            paint_border_or_outline(maybe_outline_data.value());
+        }
    }

    if (phase == PaintPhase::Overlay && layout_node().document().inspected_layout_node() == &layout_node()) {
--- a/Userland/Libraries/LibWeb/Painting/PaintableBox.cpp
+++ b/Userland/Libraries/LibWeb/Painting/PaintableBox.cpp
@ -170,6 +170,16 @@ void PaintableBox::paint(PaintContext& context, PaintPhase phase) const
        paint_border(context);
    }

+    if (phase == PaintPhase::Outline) {
+        auto outline_width = computed_values().outline_width().to_px(layout_node());
+        auto borders_data = borders_data_for_outline(layout_node(), computed_values().outline_color(), computed_values().outline_style(), outline_width);
+        if (borders_data.has_value()) {
+            auto border_radius_data = normalized_border_radii_data(ShrinkRadiiForBorders::No);
+            border_radius_data.inflate(outline_width, outline_width, outline_width, outline_width);
+            paint_all_borders(context, absolute_border_box_rect().inflated(outline_width, outline_width, outline_width, outline_width), border_radius_data, borders_data.value());
+        }
+    }
+
    if (phase == PaintPhase::Overlay && should_clip_rect)
        context.painter().restore();

@ -216,12 +226,6 @@ void PaintableBox::paint(PaintContext& context, PaintPhase phase) const
        context.painter().draw_rect(size_text_device_rect, context.palette().threed_shadow1());
        context.painter().draw_text(size_text_device_rect, size_text, font, Gfx::TextAlignment::Center, context.palette().color(Gfx::ColorRole::TooltipText));
    }
-
-    if (phase == PaintPhase::Outline && layout_box().dom_node() && layout_box().dom_node()->is_element() && verify_cast<DOM::Element>(*layout_box().dom_node()).is_focused()) {
-        // FIXME: Implement this as `outline` using :focus-visible in the default UA stylesheet to make it possible to override/disable.
-        auto focus_outline_rect = context.enclosing_device_rect(absolute_border_box_rect()).inflated(4, 4);
-        context.painter().draw_focus_rect(focus_outline_rect.to_type<int>(), context.palette().focus_outline());
-    }
 }

 BordersData PaintableBox::remove_element_kind_from_borders_data(PaintableBox::BordersDataWithElementKind borders_data)
@ -639,25 +643,6 @@ void PaintableWithLines::paint(PaintContext& context, PaintPhase phase) const
        if (corner_clipper.has_value())
            corner_clipper->blit_corner_clipping(context.painter());
    }
-
-    // FIXME: Merge this loop with the above somehow..
-    if (phase == PaintPhase::Outline) {
-        for (auto& line_box : m_line_boxes) {
-            for (auto& fragment : line_box.fragments()) {
-                auto* node = fragment.layout_node().dom_node();
-                if (!node)
-                    continue;
-                auto* parent = node->parent_element();
-                if (!parent)
-                    continue;
-                if (parent->is_focused()) {
-                    // FIXME: Implement this as `outline` using :focus-visible in the default UA stylesheet to make it possible to override/disable.
-                    auto focus_outline_rect = context.enclosing_device_rect(fragment.absolute_rect()).to_type<int>().inflated(4, 4);
-                    context.painter().draw_focus_rect(focus_outline_rect, context.palette().focus_outline());
-                }
-            }
-        }
-    }
 }

 bool PaintableWithLines::handle_mousewheel(Badge<EventHandler>, CSSPixelPoint, unsigned, unsigned, int wheel_delta_x, int wheel_delta_y)
--- a/Userland/Libraries/LibWeb/Painting/StackingContext.cpp
+++ b/Userland/Libraries/LibWeb/Painting/StackingContext.cpp
@ -124,9 +124,7 @@ void StackingContext::paint_descendants(PaintContext& context, Layout::Node cons
            paint_descendants(context, child, phase);
            break;
        case StackingContextPaintPhase::FocusAndOverlay:
-            if (context.has_focus()) {
-                paint_node(child, context, PaintPhase::Outline);
-            }
+            paint_node(child, context, PaintPhase::Outline);
            paint_node(child, context, PaintPhase::Overlay);
            paint_descendants(context, child, phase);
            break;