selection-originating-underline-order.html (1770B)
1 <!doctype html> 2 <meta charset="utf-8"> 3 <!-- see “Selection regression tests” in README.md --> 4 <title>CSS Pseudo-Elements Test: originating underlines remain under 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-originating-underline-order-ref.html"> 10 <meta name="assert" value="This test verifies that selecting text does not cause originating underline decorations, which should always paint under text, to paint over unselected parts."> 11 <script src="support/selections.js"></script> 12 <link rel="stylesheet" href="support/highlights.css"> 13 <link rel="stylesheet" href="/fonts/ahem.css"> 14 <style> 15 * { 16 text-decoration-skip-ink: none; 17 text-decoration-skip: none; 18 } 19 main { 20 font: 80px/1 Ahem; 21 margin: 0.5em; 22 width: min-content; 23 text-decoration: 0.25em red solid underline; 24 /* try to keep decoration between ascent and descent */ 25 text-underline-offset: -0.5em; 26 } 27 main::selection { 28 background: transparent; 29 color: blue; 30 } 31 </style> 32 <p>Test passes if there is no red below and two squares, entirely blue (left) and entirely black (right). 33 <main class="highlight_reftest">XX</main> 34 <script> 35 const target = document.querySelector("main"); 36 selectRangeWith(range => { 37 range.selectNodeContents(target); 38 range.setStart(target.childNodes[0], 0); 39 range.setEnd(target.childNodes[0], 1); 40 }); 41 </script>