dmaax/ladybird
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

LibWeb: Paint emoji glyph text-shadows in the shadow color

Browse source
This commit is contained in:
Tim Ledbetter 2026-06-18 16:59:17 +01:00 committed by Jelle Raaijmakers
parent 86e0e281a0
commit 91d3d135eb
4 changed files with 38 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
Libraries/LibWeb/Painting/DisplayListPlayerSkia.cpp
View file

@ -555,6 +555,10 @@ void DisplayListPlayerSkia::play_command(PaintTextShadow const& command)
auto blur_image_filter = SkImageFilters::Blur(command.blur_radius / 2, command.blur_radius / 2, nullptr);
SkPaint blur_paint;
blur_paint.setImageFilter(blur_image_filter);
// Skia paints color glyphs with their own colors, ignoring the paint color, so tint the shadow layer with a kSrcIn
// blend to force a flat silhouette in the shadow color. The glyphs are drawn opaquely below so the shadow color's
// alpha is applied exactly once.
blur_paint.setColorFilter(SkColorFilters::Blend(to_skia_color(command.color), SkBlendMode::kSrcIn));
canvas.saveLayer(SkCanvas::SaveLayerRec(nullptr, &blur_paint, nullptr, 0));
play_command(DrawGlyphRun { .font_id = command.font_id,
.glyphs = command.glyphs,
@ -562,7 +566,7 @@ void DisplayListPlayerSkia::play_command(PaintTextShadow const& command)
.glyph_bounding_rect = command.shadow_bounding_rect,
.translation = command.draw_location + command.text_rect.location().to_type<float>(),
.scale = command.scale,
.color = command.color });
.color = command.color.with_alpha(255) });
canvas.restore();
}

BIN
Tests/LibWeb/Ref/data/fonts/COLR-palettes-test-font.ttf Normal file
View file

Binary file not shown.

16
Tests/LibWeb/Ref/expected/text-shadow-color-on-color-font-glyph-ref.html Normal file
View file

@ -0,0 +1,16 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>text-shadow uses the shadow color, not the glyph colors, for color-font glyphs</title>
<style>
@font-face {
font-family: "COLRTest";
src: url("../data/fonts/COLR-palettes-test-font.ttf") format("truetype");
}
.glyph {
position: absolute;
margin: 0;
font: 100px "COLRTest";
}
</style>
<div class="glyph" style="left: 90px; top: 90px; filter: brightness(0);">A</div>
<div class="glyph" style="left: 50px; top: 50px;">A</div>

17
Tests/LibWeb/Ref/input/text-shadow-color-on-color-font-glyph.html Normal file
View file

@ -0,0 +1,17 @@
<!DOCTYPE html>
<meta charset="utf-8">
<link rel="match" href="../expected/text-shadow-color-on-color-font-glyph-ref.html">
<style>
@font-face {
font-family: "COLRTest";
src: url("../data/fonts/COLR-palettes-test-font.ttf") format("truetype");
}
.glyph {
position: absolute;
left: 50px;
top: 50px;
margin: 0;
font: 100px "COLRTest";
}
</style>
<div class="glyph" style="text-shadow: 40px 40px 0 #000;">A</div>