selection-background-painting-order.html (1943B)
1 <!doctype html> 2 <meta charset="utf-8"> 3 <!-- see “Selection regression tests” in README.md --> 4 <title>CSS Pseudo-Elements Test: ::selection background always paints over unselected parts when selecting text</title> 5 <link rel="author" name="Delan Azabani" href="mailto:dazabani@igalia.com"> 6 <link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#highlight-painting"> 7 <link rel="help" href="https://drafts.csswg.org/css-text-decor-4/#painting"> 8 <link rel="help" href="https://www.w3.org/TR/CSS22/zindex.html#painting-order"> 9 <link rel="match" href="selection-background-painting-order-ref1.html"> 10 <link rel="match" href="selection-background-painting-order-ref2.html"> 11 <meta name="assert" value="This test verifies that when selecting text, the ::selection background always paints over unselected parts."> 12 <script src="support/selections.js"></script> 13 <link rel="stylesheet" href="support/highlights.css"> 14 <style> 15 @font-face { 16 font-family: CSSTest; 17 src: url(/fonts/CSSTest/csstest-basic-italic.ttf); 18 } 19 main { 20 font: 80px/1 CSSTest; 21 margin: 0.5em; 22 width: min-content; 23 } 24 main > span { 25 background: black; 26 color: orange; 27 } 28 main > span::selection { 29 /* 30 Safari on macOS: opaque selection backgrounds are made 31 translucent in the used value, so we need to choose a 32 background color with known but non-opaque alpha. 33 */ 34 background: #0000FFC0; 35 color: transparent; 36 } 37 </style> 38 <p>Test passes if the blue rectangle below contains no proper orange, only orange dimmed by blue. 39 <main class="highlight_reftest"><span>ii∫∫∫</span></main> 40 <script> 41 const target = document.querySelector("main > span"); 42 selectRangeWith(range => { 43 range.selectNodeContents(target); 44 range.setStart(target.childNodes[0], 0); 45 range.setEnd(target.childNodes[0], 3); 46 }); 47 </script>