<!DOCTYPE html> <html> <meta charset=utf-8> <title>COLRv1 font test: linear gradient with degenerate color line</title> <style> @font-face { font-family: CAhem; src: url("CAhem.ttf"); } div div { width: 50px; height: 50px; } span { display: inline-block; height: 50px; } .blue { background: blue; } .red { background: red; } div:nth-child(1) .red { width: 0px } div:nth-child(1) .blue { width: 50px } div:nth-child(2) .red { width: 5px } div:nth-child(2) .blue { width: 45px } div:nth-child(3) .red { width: 10px } div:nth-child(3) .blue { width: 40px } div:nth-child(4) .red { width: 15px } div:nth-child(4) .blue { width: 35px } div:nth-child(5) .red { width: 20px } div:nth-child(5) .blue { width: 30px } div:nth-child(6) .red { width: 25px } div:nth-child(6) .blue { width: 25px } div:nth-child(7) .red { width: 30px } div:nth-child(7) .blue { width: 20px } div:nth-child(8) .red { width: 35px } div:nth-child(8) .blue { width: 15px } div:nth-child(9) .red { width: 40px } div:nth-child(9) .blue { width: 10px } </style> <div> <div><span class=red></span><span class=blue></span></div> <div><span class=red></span><span class=blue></span></div> <div><span class=red></span><span class=blue></span></div> <div><span class=red></span><span class=blue></span></div> <div><span class=red></span><span class=blue></span></div> <div><span class=red></span><span class=blue></span></div> <div><span class=red></span><span class=blue></span></div> <div><span class=red></span><span class=blue></span></div> <div><span class=red></span><span class=blue></span></div> </div>