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-first-line-pseudo-003.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<title>text-box-trim trims the first line to the font-family set by ::first-line, not the block's own font</title>
<link rel="match" href="text-box-trim-first-line-pseudo-003-ref.html">
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<style>
@font-face {
font-family: CSSTest;
src: url(/fonts/CSSTest/csstest-basic-regular.ttf);
}
.spacer {
background: lightgray;
block-size: 60px;
}
.target {
font: 100px/1 Ahem;
text-box: trim-start text;
}
.target::first-line {
/*
* The CSSTest font has non-zero internal leading (max ascent + max descent is
* greater than the em-size), so its logical height is larger than Ahem's.
* Proper application of text-box-trim using the ::first-line font metric
* should therefore result in a larger block size.
*/
font-family: CSSTest;
background: blue;
color: transparent;
}
</style>
<div class="spacer"></div>
<div class="target">XXXX<br>XXXX</div>
<div class="spacer"></div>