mirror of
https://github.com/LadybirdBrowser/ladybird
synced 2026-04-27 02:05:07 +02:00
f2e6f70fbb
Instead of rendering text glyphs into a separate mask surface and using clipShader, paint the backgrounds first and then composite the text glyphs via saveLayer with SkBlendMode::kDstIn. Skia's saveLayer automatically sizes its backing at device resolution including CSS transforms, so no manual scale computation is needed. Fixes pixelation when zooming in on clipped backgrounds on e.g. the title of https://modern-css.com/.
21 lines
470 B
HTML
21 lines
470 B
HTML
<!DOCTYPE html>
|
|
<meta name="fuzzy" content="maxDifference=0-17;totalPixels=0-1097" />
|
|
<link rel="match" href="../expected/background-clip-text-in-scaled-ancestor-ref.html" />
|
|
<style>
|
|
body { margin: 0; }
|
|
.scaled {
|
|
transform: scale(3);
|
|
transform-origin: left top;
|
|
}
|
|
.text {
|
|
font-size: 20px;
|
|
font-weight: 800;
|
|
color: transparent;
|
|
background: red;
|
|
background-clip: text;
|
|
}
|
|
</style>
|
|
<div class="scaled">
|
|
<div class="text">Abcdefg</div>
|
|
</div>
|