font-size-adjust-units-001.html (1378B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Fonts Test: font-size-adjust effect on font-dependent units</title> 4 <link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com"> 5 <link rel="help" title="2.6 Relative sizing: the font-size-adjust property" 6 href="https://drafts.csswg.org/css-fonts/#font-size-adjust-prop"> 7 <link rel="help" title="6.1.1. Font-relative Lengths: the em, rem, ex, rex, cap, rcap, ch, rch, ic, ric, lh, rlh units" 8 href="https://drafts.csswg.org/css-values-4/#font-relative-lengths"> 9 <meta name="assert" content="Font-relative units like ch and ex are affected by font-size-adjust, 10 because they are derived from metrics of the _used_ font."> 11 <link rel="match" href="font-size-adjust-units-001-ref.html"> 12 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 13 <style> 14 div { 15 margin: 10px; 16 font: 100px/1 Ahem; 17 font-size-adjust: 0.8; /* this matches Ahem's ex-height metric */ 18 background: orange; 19 width: 2ch; 20 height: 1ex; 21 } 22 #test1 { 23 background: blue; 24 font-size-adjust: 0.4; 25 width: 4ch; 26 height: 2ex; 27 } 28 #test2 { 29 background: blue; 30 font-size-adjust: 1.6; 31 width: 1ch; 32 height: 0.5ex; 33 } 34 </style> 35 <body> 36 <p>Test passes if the blue rectangles are both the same size as the orange one.</p> 37 <div id="test1"></div> 38 <div id="test2"></div> 39 <div></div> 40 </body>