font-weight-metrics.html (1295B)
1 <!DOCTYPE html> 2 <html> 3 <title>CSS Fonts - Test that variable-font glyph advances depend on applied weight</title> 4 <link rel="author" title="Jonathan Kew" href="jkew@mozilla.com"> 5 <link rel="help" href="https://drafts.csswg.org/css-fonts-4/#font-weight-prop"/> 6 <link rel="help" href="https://drafts.csswg.org/css-fonts-4/#font-prop-desc"/> 7 <link rel="match" href="font-weight-metrics-ref.html"> 8 <meta name="assert" content="Ensures that glyph advances are adjusted appropriately when the weight axis is varied."/> 9 <meta charset="utf-8"> 10 11 <style> 12 @font-face { 13 font-family: test; 14 font-weight: 100 900; 15 src: url(resources/Inter.var.subset.ttf); 16 } 17 div { 18 font: 32px test; 19 position: absolute; 20 margin: 1em; 21 } 22 .light { 23 background: red; 24 color: red; 25 font-weight: 100; 26 } 27 .heavy { 28 background: green; 29 color: green; 30 font-weight: 900; 31 } 32 </style> 33 34 Test passes if there is a green rectangle and <strong>no red</strong>: 35 36 <!-- Red background that should be entirely covered by the div with the heavy face --> 37 <div class=light> 38 aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa 39 </div> 40 41 <!-- The string here is two characters shorter, but the advance width of the heavy 42 glyphs should be large enough that the light div is still completely covered. --> 43 <div class=heavy> 44 aaaaaaaaaaaaaaaaaaaaaaaaaaaa 45 </div>