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