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

LibWeb: More correctly paint joins between borders

Browse source 
The refactor of the border painting mainly to handle:
1. Single border with minor border radius.
2. Different border widths and border colors joined situations.
This refactor only apply to solid border.

The main differece is to use Path.fill to paint each border,
not fill_rect anymore. There's a special case need to consider.
The Path.fill will leave shared edge blank between two borders.
To handle this, we decide to combine the borders with same color
to paint together.
This commit is contained in:
zhiyuang 2023-07-10 16:56:22 +08:00 • committed by Sam Atkins
parent 06a44ac2ff
commit 97130a4e66
3 changed files with 403 additions and 154 deletions
Download patch file Download diff file Expand all files Collapse all files

19
Base/res/html/misc/border-radius.html
View file

@ -57,6 +57,19 @@
border-radius: 10px;
}
.box-1-11 {
border-top: 20px solid black;
border-radius: 10px;
}
.box-1-12 {
border-radius: 20px;
border-top: 5px solid red;
border-right: 10px solid yellow;
border-bottom: 15px solid lime;
border-left: 20px solid blue;
}
.box-3 {
border: 1px solid black;
border-top-right-radius: 10px;
@ -399,6 +412,12 @@
<em>All round 10px 20px thick outset</em>
<div class="box box-1-10"></div>
<br>
<em>Single border with minor radius</em>
<div class="box box-1-11"></div>
<br>
<em>Four border with different colors</em>
<div class="box box-1-12"></div>
<br>
<em>top-left 10px</em>
<div class="box box-2"></div>
<br>