| <!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> |
