font-size-adjust-order-001.html (1486B)
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-size-adjust affects the size of the 'ch' unit consistently regardless of the ordering of properties."> 10 <link rel="match" href="font-size-adjust-order-001-ref.html"> 11 <style> 12 div { 13 margin: 10px; 14 font: 20px monospace; 15 background: yellow; 16 } 17 #bg { 18 width: 12ch; 19 height: 2em; 20 background: red; 21 position: absolute; 22 z-index: -1; 23 } 24 #test1 { 25 /* Size the font by its ex-height; this will enlarge the glyphs 26 so the red background block is hidden. */ 27 font-size-adjust: 1.0; 28 width: 10ch; 29 } 30 #test2 { 31 /* This should work exactly the same. */ 32 width: 10ch; 33 font-size-adjust: 1.0; 34 } 35 </style> 36 <body> 37 <p>Test passes if both blocks render the same, and there is no red:</p> 38 <div id="bg"></div> 39 <div id="test1">The quick brown fox jumps over the lazy dog</div> 40 <div id="bg"></div> 41 <div id="test2">The quick brown fox jumps over the lazy dog</div> 42 </body>