gradient-analogous-missing-components-001.html (1341B)
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-001-ref.html"> 10 <style> 11 .test { 12 margin: 50px; 13 width: 200px; 14 height: 50px; 15 border: 1px solid black; 16 } 17 18 .test1 { 19 background: linear-gradient(90deg in srgb, hsl(60deg 0 50%), yellow); 20 } 21 22 .test2 { 23 background: linear-gradient(90deg in srgb, hsl(20deg 0 50%), yellow); 24 } 25 26 .test3 { 27 background: linear-gradient(90deg in srgb, hsl(60deg none 50%), yellow); 28 } 29 30 .test4 { 31 background: linear-gradient(90deg in srgb, hsl(none 0 50%), yellow); 32 } 33 34 .test5 { 35 background: linear-gradient(90deg in srgb, hsl(none none 50%), yellow); 36 } 37 </style> 38 39 <div class="test test1"></div> 40 <div class="test test2"></div> 41 <div class="test test3"></div> 42 <div class="test test4"></div> 43 <div class="test test5"></div>