custom-highlight-painting-019.html (1230B)
1 <!DOCTYPE html> 2 <meta charset="UTF-8"> 3 <title>CSS Highlight API Test: Non-overlapping highlight colors</title> 4 <link rel="author" title="Stephen Chenney" href="mailto:schenney@igalia.com"> 5 <link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#highlight-text"> 6 <link rel="match" href="custom-highlight-painting-019-ref.html"> 7 <meta name="assert" value="When painting non-overlapping highlights the current color should be resolved against the next layer beneath the highlight at the current location within the span."> 8 <meta name="fuzzy" content="0-250;0-6"> 9 <style> 10 body { 11 text-decoration: 2px green underline; 12 } 13 ::highlight(foo) { 14 color:blue; 15 text-decoration: 2px blue underline; 16 } 17 ::highlight(bar) { 18 text-decoration-line: underline; 19 text-decoration-thickness: 2px; 20 } 21 </style> 22 <body>This part should be blue and this part should be black 23 <script> 24 let textNode = document.body.firstChild; 25 26 let r1 = new Range(); 27 r1.setStart(textNode, 0); 28 r1.setEnd(textNode, 24); 29 30 let r2 = new Range(); 31 r2.setStart(textNode, 29); 32 r2.setEnd(textNode, 54); 33 34 let h1 = new Highlight(r1); 35 let h2 = new Highlight(r2); 36 37 CSS.highlights.set("foo", h1); 38 CSS.highlights.set("bar", h2); 39 </script>