RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-27 03:17: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

6
Userland/Libraries/LibWeb/Painting/Command.h
View file

@ -65,6 +65,7 @@ struct DrawText {
struct FillRect {
Gfx::IntRect rect;
Color color;
Vector<Gfx::Path> clip_paths;
[[nodiscard]] Gfx::IntRect bounding_rect() const { return rect; }
void translate_by(Gfx::IntPoint const& offset) { rect.translate_by(offset); }
@ -85,6 +86,7 @@ struct DrawScaledImmutableBitmap {
NonnullRefPtr<Gfx::ImmutableBitmap> bitmap;
Gfx::IntRect src_rect;
Gfx::Painter::ScalingMode scaling_mode;
Vector<Gfx::Path> clip_paths;
[[nodiscard]] Gfx::IntRect bounding_rect() const { return dst_rect; }
void translate_by(Gfx::IntPoint const& offset) { dst_rect.translate_by(offset); }
@ -128,6 +130,7 @@ struct PopStackingContext { };
struct PaintLinearGradient {
Gfx::IntRect gradient_rect;
LinearGradientData linear_gradient_data;
Vector<Gfx::Path> clip_paths;
[[nodiscard]] Gfx::IntRect bounding_rect() const { return gradient_rect; }
@ -170,6 +173,7 @@ struct FillRectWithRoundedCorners {
Gfx::AntiAliasingPainter::CornerRadius top_right_radius;
Gfx::AntiAliasingPainter::CornerRadius bottom_left_radius;
Gfx::AntiAliasingPainter::CornerRadius bottom_right_radius;
Vector<Gfx::Path> clip_paths;
[[nodiscard]] Gfx::IntRect bounding_rect() const { return rect; }
void translate_by(Gfx::IntPoint const& offset) { rect.translate_by(offset); }
@ -334,6 +338,7 @@ struct PaintRadialGradient {
RadialGradientData radial_gradient_data;
Gfx::IntPoint center;
Gfx::IntSize size;
Vector<Gfx::Path> clip_paths;
[[nodiscard]] Gfx::IntRect bounding_rect() const { return rect; }
@ -344,6 +349,7 @@ struct PaintConicGradient {
Gfx::IntRect rect;
ConicGradientData conic_gradient_data;
Gfx::IntPoint position;
Vector<Gfx::Path> clip_paths;
[[nodiscard]] Gfx::IntRect bounding_rect() const { return rect; }