highlight-priority-painting.html (2326B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>Highlight priority attribute painting correctness</title> 5 <link rel="help" href="https://drafts.csswg.org/css-highlight-api-1/#priorities"> 6 <link rel="match" href="highlight-priority-painting-ref.html"> 7 <style> 8 ::highlight(yellow-highlight) { 9 background-color: yellow; 10 } 11 ::highlight(green-highlight) { 12 background-color: green; 13 } 14 ::highlight(blue-highlight) { 15 background-color: blue; 16 } 17 </style> 18 </head> 19 <body> 20 <span id="green-highlight">Green</span> 21 <span id="yellow-highlight">Yellow</span> 22 <span id="blue-highlight">Blue</span> 23 <span id="yellow-blue-highlight">Yellow-Blue</span> 24 25 <script> 26 let yellowBlue = document.getElementById("yellow-blue-highlight"); 27 let green = document.getElementById("green-highlight"); 28 let highlightGreen = new Highlight(new StaticRange({ 29 startContainer: green.childNodes[0], 30 startOffset: 0, 31 endContainer: green.childNodes[0], 32 endOffset: 5 33 })); 34 let yellow = document.getElementById("yellow-highlight"); 35 let highlightYellow = new Highlight(new StaticRange({ 36 startContainer: yellow.childNodes[0], 37 startOffset: 0, 38 endContainer: yellow.childNodes[0], 39 endOffset: 6 40 }), new StaticRange({ 41 startContainer: yellowBlue.childNodes[0], 42 startOffset: 0, 43 endContainer: yellowBlue.childNodes[0], 44 endOffset: 6 45 })); 46 let blue = document.getElementById("blue-highlight"); 47 let highlightBlue = new Highlight(new StaticRange({ 48 startContainer: blue.childNodes[0], 49 startOffset: 0, 50 endContainer: blue.childNodes[0], 51 endOffset: 4 52 }), new StaticRange({ 53 startContainer: yellowBlue.childNodes[0], 54 startOffset: 0, 55 endContainer: yellowBlue.childNodes[0], 56 endOffset: 11 57 })); 58 CSS.highlights.set("yellow-highlight", highlightYellow); 59 CSS.highlights.set("green-highlight", highlightGreen); 60 CSS.highlights.set("blue-highlight", highlightBlue); 61 highlightYellow.priority = 10; 62 highlightBlue.priority = -1; 63 </script> 64 </body> 65 </html>