target-text-004.html (822B)
1 <!doctype html> 2 <meta charset="utf-8"> 3 <title>CSS Pseudo-Elements Test: ::target-text color rendering - with selection</title> 4 <link rel="help" href="https://drafts.csswg.org/css-pseudo/#selectordef-target-text"> 5 <link rel="match" href="target-text-lime-green-ref.html"> 6 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> 7 <style> 8 p::target-text { 9 background-color: red; 10 color: lime; 11 } 12 p::selection { 13 background-color: green; 14 color: currentColor; 15 } 16 #sel { 17 font-family: Ahem; 18 } 19 </style> 20 <p>PASS if there are two segments of lime squares with a green square between below.</p> 21 <p id="sel">match me</p> 22 <script> 23 window.location.hash = "#:~:text=match%20me"; 24 let range = document.createRange(); 25 range.selectNodeContents(sel); 26 window.getSelection().addRange(range); 27 </script>