gradient-hue-direction.html (1885B)
1 <!doctype html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="utf-8"> 6 <title>Direction of hue interpolation</title> 7 <link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com"> 8 <link rel="help" href="https://www.w3.org/TR/css-color-4/#interpolation"> 9 <meta name="assert" content="Tests that increasing/decreasing hue directions match shorter/longer as appropriate"> 10 <link rel="match" href="gradient-hue-direction-ref.html"> 11 <style> 12 body { 13 background: #fff; 14 } 15 16 div { 17 width: 200px; 18 height: 50px; 19 margin: 10px; 20 } 21 22 div.a1 { 23 background-image: linear-gradient(to right in hsl increasing hue, red, orange); 24 } 25 div.a2 { 26 background-image: linear-gradient(to right in hsl shorter hue, red, orange); 27 } 28 29 div.b1 { 30 background-image: linear-gradient(to right in hsl decreasing hue, red, orange); 31 } 32 div.b2 { 33 background-image: linear-gradient(to right in hsl longer hue, red, orange); 34 } 35 36 div.c1 { 37 background-image: linear-gradient(to right in lch increasing hue, red, orange); 38 } 39 div.c2 { 40 background-image: linear-gradient(to right in lch shorter hue, red, orange); 41 } 42 43 div.d1 { 44 background-image: linear-gradient(to right in lch decreasing hue, red, orange); 45 } 46 div.d2 { 47 background-image: linear-gradient(to right in lch longer hue, red, orange); 48 } 49 </style> 50 </head> 51 52 <body> 53 <p>Each pair of gradients should match:</p> 54 <div class=a1></div> 55 <div class=a2></div> 56 <hr> 57 <div class=b1></div> 58 <div class=b2></div> 59 <hr> 60 <div class=c1></div> 61 <div class=c2></div> 62 <hr> 63 <div class=d1></div> 64 <div class=d2></div> 65 </body> 66 </html>