mirror of
https://github.com/RGBCube/serenity
synced 2025-07-27 14:57:35 +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
|
@ -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 };
|
||||
}
|
||||
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue