| <!DOCTYPE html> |
| <html> |
| <head> |
| <title>Gradient interpolation</title> |
| <link rel="author" title="Aaron Krajeski" href="mailto:[email protected]"> |
| <link rel="help" href="https://www.w3.org/TR/css-color-4/#interpolation"> |
| <meta name="assert" content="Color stops with missing components should split into two stops and take their neighboring values."> |
| <link rel="match" href="gradient-none-interpolation-ref.html"> |
| <meta name="fuzzy" content="maxDifference=1; totalPixels=0-15000"> |
| <style> |
| div { |
| height: 50px; |
| } |
| #basic { |
| /* "none" should split into two and take each neighboring value. */ |
| 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)); |
| } |
| #multipleNone { |
| /* "none" and "none" gives zero. */ |
| background: linear-gradient(to right in srgb, color(srgb none 0 0), color(srgb none 0.5 0.5), color(srgb 1 1 1)); |
| } |
| #allNone { |
| /* "none" and "none" gives zero. */ |
| background: linear-gradient(to right in srgb, color(srgb none 0 0), color(srgb none 1 1)); |
| } |
| #noneHue { |
| 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)); |
| } |
| #noneHueLonger { |
| 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)); |
| } |
| #transparentHueIsPowerless { |
| /* When "transparent" is converted to oklch, the hue of the resulting stop should act as if it were missing. */ |
| background: linear-gradient(to right in oklch, red, transparent, blue); |
| } |
| #srgb-mixing-with-named-color { |
| background: linear-gradient(90deg in srgb, rgb(none 255 none), yellow); |
| } |
| </style> |
| </head> |
| <body> |
| <div id="basic"></div> |
| <div id="multipleNone"></div> |
| <div id="allNone"></div> |
| <div id="noneHue"></div> |
| <div id="noneHueLonger"></div> |
| <div id="transparentHueIsPowerless"></div> |
| <div id="srgb-mixing-with-named-color"></div> |
| </body> |
| </html> |
