59 lines
1.5 KiB
HTML
59 lines
1.5 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<meta charset='utf-8'>
|
|
<meta name="assert" content="Use the indicated color space when interpolating colors on the gradient line.">
|
|
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
|
<link rel="help" href="https://drafts.csswg.org/css-images-4/#linear-gradients">
|
|
<link rel="help" href="https://drafts.csswg.org/css-color/#interpolation-space">
|
|
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1910153">
|
|
<!-- The background-clip:text and simple block examples should theoretically render the same,
|
|
but we allow a slight difference because of different painting codepaths. -->
|
|
<meta name="fuzzy" content="maxDifference=0-2; totalPixels=0-7100">
|
|
<link rel="match" href="background-gradient-interpolation-001.html">
|
|
<style>
|
|
:root {
|
|
--space: ;
|
|
}
|
|
|
|
.has-gradient {
|
|
background-image: linear-gradient(
|
|
90deg var(--space),
|
|
yellow 30%,
|
|
purple 95%
|
|
);
|
|
}
|
|
|
|
.hsl {
|
|
--space: in hsl;
|
|
}
|
|
|
|
.oklch {
|
|
--space: in oklch;
|
|
}
|
|
|
|
.text {
|
|
font: 50px/1 Ahem;
|
|
-webkit-background-clip: text;
|
|
background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
text-fill-color: transparent;
|
|
width: fit-content;
|
|
margin: 0;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<h4>These three gradients should NOT look the same</h4>
|
|
|
|
<p>Interpolating in sRGB (default)</p>
|
|
<p class="text has-gradient">ABCD</p>
|
|
|
|
<p>Interpolating in HSL</p>
|
|
<p class="text has-gradient hsl">ABCD</p>
|
|
|
|
<p>Interpolating in Oklch</p>
|
|
<p class="text has-gradient oklch">ABCD</p>
|
|
</body>
|
|
</html>
|