custom-highlight-painting-overlapping-highlights-002.html (1733B)
1 <!DOCTYPE html> 2 <meta charset="UTF-8"> 3 <title>CSS Highlight API Test: Overlapping Highlights</title> 4 <link rel="help" href="https://drafts.csswg.org/css-highlight-api-1/"> 5 <link rel="match" href="custom-highlight-painting-overlapping-highlights-002-ref.html"> 6 <meta name="assert" value="UAs must not define any styles for custom highlight pseudo-elements in the default UA stylesheet."> 7 <style> 8 div { 9 font-size: 3em; 10 font-weight: bolder; 11 } 12 #affected1::highlight(highlight1) { 13 color: green; 14 background-color: rgb(0, 255, 0, 0.5); 15 } 16 #affected2::highlight(highlight2) { 17 color: red; 18 background-color: rgba(100, 0, 100, 0.5); 19 } 20 </style> 21 <body><div><span id="affected1">Green on lime.</span><span id="affected2">Red on maroon.</span></div> 22 <script> 23 /* 24 This test is meant to verify that: 25 - UAs must not define any styles for custom highlight pseudo-elements in 26 the default UA stylesheet. 27 - UAs do not paint unstyled custom highlights. 28 29 In this test, highlight1 has higher priority, so it is painted over 30 highlight2. This includes painting for span#affected2, where there is no CSS 31 rule for highlight1. But since unstyled custom highlights are not painted, 32 span#affected2 is still painted with the styles for highlight2. 33 34 See https://drafts.csswg.org/css-highlight-api-1/#default-styles 35 */ 36 37 const div = document.querySelector("div"); 38 39 let r = new Range(); 40 r.setStart(div, 0); 41 r.setEnd(div, 2); 42 let r2 = new Range(); 43 r2.setStart(div, 0); 44 r2.setEnd(div, 2); 45 46 let h = new Highlight(r); 47 h.priority = 3; 48 let h2 = new Highlight(r2); 49 h2.priority = 2; 50 51 CSS.highlights.set("highlight1", h); 52 CSS.highlights.set("highlight2", h2); 53 </script>