custom-highlight-painting-iframe-002.html (978B)
1 <!DOCTYPE html> 2 <meta charset="UTF-8"> 3 <title>CSS Highlight API Test: </title> 4 <link rel="help" href="https://drafts.csswg.org/css-highlight-api-1/"> 5 <link rel="match" href="custom-highlight-painting-iframe-001-ref.html"> 6 <meta name="assert" value="Creating a Highlight in the root Document and registering it in an iframe's CSS.highlights is painted correctly."> 7 <body> 8 <iframe 9 id="iframe" 10 srcdoc=" 11 <style> 12 ::highlight(foo) { 13 color: blue; 14 background-color: cyan; 15 } 16 </style> 17 <span id='span-iframe'>abc</span> 18 " 19 > 20 </iframe> 21 <script> 22 let iframe = document.querySelector("#iframe"); 23 iframe.onload = () => { 24 let spanIframe = iframe.contentDocument.querySelector("#span-iframe"); 25 let rangeIframe = new Range(); 26 rangeIframe.setStart(spanIframe, 0); 27 rangeIframe.setEnd(spanIframe, 1); 28 29 let h = new Highlight(); 30 h.add(rangeIframe); 31 iframe.contentWindow.CSS.highlights.set("foo", h); 32 } 33 </script>