highlight-painting-003.html (2185B)
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-003-ref.html"> 9 <meta name="assert" value="::selection overlay background and decorations are independent of those of the originating element, and originating element decorations lose their colour"> 10 <script src="support/selections.js"></script> 11 <link rel="stylesheet" href="support/highlights.css"> 12 <meta name="fuzzy" content="0-50;0-300"> 13 <style> 14 /* 15 Topmost last: 16 1. originating background (grey) 17 2. unselected text (red) 18 3. originating line-through on unselected text (yellow) 19 4. ::selection background (green) 20 5. ::selection underline on selected text (blue) 21 6. selected text (purple) 22 7. originating line-through on selected text (purple!) 23 24 Decoration paints are ordered by text-decoration-line 25 (underline, overline, text, line-through), then by highlight 26 overlay (originating, ::grammar-error, ::spelling-error, 27 ::target-text, ::selection). 28 */ 29 *, *::selection { 30 text-decoration-skip-ink: none; 31 text-decoration-skip: none; 32 } 33 main { 34 font-size: 7em; 35 margin: 0.5em; 36 width: min-content; 37 height: 0.25em; 38 background: #707070C0; 39 color: #E03838C0; 40 text-decoration: #C0C000C0 solid line-through; 41 } 42 main::selection { 43 background: #38E038C0; 44 text-decoration: #3838E0C0 solid underline; 45 color: #663399C0; 46 } 47 </style> 48 <main class="highlight_reftest">quick</main> 49 <script> 50 const target = document.querySelector("main"); 51 selectRangeWith(range => { 52 range.selectNodeContents(target); 53 range.setStart(target.childNodes[0], 0); 54 range.setEnd(target.childNodes[0], 3); 55 }); 56 </script>