1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-26 05:27:46 +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 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

View 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>