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