| <!DOCTYPE html> |
| <link rel="match" href="gradient-infinity-002-ref.html"> |
| <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"> |
| <title>All boxes should have a lime background.</title> |
| <style> |
| .box { |
| display: flex; |
| flex-wrap: wrap; |
| gap: 10px; |
| } |
| .box > div { |
| width: 100px; |
| height: 100px; |
| border: solid 1px black; |
| padding: 1px; |
| } |
| .test1 { |
| background: linear-gradient(to right in srgb, lime 100px, red calc(1px / 0)); |
| } |
| .test2 { |
| background: linear-gradient(to right in srgb, lime 100px, red calc(Infinity * 1px)); |
| } |
| .test3 { |
| background: linear-gradient(to left in srgb, lime 100px, red calc(Infinity * 1px)); |
| } |
| .test4 { |
| background: linear-gradient(to top in srgb, lime 100px, red calc(1px / 0)); |
| } |
| .test5 { |
| background: linear-gradient(to bottom in srgb, lime 100px, red calc(Infinity * 1px)); |
| } |
| </style> |
| <div class="box"> |
| <div class="test1"></div> |
| <div class="test2"></div> |
| <div class="test3"></div> |
| <div class="test4"></div> |
| <div class="test5"></div> |
| </div> |
