highlight-painting-003-ref.html (1093B)
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 .background { 16 width: 100%; 17 height: 0.25em; 18 background: #707070C0; 19 } 20 .unselected { 21 color: #E03838C0; 22 text-decoration: #C0C000C0 solid line-through; 23 } 24 .selected { 25 background: #38E038C0; 26 text-decoration: #663399C0 solid line-through; 27 } 28 .selected, .selected * { 29 color: #663399C0; 30 } 31 .selection { 32 text-decoration: #3838E0C0 solid underline; 33 } 34 </style> 35 <main class="highlight_reftest"> 36 <div class="hrt_layers"> 37 <div class="background"></div> 38 <div>qui<span class="unselected">ck</span></div> 39 <div><span class="selected"><span class="selection">qui</span></span>ck</div> 40 quick 41 </div> 42 </main>