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

LibWeb: Support CSS property background-clip: text

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

84
Tests/LibWeb/Ref/css-background-clip-text.html Normal file
View file

@ -0,0 +1,84 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="match" href="reference/css-background-clip-text-ref.html" />
<title>Document</title>
<style>
p, .container {
border: 0.8em darkviolet;
border-style: dotted double;
margin: 1em 0;
padding: 1.4em;
font: 900 1.2em sans-serif;
text-decoration: underline;
}
.linear-gradient {
background: linear-gradient(60deg, red, yellow, red, yellow, red);
}
.radial-gradient {
background: radial-gradient(circle, red, yellow, red, yellow, red);
}
.conic-gradient {
background: conic-gradient(red, yellow, red, yellow, red);
}
.image-background {
background: url('./assets/car.png');
}
.border-box {
background-clip: border-box;
}
.padding-box {
background-clip: padding-box;
}
.content-box {
background-clip: content-box;
}
.text {
background-clip: text;
color: rgb(0 0 0 / 20%);
}
.new-background {
background: rgb(255 255 0 / 30%);
}
</style>
</head>
<body>
<!-- Hack to make the test runner wait for the image to load -->
<img src="./assets/car.png" />
<p class="border-box linear-gradient">The background extends behind the border.</p>
<p class="padding-box radial-gradient">
The background extends to the inside edge of the border.
</p>
<p class="content-box conic-gradient">
The background extends only to the edge of the content box.
</p>
<div class="text container linear-gradient">
The background is clipped to the foreground text.
<span>Some other text in a sub-element</span>
</div>
<div class="text container radial-gradient">
The background is clipped to the foreground text.
<span>Some other text in a sub-element</span>
</div>
<div class="text container conic-gradient">
The background is clipped to the foreground text.
<span>Some other text in a sub-element</span>
</div>
<div class="text container image-background">
Testing text.
<div>
<div class="new-background" style="color: rgb(0 0 0 / 20%);">The is nested text that should still be clipped to the background</div>
</div>
</div>
</body>
</html>

15
Tests/LibWeb/Ref/reference/css-background-clip-text-ref.html Normal file
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">

BIN
Tests/LibWeb/Ref/reference/images/css-background-clip-text.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 203 KiB