mirror of
https://github.com/LadybirdBrowser/ladybird
synced 2026-04-27 18:17:22 +02:00
f8c4043460
We implemented repeating linear gradients by expanding a vector of color stops until the entire range was covered. This is both a bit wasteful and caused Skia to draw corrupted gradients to screen whenever the total amount of color stops and positions exceeded 127. Instead of doing that, use the original color stops for the shader and repeat it instead of clamping it. We need to do a bit of math to project positions correctly, but after that the shader repeats itself nicely. While we're here, calculate the gradient's length and the center point as floats instead of ints, yielding a slight but noticeable improvement in gradient rendering (see the diff on the zig zag pattern in css-gradients.html for an example of this).
88 lines
2.4 KiB
HTML
88 lines
2.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<link rel="match" href="../expected/css-background-clip-text-ref.html" />
|
|
<meta name="fuzzy" content="maxDifference=0-3;totalPixels=0-25811">
|
|
|
|
<style>
|
|
html {
|
|
scrollbar-width: none;
|
|
}
|
|
|
|
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('../data/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>
|
|
<!-- FIXME: Workaround to ensure CSS background-image is loaded before taking screenshot: https://github.com/LadybirdBrowser/ladybird/issues/3448 -->
|
|
<img src="../data/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>
|