51 lines
1.1 KiB
HTML
51 lines
1.1 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">
|
|
<link rel="mismatch" href="background-gradient-interpolation-001-notref.html">
|
|
<style>
|
|
:root {
|
|
--space: ;
|
|
}
|
|
|
|
div {
|
|
height: 50px;
|
|
width: 200px;
|
|
}
|
|
|
|
.has-gradient {
|
|
background-image: linear-gradient(
|
|
90deg var(--space),
|
|
yellow 30%,
|
|
purple 95%
|
|
);
|
|
}
|
|
|
|
.hsl {
|
|
--space: in hsl;
|
|
}
|
|
|
|
.oklch {
|
|
--space: in oklch;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<h4>These three gradients should NOT look the same</h4>
|
|
|
|
<p>Interpolating in sRGB (default)</p>
|
|
<div class="has-gradient"></div>
|
|
|
|
<p>Interpolating in HSL</p>
|
|
<div class="has-gradient hsl"></div>
|
|
|
|
<p>Interpolating in Oklch</p>
|
|
<div class="has-gradient oklch"></div>
|
|
</body>
|
|
</html>
|