gradient-single-stop-none-interpolation.html (1285B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>Gradient interpolation with single stop that has missing components</title> 4 <link rel="author" title="CGQAQ" href="mailto:m.jason.liu@gmail.com"> 5 <link rel="help" href="https://www.w3.org/TR/css-color-4/#interpolation"> 6 <meta name="assert" content="Gradients with single color stop that having missing components should resolve to zero."> 7 <link rel="match" href="gradient-single-stop-none-interpolation-ref.html"> 8 <style> 9 div { 10 height: 100px; 11 } 12 13 #basic { 14 /* "none" should resolve to zero when we only have one single stop. */ 15 background: linear-gradient(to right in srgb, color(srgb none 0.5 0.5)); 16 } 17 18 #multipleNone { 19 /* "none" and "none" gives zero. */ 20 background: linear-gradient(to right in srgb, color(srgb none 0 none)); 21 } 22 23 #allNone { 24 /* "none" and "none" gives zero. */ 25 background: linear-gradient(to right in srgb, color(srgb none none none)); 26 } 27 28 #noneHue { 29 background: linear-gradient(to right in oklch, oklch(0.8 0.4 none)); 30 } 31 32 #noneHueLonger { 33 background: linear-gradient(to right in oklch longer hue, oklch(0.5 0.3 none)); 34 } 35 </style> 36 <div id="basic"></div> 37 <div id="multipleNone"></div> 38 <div id="allNone"></div> 39 <div id="noneHue"></div> 40 <div id="noneHueLonger"></div>