<!doctype html> <meta charset="utf-8"> <title>CSS Pseudo-Elements Test: highlight painting</title> <link rel="author" name="Delan Azabani" href="mailto:dazabani@igalia.com"> <link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#highlight-painting"> <link rel="help" href="https://drafts.csswg.org/css-text-decor-4/#painting"> <link rel="help" href="https://www.w3.org/TR/CSS22/zindex.html#painting-order"> <link rel="match" href="highlight-painting-004-ref1.html"> <link rel="match" href="highlight-painting-004-ref2.html"> <link rel="match" href="highlight-painting-004-ref3.html"> <meta name="assert" value="::selection overlay background and decorations are independent of those of the originating element, and originating element decorations lose their colour"> <script src="support/selections.js"></script> <link rel="stylesheet" href="support/highlights.css"> <style> /* Topmost last: 1. originating underline on unselected text (red) 2. unselected text (yellow) 3. ::selection background (green) 4. originating underline on selected text (blue!) 5. selected text (blue) 6. ::selection line-through on selected text (purple) Decoration paints are ordered by text-decoration-line (underline, overline, text, line-through), then by highlight overlay (originating, ::grammar-error, ::spelling-error, ::target-text, ::selection). */ * { text-decoration-skip-ink: none; text-decoration-skip: none; } main { font-size: 7em; margin: 0.5em; width: min-content; text-decoration: #E03838C0 wavy underline; color: #C0C000C0; } main::selection { background: #38E038C0; color: #3838E0C0; text-decoration: #663399C0 wavy line-through; } </style> <main class="highlight_reftest">quick</main> <script> const target = document.querySelector("main"); selectRangeWith(range => { range.selectNodeContents(target); range.setStart(target.childNodes[0], 0); range.setEnd(target.childNodes[0], 3); }); </script>