custom-highlight-painting-004-2.html (1109B)
1 <!DOCTYPE html> 2 <meta charset="UTF-8"> 3 <title>CSS Highlight API Test: </title> 4 <link rel="help" href="https://drafts.csswg.org/css-highlight-api-1/"> 5 <link rel="match" href="custom-highlight-painting-004-2-ref.html"> 6 <meta name="assert" value="When painting overlapping highlights with the same .priority, the one added last should be painted on top; and style properties not defined by the one on top (background-color in this case) should follow the rules of the next Highlight from top to bottom until there's one that overwrites default (or use default value otherwise)."> 7 <meta name="fuzzy" content="0-88;0-4"> 8 <style> 9 ::highlight(foo) { 10 color:blue; 11 background-color:yellow; 12 } 13 ::highlight(bar) { 14 color:orange; 15 } 16 </style> 17 <body>Some text 18 <script> 19 let textNode = document.body.firstChild; 20 21 let r1 = new Range(); 22 r1.setStart(textNode, 0); 23 r1.setEnd(textNode, 6); 24 25 let r2 = new Range(); 26 r2.setStart(textNode, 3); 27 r2.setEnd(textNode, 9); 28 29 let h1 = new Highlight(r1); 30 let h2 = new Highlight(r2); 31 32 CSS.highlights.set("foo", h1); 33 CSS.highlights.set("bar", h2); 34 </script>