Source code
Revision control
Copy as Markdown
Other Tools
<!DOCTYPE html>
<title>Test `text-box: trim-start text` selects correct text-over baseline</title>
<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/1 CSSTest;
margin-block-start: 0.5em;
}
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>