RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-26 17:37:35 +00:00
Code Issues Activity Actions

LibWeb: Implement the CSS outline property :^)

Browse source 
...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
Download patch file Download diff file Expand all files Collapse all files

16
Base/res/html/misc/inline-node.html
View file

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

1
Base/res/html/misc/welcome.html
View file

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