highlight-painting-004-ref1.html (1091B)
1 <!doctype html> 2 <meta charset="utf-8"> 3 <link rel="author" name="Delan Azabani" href="mailto:dazabani@igalia.com"> 4 <link rel="stylesheet" href="support/highlights.css"> 5 <style> 6 * { 7 text-decoration-skip-ink: none; 8 text-decoration-skip: none; 9 } 10 main { 11 font-size: 7em; 12 margin: 0.5em; 13 width: min-content; 14 } 15 .unselected { 16 text-decoration: #E03838C0 wavy underline; 17 color: #C0C000C0; 18 } 19 .selected { 20 background: #38E038C0; 21 text-decoration: #3838E0C0 wavy underline; 22 } 23 .selected, .selected * { 24 color: #3838E0C0; 25 } 26 .selection { 27 text-decoration: #663399C0 wavy line-through; 28 } 29 </style> 30 <!-- 31 In this ref, three separate wavy lines are painted, with two 32 spanning the selected part and one spanning the unselected part. 33 --> 34 <main class="highlight_reftest"> 35 <div class="hrt_layers"> 36 <div>qui<span class="unselected">ck</span></div> 37 <div><span class="selected"><span class="selection">qui</span></span>ck</div> 38 quick 39 </div> 40 </main>