mirror of
https://github.com/SerenityOS/serenity
synced 2024-07-23 11:04:40 +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
Andreas Kling
parent
5640779838
commit
fe7e797483
|
|
@ -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>
|
||||
|
|
|
|||
33
Base/res/html/misc/outline.html
Normal file
33
Base/res/html/misc/outline.html
Normal file
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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());
|
||||
|
|
|
|||
|
|
@ -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 };
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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()) {
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Reference in a new issue