gradient-none-interpolation-ref.html (1695B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <style> 5 div { 6 height: 50px; 7 } 8 #basic { 9 /* "none" should split into two and take each neighboring value. */ 10 background: linear-gradient(to right in srgb, color(srgb 0.5 0 0), color(srgb 0.5 0.5 0.5) 50%, color(srgb 1 0.5 0.5) 50%, color(srgb 1 1 1)); 11 } 12 #multipleNone { 13 /* "none" and "none" gives zero. */ 14 background: linear-gradient(to right in srgb, color(srgb 0 0 0), color(srgb 0.0 0.5 0.5) 50%, color(srgb 1 0.5 0.5) 50%, color(srgb 1 1 1)); 15 } 16 #allNone { 17 /* "none" and "none" gives zero. */ 18 background: linear-gradient(to right in srgb, color(srgb 0 0 0), color(srgb 0 1 1)); 19 } 20 #noneHue { 21 background: linear-gradient(to right in oklch, oklch(0.2 0.1 90), oklch(0.8 0.4 90) 50%, oklch(0.8 0.4 180) 50%, oklch(0.3 0.2 180)); 22 } 23 #noneHueLonger { 24 background: linear-gradient(to right in oklch longer hue, oklch(0.2 0.1 90), oklch(0.5 0.3 90) 50%, oklch(0.5 0.3 180) 50%, oklch(0.8 0.4 180)); 25 } 26 #transparentHueIsPowerless { 27 /* oklch(0.627966 0.257704 29.2346) = "red" 28 oklch(0.451981 0.31321 264.051) = "blue" */ 29 background: linear-gradient(to right in oklch, oklch(0.627966 0.257704 29.2346), oklch(0 0 29.2346 / 0) 50%, oklch(0 0 264.051 / 0) 50%, oklch(0.451981 0.31321 264.051)); 30 } 31 #srgb-mixing-with-named-color { 32 background: yellow; 33 } 34 </style> 35 </head> 36 <body> 37 <div id="basic"></div> 38 <div id="multipleNone"></div> 39 <div id="allNone"></div> 40 <div id="noneHue"></div> 41 <div id="noneHueLonger"></div> 42 <div id="transparentHueIsPowerless"></div> 43 <div id="srgb-mixing-with-named-color"></div> 44 </body> 45 </html>