custom-highlight-painting-inheritance-001.html (946B)
1 <!DOCTYPE html> 2 <meta charset="UTF-8"> 3 <title>CSS Highlight API Test: Inheritance</title> 4 <link rel="help" href="https://drafts.csswg.org/css-highlight-api-1/"> 5 <link rel="match" href="custom-highlight-painting-inheritance-001-ref.html"> 6 <meta name="assert" value="Highlighted elements inherit style properties from their parent if they're not set"> 7 <style> 8 div::highlight(div-highlight) { 9 background-color: green; 10 color: red; 11 } 12 span::highlight(span-highlight) { 13 color: blue; 14 } 15 </style> 16 <body> 17 <div>There should be only one green rectangle below from [ to ]:</div> 18 <div id="target">[<span> <strong> </strong> </span>]</div> 19 <script> 20 let r = new Range(); 21 const node = document.getElementById("target"); 22 r.setStart(node, 1); 23 r.setEnd(node, 2); 24 25 CSS.highlights.set("div-highlight", new Highlight(r)); 26 CSS.highlights.set("span-highlight", new Highlight(r)); 27 </script>