1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
|
<!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>
|
