mirror of
https://github.com/RGBCube/serenity
synced 2025-07-25 23:37:35 +00:00
LibWeb: More correctly paint joins between borders
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:
parent
06a44ac2ff
commit
97130a4e66
3 changed files with 403 additions and 154 deletions
|
@ -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>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue