size-adjust.tentative.html (1831B)
1 <!DOCTYPE html> 2 <!-- Test is tentative due to the following issues: 3 - https://github.com/w3c/csswg-drafts/issues/6112 4 - https://github.com/w3c/csswg-drafts/issues/6114 5 --> 6 <title>Tests the size-adjust descriptor of @font-face</title> 7 <link rel="help" href="https://drafts.csswg.org/css-fonts-5/#descdef-font-face-size-adjust"> 8 <link rel="author" href="mailto:xiaochengh@chromium.org"> 9 <link rel="match" href="size-adjust-tentative-ref.html"> 10 <link rel="assert" title="size-adjust should resize all metrics of the font face"> 11 12 <style> 13 @font-face { 14 font-family: custom-font; 15 src: local(Ahem), url(/fonts/Ahem.ttf); 16 size-adjust: 50%; 17 unicode-range: U+20, U+30-39; /* Digits and space */ 18 } 19 20 .target { 21 font-size: 20px; 22 font-family: custom-font, sans-serif; 23 } 24 25 .square { 26 display: inline-block; 27 vertical-align: bottom; 28 background-color: black; 29 width: var(--l); 30 height: var(--l); 31 } 32 </style> 33 34 <p>size-adjust should scale ascent and descent metrics in 'line-height: normal'.</p> 35 <div class="target"> 36 123<br> 37 123<br> 38 123 39 </div> 40 41 <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> 42 <div class="target" style="height: 30px"> 43 123xxx 44 </div> 45 46 <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> 47 <div class="target"> 48 123 49 <div style="font-size: 200%"> 50 456 51 </div> 52 </div> 53 54 <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> 55 <div class="target" style="line-height: 1"> 56 <span class="square" style="--l: 1em"></span><span class="square" style="--l: 1ex"></span> 57 </div>