gradient-infinity-001.html (1139B)
1 <!DOCTYPE html> 2 <link rel="match" href="gradient-infinity-001-ref.html"> 3 <link rel="author" title="CGQAQ" href="mailto:m.jason.liu@gmail.com"> 4 <link rel="author" title="一丝" href="mailto:yiorsi@gmail.com"> 5 <link rel="help" href="https://www.w3.org/TR/css-color-4/#interpolation"> 6 <title>All the boxes below should have the lime background.</title> 7 <style> 8 .box { 9 display: flex; 10 flex-wrap: wrap; 11 gap: 10px; 12 } 13 .box > div { 14 width: 100px; 15 height: 100px; 16 border: solid 1px black; 17 } 18 .test1 { 19 background: linear-gradient(to right in srgb, lime 100px, red calc(1px / 0)); 20 } 21 .test2 { 22 background: linear-gradient(to right in srgb, lime 100px, red calc(Infinity * 1px)); 23 } 24 .test3 { 25 background: linear-gradient(to left in srgb, lime 100px, red calc(Infinity * 1px)); 26 } 27 .test4 { 28 background: linear-gradient(to top in srgb, lime 100px, red calc(1px / 0)); 29 } 30 .test5 { 31 background: linear-gradient(to bottom in srgb, lime 100px, red calc(Infinity * 1px)); 32 } 33 </style> 34 <div class="box"> 35 <div class="test1"></div> 36 <div class="test2"></div> 37 <div class="test3"></div> 38 <div class="test4"></div> 39 <div class="test5"></div> 40 </div>