gradient-none-interpolation.html (2022B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>Gradient interpolation</title> 5 <link rel="author" title="Aaron Krajeski" href="mailto:aaronhk@chromium.org"> 6 <link rel="help" href="https://www.w3.org/TR/css-color-4/#interpolation"> 7 <meta name="assert" content="Color stops with missing components should split into two stops and take their neighboring values."> 8 <link rel="match" href="gradient-none-interpolation-ref.html"> 9 <meta name="fuzzy" content="maxDifference=1; totalPixels=0-15000"> 10 <style> 11 div { 12 height: 50px; 13 } 14 #basic { 15 /* "none" should split into two and take each neighboring value. */ 16 background: linear-gradient(to right in srgb, color(srgb 0.5 0 0), color(srgb none 0.5 0.5), color(srgb 1 1 1)); 17 } 18 #multipleNone { 19 /* "none" and "none" gives zero. */ 20 background: linear-gradient(to right in srgb, color(srgb none 0 0), color(srgb none 0.5 0.5), color(srgb 1 1 1)); 21 } 22 #allNone { 23 /* "none" and "none" gives zero. */ 24 background: linear-gradient(to right in srgb, color(srgb none 0 0), color(srgb none 1 1)); 25 } 26 #noneHue { 27 background: linear-gradient(to right in oklch, oklch(0.2 0.1 90), oklch(0.8 0.4 none), oklch(0.3 0.2 180)); 28 } 29 #noneHueLonger { 30 background: linear-gradient(to right in oklch longer hue, oklch(0.2 0.1 90), oklch(0.5 0.3 none), oklch(0.8 0.4 180)); 31 } 32 #transparentHueIsPowerless { 33 /* When "transparent" is converted to oklch, the hue of the resulting stop should act as if it were missing. */ 34 background: linear-gradient(to right in oklch, red, transparent, blue); 35 } 36 #srgb-mixing-with-named-color { 37 background: linear-gradient(90deg in srgb, rgb(none 255 none), yellow); 38 } 39 </style> 40 </head> 41 <body> 42 <div id="basic"></div> 43 <div id="multipleNone"></div> 44 <div id="allNone"></div> 45 <div id="noneHue"></div> 46 <div id="noneHueLonger"></div> 47 <div id="transparentHueIsPowerless"></div> 48 <div id="srgb-mixing-with-named-color"></div> 49 </body> 50 </html>