font-size-adjust-metrics-override-ref.html (1791B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <link rel="help" href="https://www.w3.org/TR/css-fonts-5/#font-size-adjust-prop"> 4 <meta name="assert" content="Tests the simultaneous use of font-size-adjust and metrics override descriptorof of @font-face"> 5 <title>Tests if font metric overrides reflect the adjustment of font-size-adjust.</title> 6 <style> 7 @font-face { 8 font-family: Ahem; 9 src: local(Ahem), url(/fonts/Ahem.ttf); 10 } 11 12 .reference { 13 font: 20px Ahem; 14 position: absolute; 15 top: 10px; 16 left: 10px; 17 } 18 19 .overridden-ascent-ref { 20 display: inline-block; 21 background-color: green; 22 width: 1em; 23 height: 1em; /* Scale a reference block to match the overridden ascent of 100%. */ 24 } 25 26 .character { 27 display: inline-block; 28 background-color: green; 29 width: 2em; /* Double-size of an 'X' in Ahem */ 30 height: 2em; /* Double-size of an 'X' in Ahem */ 31 position: absolute; 32 /* Two times of difference between the overridden ascent and the original ascent */ 33 top: 0.4em; 34 left: 1em; 35 } 36 37 .overridden-descent-ref { 38 display: inline-block; 39 background-color: green; 40 width: 1em; 41 height: 0.5em; /* Scale a reference block to match the overridden descen of 50%. */ 42 position: absolute; 43 top: 2.5em; 44 left: 3em; 45 } 46 47 </style> 48 <!-- 49 The three green rectangles below show ascent, character, and descent sizes 50 from the left. The ascent and descent are overridden by 100% and 50% of the 51 specified font size, respectively. The test applies font-size-adjust and font 52 metric overrides simultaneously to text. As we double the text size with 53 font-size-adjust, the ascent and descent override should scale accordingly 54 to double their size. 55 --> 56 <div class="reference"> 57 <span class="overridden-ascent-ref"></span><span class="character"></span><span class="overridden-descent-ref"></span> 58 </div>