gradient-longer-hue-hsl-013-ref.html (754B)
1 <!DOCTYPE html> 2 <html lang="en"> 3 <meta charset="utf-8"> 4 <title>Gradient using "longer hue"</title> 5 <link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com"> 6 7 <style> 8 div { 9 margin: 20px 0px 20px 50px; 10 height: 40px; 11 width: 100px; 12 position: relative; 13 } 14 /* same colors as the testcase but specified directly in the interpolation color space */ 15 .ref1 { 16 background: linear-gradient(to right in hsl longer hue, hsl(0 100% 50%), hsl(0 0% 0%)); 17 } 18 .ref2 { 19 background: linear-gradient(to right in hsl longer hue, hsl(0 100% 50%), hsl(0 0% 100%)); 20 } 21 .ref3 { 22 background: linear-gradient(to right in hsl longer hue, hsl(0 100% 50%), hsl(0 0% 0% / 0%)); 23 } 24 </style> 25 26 <div class="ref1"></div> 27 <div class="ref2"></div> 28 <div class="ref3"></div>