highlight-text-replace.html (1664B)
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-replace-ref.html"> 8 <meta name="assert" content="Multiple highlights should be able to be specified."> 9 <style> 10 :root { 11 /* This reduces the likelihood that a highlight background-area 12 will overlap with the previous glyph. That overlap is worth 13 avoiding, because the previous glyph's overlapping part will get 14 clipped in the reference case, but might not in the testcase. */ 15 font-family: monospace; 16 } 17 ::highlight(example-highlight) { 18 background-color: yellow; 19 color:green; 20 } 21 </style> 22 </head> 23 <body> 24 <span id="text1">One two three</span> 25 26 <script> 27 let textElement = document.getElementById('text1'); 28 let highlight1 = new Highlight(new StaticRange({startContainer: textElement.childNodes[0], startOffset: 1, endContainer: textElement.childNodes[0], endOffset: 2})); 29 30 let highlight2 = new Highlight(new StaticRange({startContainer: textElement.childNodes[0], startOffset: 3, endContainer: textElement.childNodes[0], endOffset: 4})); 31 highlight2.add(new StaticRange({startContainer: textElement.childNodes[0], startOffset: 5, endContainer: textElement.childNodes[0], endOffset: 6})); 32 33 CSS.highlights.set("example-highlight", highlight1); 34 CSS.highlights.set("example-highlight", highlight2); 35 </script> 36 </body> 37 </html>