| <!DOCTYPE html> |
| <meta charset="utf-8"> |
| <title>Gradient analogous missing components carry forward logic tests</title> |
| <link rel="author" title="CGQAQ" href="mailto:m.jason.liu@gmail.com"> |
| <link rel="author" title="一丝" href="mailto:yiorsi@gmail.com"> |
| <link rel="help" href="https://www.w3.org/TR/css-color-4/#interpolation"> |
| <link rel="match" href="gradient-analogous-missing-components-002-ref.html"> |
| <meta name="assert" content="Tests that analogous missing components logic works."> |
| <style> |
| .test { |
| margin: 10px 50px; |
| width: 200px; |
| height: 50px; |
| border: 1px solid black; |
| --stop2: rgb(0 255 0); |
| /* lime */ |
| } |
| |
| .test1 { |
| background: linear-gradient(to right, color(srgb none 1 none), var(--stop2)); |
| } |
| |
| .test2 { |
| background: linear-gradient(to right in srgb, color(srgb none 1 none), var(--stop2)); |
| } |
| |
| .test3 { |
| background: linear-gradient(to right in oklab, color(srgb none 1 none), var(--stop2)); |
| } |
| |
| .test4 { |
| background: linear-gradient(to right in display-p3, color(srgb none 1 none), var(--stop2)); |
| } |
| </style> |
| <p>They should be equivalent to `background: color-mix(in srgb, color(srgb none 1 none), lime)`</p> |
| <div class="test test1">This should be a lime background.</div> |
| <div class="test test2">This should be a lime background.</div> |
| <div class="test test3">This should be a lime background.</div> |
| <div class="test test4">This should be a lime background.</div> |
