gradient-powerless-hue-hsl-ref.html (998B)
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="utf-8"> 5 <title>Gradient powerless hue component converting tests</title> 6 <link rel="help" href="https://www.w3.org/TR/css-color-4/#interpolation"> 7 <style> 8 .test { 9 display: flex; 10 align-items: center; 11 width: 200px; 12 height: 50px; 13 position: relative; 14 border: 1px solid black; 15 margin: 10px; 16 background-image: linear-gradient(to right in hsl, red, hsl(120deg 100% 50% / 0%) ); 17 } 18 19 .info { 20 position: absolute; 21 right: -10px; 22 transform: translateX(100%); 23 } 24 </style> 25 </head> 26 <p>They should be the same as the first box.</p> 27 <ol> 28 <li class="test"><div class="info">hsl() Expected</div></li> 29 <li class="test"><div class="info">rgba()</div></li> 30 <li class="test"><div class="info">hwb()</div></li> 31 <li class="test"><div class="info">color()</div></li> 32 </ol> 33 </html>