custom-highlight-painting-iframe-005.html (1347B)
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-005-ref.html"> 6 <meta name="assert" value="Creating a Highlight in the root Document with a Range in the root document and another one in an iframe is correctly painted when added to the iframe's CSS.highlights (only the iframe's range is painted)."> 7 <style> 8 ::highlight(foo) { 9 color: green; 10 background-color: greenyellow; 11 } 12 </style> 13 <body> 14 <iframe 15 id="iframe" 16 srcdoc=" 17 <style> 18 ::highlight(foo) { 19 color: blue; 20 background-color: cyan; 21 } 22 </style> 23 <span id='span-iframe'>abc</span> 24 " 25 > 26 </iframe> 27 <br> 28 <span id="span-doc">abc</span> 29 <script> 30 let spanDoc = document.querySelector("#span-doc"); 31 let rangeDoc = new Range(); 32 rangeDoc.setStart(spanDoc, 0); 33 rangeDoc.setEnd(spanDoc, 1); 34 35 let iframe = document.querySelector("#iframe"); 36 iframe.onload = () => { 37 let spanIframe = iframe.contentDocument.querySelector("#span-iframe"); 38 let rangeIframe = new Range(); 39 rangeIframe.setStart(spanIframe, 0); 40 rangeIframe.setEnd(spanIframe, 1); 41 42 let h = new Highlight(rangeDoc, rangeIframe); 43 iframe.contentWindow.CSS.highlights.set("foo", h); 44 } 45 </script>