highlight-painting-004.html (2186B)
1 <!doctype html> 2 <meta charset="utf-8"> 3 <title>CSS Pseudo-Elements Test: highlight painting</title> 4 <link rel="author" name="Delan Azabani" href="mailto:dazabani@igalia.com"> 5 <link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#highlight-painting"> 6 <link rel="help" href="https://drafts.csswg.org/css-text-decor-4/#painting"> 7 <link rel="help" href="https://www.w3.org/TR/CSS22/zindex.html#painting-order"> 8 <link rel="match" href="highlight-painting-004-ref1.html"> 9 <link rel="match" href="highlight-painting-004-ref2.html"> 10 <link rel="match" href="highlight-painting-004-ref3.html"> 11 <meta name="assert" value="::selection overlay background and decorations are independent of those of the originating element, and originating element decorations lose their colour"> 12 <script src="support/selections.js"></script> 13 <link rel="stylesheet" href="support/highlights.css"> 14 <meta name="fuzzy" content="0-50;0-320"> 15 <style> 16 /* 17 Topmost last: 18 1. originating underline on unselected text (red) 19 2. unselected text (yellow) 20 3. ::selection background (green) 21 4. originating underline on selected text (blue!) 22 5. selected text (blue) 23 6. ::selection line-through on selected text (purple) 24 25 Decoration paints are ordered by text-decoration-line 26 (underline, overline, text, line-through), then by highlight 27 overlay (originating, ::grammar-error, ::spelling-error, 28 ::target-text, ::selection). 29 */ 30 * { 31 text-decoration-skip-ink: none; 32 text-decoration-skip: none; 33 } 34 main { 35 font-size: 7em; 36 margin: 0.5em; 37 width: min-content; 38 text-decoration: #E03838C0 wavy underline; 39 color: #C0C000C0; 40 } 41 main::selection { 42 background: #38E038C0; 43 color: #3838E0C0; 44 text-decoration: #663399C0 wavy line-through; 45 } 46 </style> 47 <main class="highlight_reftest">quick</main> 48 <script> 49 const target = document.querySelector("main"); 50 selectRangeWith(range => { 51 range.selectNodeContents(target); 52 range.setStart(target.childNodes[0], 0); 53 range.setEnd(target.childNodes[0], 3); 54 }); 55 </script>