highlight-text-cascade.html (1430B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Multiple custom highlight pseudo elements.</title> 6 <link rel="help" href="https://drafts.csswg.org/css-highlight-api-1/#creating-highlights"> 7 <link rel="match" href="highlight-text-cascade-ref.html"> 8 <meta name="assert" content="Multiple highlights should be able to be specified."> 9 <style> 10 #out::highlight(example-highlight) { 11 background-color: yellow; 12 color:green; 13 } 14 #scoped::highlight(example-highlight) { 15 background-color: blue; 16 color:red; 17 } 18 </style> 19 </head> 20 <body> 21 <div id="out"><span id="text1">One two three</span></div> 22 <div id="scoped"><span id="text2">four five six</span></div> 23 <span id="text3">seven eight nine</span> 24 25 <script> 26 let textElement1 = document.getElementById('text1'); 27 let textElement2 = document.getElementById('text2'); 28 let textElement3 = document.getElementById('text3'); 29 let highlight = new Highlight(new StaticRange({startContainer: textElement1.childNodes[0], startOffset: 0, endContainer: textElement1.childNodes[0], endOffset: 3})); 30 highlight.add(new StaticRange({startContainer: textElement2.childNodes[0], startOffset: 5, endContainer: textElement2.childNodes[0], endOffset: 9})); 31 32 CSS.highlights.set("example-highlight", highlight); 33 </script> 34 </body> 35 </html>