50 lines
1.6 KiB
HTML
50 lines
1.6 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, two wavy lines appear to be painted, with one
|
|
spanning the selected part and one spanning the whole text. The
|
|
latter changes color where selected and unselected meet.
|
|
-->
|
|
<main class="highlight_reftest">
|
|
<div class="hrt_layers">
|
|
<!--
|
|
While the selection starts from the very first letter, we
|
|
still include a layer for the left unselected part, just
|
|
in case the wavy line has a long tip like in Blink.
|
|
-->
|
|
<div><span class="unselected">quick</span></div>
|
|
<div><span class="hrt_cover">quick</span>quick</div>
|
|
<div><span class="hrt_hider"><div><span class="selected">quick</span></div>quick</span></div>
|
|
<div><span class="hrt_cover">ck</span>quick</div>
|
|
<div>qui<span class="hrt_hider"><span class="unselected">quick</span>ck</span></div>
|
|
<div><span class="selection">qui</span>ck</div>
|
|
quick
|
|
</div>
|
|
</main>
|