Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /css/css-text/text-fit/vertical-align.html - WPT Dashboard Interop Dashboard
<!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="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>