Source code
Revision control
Copy as Markdown
Other Tools
<!DOCTYPE html>
<style>
.container {
width: 200px;
font-size: 16px;
}
/* ::first-line causes text frames in the first line to have a different
ComputedStyle than the element's primary frame style. This tests that
cached lazy pseudos are findable for viewport invalidation even when
resolved from a frame with a different parent style. */
.container::first-line {
font-weight: bold;
}
/* The highlight uses viewport units */
::highlight(highlight1) {
text-underline-offset: 1vw;
text-decoration-line: underline;
text-decoration-color: green;
text-decoration-thickness: 2vh;
}
</style>
<div id="h1" class="container">First line text here and more text that wraps to second line</div>
<script>
let r1 = new Range();
// Select only text in the first line
r1.setStart(h1.firstChild, 0);
r1.setEnd(h1.firstChild, 10);
CSS.highlights.set("highlight1", new Highlight(r1));
</script>