gradient-analogous-missing-components-002.html (1490B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>Gradient analogous missing components carry forward logic tests</title> 4 <link rel="author" title="CGQAQ" href="mailto:m.jason.liu@gmail.com"> 5 <link rel="author" title="一丝" href="mailto:yiorsi@gmail.com"> 6 <link rel="help" href="https://www.w3.org/TR/css-color-4/#interpolation"> 7 <link rel="match" href="gradient-analogous-missing-components-002-ref.html"> 8 <meta name="assert" content="Tests that analogous missing components logic works."> 9 <style> 10 .test { 11 margin: 10px 50px; 12 width: 200px; 13 height: 50px; 14 border: 1px solid black; 15 --stop2: rgb(0 255 0); 16 /* lime */ 17 } 18 19 .test1 { 20 background: linear-gradient(to right, color(srgb none 1 none), var(--stop2)); 21 } 22 23 .test2 { 24 background: linear-gradient(to right in srgb, color(srgb none 1 none), var(--stop2)); 25 } 26 27 .test3 { 28 background: linear-gradient(to right in oklab, color(srgb none 1 none), var(--stop2)); 29 } 30 31 .test4 { 32 background: linear-gradient(to right in display-p3, color(srgb none 1 none), var(--stop2)); 33 } 34 </style> 35 <p>They should be equivalent to `background: color-mix(in srgb, color(srgb none 1 none), lime)`</p> 36 <div class="test test1">This should be a lime background.</div> 37 <div class="test test2">This should be a lime background.</div> 38 <div class="test test3">This should be a lime background.</div> 39 <div class="test test4">This should be a lime background.</div>