40 lines
1.1 KiB
HTML
40 lines
1.1 KiB
HTML
<!doctype html>
|
|
<meta charset="utf-8">
|
|
<link rel="author" name="Delan Azabani" href="mailto:dazabani@igalia.com">
|
|
<link rel="stylesheet" href="support/highlights.css">
|
|
<style>
|
|
* {
|
|
text-decoration-skip-ink: none;
|
|
text-decoration-skip: none;
|
|
}
|
|
main {
|
|
font-size: 7em;
|
|
margin: 0.5em;
|
|
width: min-content;
|
|
}
|
|
.unselected {
|
|
text-decoration: #E03838C0 wavy underline;
|
|
color: #C0C000C0;
|
|
}
|
|
.selected {
|
|
background: #38E038C0;
|
|
text-decoration: #3838E0C0 wavy underline;
|
|
}
|
|
.selected, .selected * {
|
|
color: #3838E0C0;
|
|
}
|
|
.selection {
|
|
text-decoration: #663399C0 wavy line-through;
|
|
}
|
|
</style>
|
|
<!--
|
|
In this ref, three separate wavy lines are painted, with two
|
|
spanning the selected part and one spanning the unselected part.
|
|
-->
|
|
<main class="highlight_reftest">
|
|
<div class="hrt_layers">
|
|
<div>qui<span class="unselected">ck</span></div>
|
|
<div><span class="selected"><span class="selection">qui</span></span>ck</div>
|
|
quick
|
|
</div>
|
|
</main>
|