gradient-analogous-missing-components-003.html (1312B)
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 <meta name="assert" content="Tests that analogous missing components logic works."> 8 <meta name="fuzzy" content="maxDifference=0-1;totalPixels=0-40000"> 9 <link rel="match" href="gradient-analogous-missing-components-003-ref.html"> 10 <style> 11 .test { 12 margin: 10px 50px; 13 width: 200px; 14 height: 50px; 15 border: 1px solid black; 16 --stop2: rgb(0 255 0); /* lime */ 17 } 18 19 .test1 { 20 background: linear-gradient(to right in hsl shorter hue, color(srgb none 1 none), var(--stop2)); 21 } 22 23 .test2 { 24 background: linear-gradient(to right in hsl increasing hue, color(srgb none 1 none), var(--stop2)); 25 } 26 27 .test3 { 28 background: linear-gradient(to right in hsl decreasing hue, color(srgb none 1 none), var(--stop2)); 29 } 30 </style> 31 <div class="test test1">This should be a lime background.</div> 32 <div class="test test2">This should be a lime background.</div> 33 <div class="test test3">This should be a lime background.</div>