1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-27 00:17:46 +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:
Zac Brannelly 2024-03-03 14:59:02 +11:00 committed by Alexander Kalenik
parent 4a3680cafc
commit 9165faca5e
27 changed files with 353 additions and 105 deletions

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 203 KiB