Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /css/css-inline/text-box-trim/text-box-trim-end-003.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<title>Test `text-box: trim-end text` selects correct text-under baseline</title>
<link rel="match" href="text-box-trim-end-003-ref.html">
<meta charset="utf-8">
<style>
@font-face {
/**
* CSSTest font has non-zero internal leading (max ascent + max descent is
* greater than the em-size). Trimming to the `text` edge should only trim
* external leading (from the line-height) and not a font's internal leading.
*
*/
font-family: CSSTest;
src: url(/fonts/CSSTest/csstest-basic-regular.ttf);
}
.spacer {
background: lightgray;
block-size: 100px;
}
.target {
font: 100px/2 CSSTest;
text-box: trim-end text;
}
canvas {
background: green;
vertical-align: text-bottom;
}
.inner {
background: orange;
}
</style>
<div class="spacer"></div>
<div class="target">
<span class="inner">Test</span><canvas width="50" height="50"></canvas>
</div>
<div class="spacer"></div>