wpt / css / css-text / text-fit / vertical-align.html

Status: FAIL | Duration: 20ms | Subtests: 0/1 | Open test on wpt.live | Open ref on wpt.live | wpt.fyi

TestRefTest SourceRef Source

/css/css-text/text-fit/vertical-align.html

<!DOCTYPE html>
<html lang="en" class="reftest-wait">
<head>
<meta charset="utf-8">
<title>CSS Text Test: text-fit with vertical-align</title>
<link rel="help" href="https://drafts.csswg.org/css-text-5/#text-fit-property">
<link rel="match" href="vertical-align-ref.html">
<meta name="flags" content="ahem">
<link rel="stylesheet" href="/fonts/ahem.css">
<style>
.container {
  font: 10px/1 Ahem;
  width: 92px; /* (30px + 6px + 10px) * 2 */
  text-fit: grow consistent;
  white-space: pre;
  border: 1px solid blue;
  margin-bottom: 10px;
}
.small {
  font-size: 0.6em;
}
.v-baseline { vertical-align: baseline; }
.v-sub { vertical-align: sub; }
.v-super { vertical-align: super; }
.v-length-px { vertical-align: 2px; }
.v-length-em { vertical-align: 0.2em; }
.v-percent { vertical-align: 20%; }
</style>
</head>
<body>
<p>Test passes if the rendering matches the reference file (which uses equivalent font-size instead of text-fit).</p>

<div class="container">AAA<span class="small v-baseline">B</span>C</div>
<div class="container">AAA<span class="small v-sub">B</span>C</div>
<div class="container">AAA<span class="small v-super">B</span>C</div>
<div class="container">AAA<span class="small v-length-px">B</span>C</div>
<div class="container">AAA<span class="small v-length-em">B</span>C</div>
<div class="container">AAA<span class="small v-percent">B</span>C</div>

<script>
document.fonts.ready.then(() => {
  document.documentElement.classList.remove('reftest-wait');
});
</script>
</body>
</html>

/css/css-text/text-fit/vertical-align-ref.html

<!DOCTYPE html>
<html lang="en" class="reftest-wait">
<head>
<meta charset="utf-8">
<title>CSS Text Reference: text-fit with vertical-align</title>
<meta name="flags" content="ahem">
<link rel="stylesheet" href="/fonts/ahem.css">
<style>
.container {
  font: 20px/1 Ahem; /* Scaled font size */
  width: 92px;
  white-space: pre;
  border: 1px solid blue;
  margin-bottom: 10px;
}
.small {
  font-size: 0.6em; /* Will be 12px */
}
.v-baseline { vertical-align: baseline; }
.v-sub { vertical-align: sub; }
.v-super { vertical-align: super; }
.v-length-px { vertical-align: 2px; } /* Remains 2px if text-fit only scales font-size */
.v-length-em { vertical-align: 0.1em; }
.v-percent { vertical-align: 20%; }
</style>
</head>
<body>
<p>Test passes if the rendering matches the reference file (which uses equivalent font-size instead of text-fit).</p>

<div class="container">AAA<span class="small v-baseline">B</span>C</div>
<div class="container">AAA<span class="small v-sub">B</span>C</div>
<div class="container">AAA<span class="small v-super">B</span>C</div>
<div class="container">AAA<span class="small v-length-px">B</span>C</div>
<div class="container">AAA<span class="small v-length-em">B</span>C</div>
<div class="container">AAA<span class="small v-percent">B</span>C</div>

<script>
document.fonts.ready.then(() => {
  document.documentElement.classList.remove('reftest-wait');
});
</script>
</body>
</html>