<!doctype html> <meta charset="utf-8"> <title>CSS Pseudo-Elements Test: Shadows on highlights vertical text</title> <link rel="author" name="Stephen Chenney" href="mailto:schenney@igalia.com"> <link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#highlight-painting"> <link rel="match" href="highlight-painting-shadows-vertical-ref.html"> <meta name="assert" value="::selection and ::target-text both with shadows are painted in the correct order, including originating element shadows"> <meta name="fuzzy" content="0-32;0-4"> <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> <script src="support/selections.js"></script> <style> :root { font-family: Ahem; writing-mode: vertical-lr; line-height: 1; white-space: pre; } p { color: black; text-shadow: 0.1em 0.1em rgba(0,0,0,0.5); position: absolute; top: 10px; left: 10px; } p::selection { color: green; text-shadow: -0.25em -0.25em rgba(0,128,0,0.5); } p::target-text { color: blue; text-shadow: 0.25em 0.25em rgba(0,0,128,0.5); } </style> <p>partially selected target</p> <script> window.location.hash = "#:~:text=target"; const target = document.querySelector("p"); selectRangeWith(range => { range.selectNodeContents(target); range.setStart(target.childNodes[0], 4); range.setEnd(target.childNodes[0], 21); }); </script>