colrv1-04.html (970B)
1 <!DOCTYPE html> 2 <html> 3 <meta charset=utf-8> 4 <title>COLRv1 font test: gradient color-stop edge cases</title> 5 <style> 6 @font-face { 7 font-family: CAhem; 8 src: url("CAhem.ttf"); 9 } 10 .test { margin: 10px; padding: 10px; } 11 span { font: 100px/1 CAhem; } 12 .a { font-variation-settings: initial; } 13 .b { font-variation-settings: "COL1" 0.2, "COL3" -0.2; } 14 .c { font-variation-settings: "COL1" 0.4, "COL3" -0.4; } 15 .d { font-variation-settings: "COL1" 0.6, "COL3" -0.6; } 16 .e { font-variation-settings: "COL1" 0.8, "COL3" -0.8; } 17 </style> 18 19 <p>The middle of the five glyphs should be purely red and blue:</p> 20 <div class="test"> 21 <span class="a">e</span> <span class="b">e</span> <span class="c">e</span> <span class="d">e</span> <span class="e">e</span><br> 22 </div> 23 24 <p>The middle of the five glyphs should not render anything:</p> 25 <div class="test"> 26 <span class="a">f</span> <span class="b">f</span> <span class="c">f</span> <span class="d">f</span> <span class="e">f</span><br> 27 </div>