mirror of
https://github.com/RGBCube/serenity
synced 2025-07-27 07:47:35 +00:00
LibWeb: Support CSS property background-clip: text
From https://drafts.csswg.org/css-backgrounds-4/#background-clip "The background is painted within (clipped to) the intersection of the border box and the geometry of the text in the element and its in-flow and floated descendants" This change implements it in the following way: 1. Traverse the descendants of the element, collecting the Gfx::Path of glyphs into a vector. 2. The vector of collected paths is saved in the background painting command. 3. The painting commands executor uses the list of glyphs to paint a mask for background clipping. Co-authored-by: Aliaksandr Kalenik <kalenik.aliaksandr@gmail.com>
This commit is contained in:
parent
4a3680cafc
commit
9165faca5e
27 changed files with 353 additions and 105 deletions
15
Tests/LibWeb/Ref/reference/css-background-clip-text-ref.html
Normal file
15
Tests/LibWeb/Ref/reference/css-background-clip-text-ref.html
Normal file
|
@ -0,0 +1,15 @@
|
|||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
}
|
||||
body {
|
||||
background-color: white;
|
||||
}
|
||||
</style>
|
||||
<!-- To rebase:
|
||||
1. Open background-clip-text.html in Ladybird
|
||||
2. Resize the window just above the width of the canvas
|
||||
3. Right click > "Take Full Screenshot"
|
||||
4. Update the image below:
|
||||
-->
|
||||
<img src="./images/css-background-clip-text.png">
|
Loading…
Add table
Add a link
Reference in a new issue