Blitz - WPT: font-size-adjust-ic-height.html

wpt / css / css-fonts / font-size-adjust-ic-height.html

/css/css-fonts/font-size-adjust-ic-height.html

<!DOCTYPE html>
<!-- This test is tentative due to https://github.com/w3c/csswg-drafts/issues/6384 -->
<meta charset="UTF-8">
<title>font-size-adjust with the ic-height metric</title>
<link rel="author" title="ChangSeok Oh" href="mailto:changseok@chromium.org" />
<link rel="help" href="https://www.w3.org/TR/css-fonts-5/#valdef-font-size-adjust-ic-height" />
<link rel="match" href="font-size-adjust-ic-height-ref.html" />
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<meta name="assert" content="Test checks whether font-size-adjust with the ic-height metric adjusts font size.">
<style>
@font-face {
  font-family: NotoSansCJK;
  src: url(/fonts/noto/cjk/NotoSansCJKjp-Regular-subset-chws.otf);
}
div {
  font-size: 100px;
  background: green;
  color: green;
  writing-mode: vertical-rl;
  text-orientation: upright;
}
.adjusted {
  font-family: NotoSansCJK;
  /* The NotoSansCJK font has 1.0 as an aspect value for the CJK water glyph
     (i.e., the advance height of “水” / the font size).
     Therefore, an ic-height 2.0 means a 200% scaling up. */
  font-size-adjust: ic-height 2.0;
}
.fallback {
  font-family: Ahem;
  /* The Ahem font lacks vertical metrics, so a fallback is applied. */
  font-size-adjust: ic-height 0.5;
}
</style>
<div class="adjusted">水</div>
<div class="fallback">水</div>

/css/css-fonts/font-size-adjust-ic-height-ref.html

<!DOCTYPE html>
<meta charset="UTF-8">
<title>font-size-adjust with the ic-height metric</title>
<link rel="author" title="ChangSeok Oh" href="mailto:changseok@chromium.org" />
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<style>
@font-face {
  font-family: NotoSansCJK;
  src: url(/fonts/noto/cjk/NotoSansCJKjp-Regular-subset-chws.otf);
}
div {
  color: green;
  background: green;
  writing-mode: vertical-rl;
  text-orientation: upright;
}
.adjustedRef {
  font-family: NotoSansCJK;
  font-size: 200px;
}
.fallbackRef {
  font-family: Ahem;
  font-size: 50px;
}
</style>
<div class="adjustedRef">水</div>
<div class="fallbackRef">水</div>