custom-highlight-painting-prioritization-003.html (1128B)
1 <!DOCTYPE html> 2 <meta charset="UTF-8"> 3 <title>CSS Highlight API Test: Non-conflicting attributes</title> 4 <link rel="help" href="https://drafts.csswg.org/css-highlight-api-1/#priorities"> 5 <link rel="match" href="custom-highlight-painting-prioritization-003-ref.html"> 6 <meta name="assert" value="Non-conflicting attributes for highlights will be painted even if lower priority"> 7 <style> 8 ::highlight(highlight-1) { 9 background-color: blue; 10 color: white; 11 } 12 ::highlight(highlight-2) { 13 background-color: yellow; 14 } 15 </style> 16 <body> 17 <p>This is an example of two overlapping highlights</p> 18 </body> 19 <script> 20 const text = document.querySelector("p").firstChild; 21 22 // Create two overlapping highlights 23 const range1 = new Range(); 24 range1.setStart(text, 5); 25 range1.setEnd(text, 10); 26 27 const range2 = new Range(); 28 range2.setStart(text, 10); 29 range2.setEnd(text, 18); 30 31 const highlight1 = new Highlight(range1); 32 const highlight2 = new Highlight(range2); 33 34 CSS.highlights.set("highlight-1", highlight1); 35 CSS.highlights.set("highlight-2", highlight2); 36 </script>