highlight-painting-002.html (1324B)
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-002-ref.html"> 9 <meta name="assert" value="::selection overlay is painted in the correct order, including originating element shadows (but not text proper) where selected"> 10 <script src="support/selections.js"></script> 11 <link rel="stylesheet" href="support/highlights.css"> 12 <style> 13 :root { 14 writing-mode: vertical-rl; 15 } 16 p { 17 font-size: 7em; 18 color: #E03838C0; 19 text-shadow: 0.1250em 0.1250em #C0C000C0; 20 } 21 p::selection { 22 color: #707070C0; 23 background: #38E038C0; 24 text-shadow: 0.2500em 0.2500em #3838E0C0; 25 } 26 </style> 27 <p class="highlight_reftest">quick 28 <script> 29 const target = document.querySelector("p"); 30 selectRangeWith(range => { 31 range.selectNodeContents(target); 32 range.setStart(target.childNodes[0], 1); 33 range.setEnd(target.childNodes[0], 4); 34 }); 35 </script>