size-adjust-tentative-ref.html (1445B)
1 <!DOCTYPE html> 2 <title>Tests the size-adjust descriptor of @font-face</title> 3 4 <style> 5 @font-face { 6 font-family: custom-font; 7 src: local(Ahem), url(/fonts/Ahem.ttf); 8 unicode-range: U+20, U+30-39; /* Digits and space */ 9 } 10 11 .target { 12 font-size: 10px; 13 font-family: custom-font, sans-serif; 14 } 15 16 .unaffected { 17 font-size: 20px; 18 } 19 20 .square { 21 display: inline-block; 22 vertical-align: bottom; 23 background-color: black; 24 width: var(--l); 25 height: var(--l); 26 } 27 </style> 28 29 <p>size-adjust should scale ascent and descent metrics in 'line-height: normal'.</p> 30 <div class="target"> 31 123<br> 32 123<br> 33 123 34 </div> 35 36 <p>In a text node with multiple fonts, size-adjust should only scale characters in the modified font. In the test case below, digits should be scaled, but not letters.</p> 37 <div class="target" style="height: 30px"> 38 123<span class="unaffected">xxx</span> 39 </div> 40 41 <p>In nested elements, size-adjust should be applied to each text segment independently. Both elements below should be scaled to 50% of their original sizes, respectively.</p> 42 <div class="target"> 43 123 44 <div style="font-size: 200%"> 45 456 46 </div> 47 </div> 48 49 <p>The computed 'font-size' value (i.e., 'em') should not be affected. But 'ex' should be scaled since it's measured from the actual glyph.</p> 50 <div class="target" style="font-size: 20px; line-height: 1"> 51 <span class="square" style="--l: 1em"></span><span class="square" style="--l: 0.5ex"></span> 52 </div>