highlight-text-dynamic.html (1063B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Highlights Paint after dynamic creation.</title> 6 <link rel="help" href="https://drafts.csswg.org/css-highlight-api-1/#creating-highlights"> 7 <link rel="mismatch" href="highlight-text-dynamic-notref.html"> 8 <meta name="assert" content="Highlight should paint after being created after first paint."> 9 <style> 10 ::highlight(example-highlight) { 11 background-color: yellow; 12 color:green; 13 } 14 </style> 15 </head> 16 <body> 17 <span id="text1">One two three</span> 18 19 <script> 20 function setHighlight(timestamp) { 21 let textElement = document.getElementById('text1'); 22 let highlight1 = new Highlight(new StaticRange({startContainer: textElement.childNodes[0], startOffset: 1, endContainer: textElement.childNodes[0], endOffset: 2})); 23 CSS.highlights.set("example-highlight", highlight1); 24 } 25 26 document.body.offsetLeft; 27 window.requestAnimationFrame(setHighlight); 28 </script> 29 </body> 30 </html>