highlight-painting-shadows-vertical.html (1473B)
1 <!doctype html> 2 <meta charset="utf-8"> 3 <title>CSS Pseudo-Elements Test: Shadows on highlights vertical text</title> 4 <link rel="author" name="Stephen Chenney" href="mailto:schenney@igalia.com"> 5 <link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#highlight-painting"> 6 <link rel="match" href="highlight-painting-shadows-vertical-ref.html"> 7 <meta name="assert" value="::selection and ::target-text both with shadows are painted in the correct order, including originating element shadows"> 8 <meta name="fuzzy" content="0-32;0-4"> 9 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> 10 <script src="support/selections.js"></script> 11 <style> 12 :root { 13 font-family: Ahem; 14 writing-mode: vertical-lr; 15 line-height: 1; 16 white-space: pre; 17 } 18 p { 19 color: black; 20 text-shadow: 0.1em 0.1em rgba(0,0,0,0.5); 21 position: absolute; 22 top: 10px; 23 left: 10px; 24 } 25 p::selection { 26 color: green; 27 text-shadow: -0.25em -0.25em rgba(0,128,0,0.5); 28 } 29 p::target-text { 30 color: blue; 31 text-shadow: 0.25em 0.25em rgba(0,0,128,0.5); 32 } 33 </style> 34 <p>partially selected target</p> 35 <script> 36 window.location.hash = "#:~:text=target"; 37 const target = document.querySelector("p"); 38 selectRangeWith(range => { 39 range.selectNodeContents(target); 40 range.setStart(target.childNodes[0], 4); 41 range.setEnd(target.childNodes[0], 21); 42 }); 43 </script>