font-size-adjust-ic-height.html (1335B)
1 <!DOCTYPE html> 2 <!-- This test is tentative due to https://github.com/w3c/csswg-drafts/issues/6384 --> 3 <meta charset="UTF-8"> 4 <title>font-size-adjust with the ic-height metric</title> 5 <link rel="author" title="ChangSeok Oh" href="mailto:changseok@chromium.org" /> 6 <link rel="help" href="https://www.w3.org/TR/css-fonts-5/#valdef-font-size-adjust-ic-height" /> 7 <link rel="match" href="font-size-adjust-ic-height-ref.html" /> 8 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 9 <meta name="assert" content="Test checks whether font-size-adjust with the ic-height metric adjusts font size."> 10 <style> 11 @font-face { 12 font-family: NotoSansCJK; 13 src: url(/fonts/noto/cjk/NotoSansCJKjp-Regular-subset-chws.otf); 14 } 15 div { 16 font-size: 100px; 17 background: green; 18 color: green; 19 writing-mode: vertical-rl; 20 text-orientation: upright; 21 } 22 .adjusted { 23 font-family: NotoSansCJK; 24 /* The NotoSansCJK font has 1.0 as an aspect value for the CJK water glyph 25 (i.e., the advance height of “水” / the font size). 26 Therefore, an ic-height 2.0 means a 200% scaling up. */ 27 font-size-adjust: ic-height 2.0; 28 } 29 .fallback { 30 font-family: Ahem; 31 /* The Ahem font lacks vertical metrics, so a fallback is applied. */ 32 font-size-adjust: ic-height 0.5; 33 } 34 </style> 35 <div class="adjusted">水</div> 36 <div class="fallback">水</div>