colrv1-08-ref.html (1592B)
1 <!DOCTYPE html> 2 <html> 3 <meta charset=utf-8> 4 <title>COLRv1 font test: linear gradient with degenerate color line</title> 5 <style> 6 @font-face { 7 font-family: CAhem; 8 src: url("CAhem.ttf"); 9 } 10 div div { width: 50px; height: 50px; } 11 span { display: inline-block; height: 50px; } 12 .blue { background: blue; } 13 .red { background: red; } 14 div:nth-child(1) .red { width: 0px } 15 div:nth-child(1) .blue { width: 50px } 16 div:nth-child(2) .red { width: 5px } 17 div:nth-child(2) .blue { width: 45px } 18 div:nth-child(3) .red { width: 10px } 19 div:nth-child(3) .blue { width: 40px } 20 div:nth-child(4) .red { width: 15px } 21 div:nth-child(4) .blue { width: 35px } 22 div:nth-child(5) .red { width: 20px } 23 div:nth-child(5) .blue { width: 30px } 24 div:nth-child(6) .red { width: 25px } 25 div:nth-child(6) .blue { width: 25px } 26 div:nth-child(7) .red { width: 30px } 27 div:nth-child(7) .blue { width: 20px } 28 div:nth-child(8) .red { width: 35px } 29 div:nth-child(8) .blue { width: 15px } 30 div:nth-child(9) .red { width: 40px } 31 div:nth-child(9) .blue { width: 10px } 32 </style> 33 34 <div> 35 <div><span class=red></span><span class=blue></span></div> 36 <div><span class=red></span><span class=blue></span></div> 37 <div><span class=red></span><span class=blue></span></div> 38 <div><span class=red></span><span class=blue></span></div> 39 <div><span class=red></span><span class=blue></span></div> 40 <div><span class=red></span><span class=blue></span></div> 41 <div><span class=red></span><span class=blue></span></div> 42 <div><span class=red></span><span class=blue></span></div> 43 <div><span class=red></span><span class=blue></span></div> 44 </div>