test-print-selection-shadow-crossing-2.html (1053B)
1 <!DOCTYPE html> 2 <html reftest-print-range="selection"> 3 <head> 4 <meta charset="utf-8"> 5 <link id="style" href="print.css" rel="stylesheet"> 6 <script> 7 function selectNodesInShadowTree() { 8 let host = document.getElementById("host"); 9 host.attachShadow({ mode: "open" }).innerHTML = ` 10 <link id="style" href="print.css" rel="stylesheet"> 11 <p id="shadowContent1">ShadowContent1</p> 12 <p id="shadowContent2">ShadowContent2</p> 13 <p id="shadowContent3">ShadowContent3</p> 14 `; 15 16 // A shadow-crossing selection where the start node is in 17 // shadow DOM, and the end node is in light DOM. 18 window.getSelection() 19 .setBaseAndExtent( 20 host.shadowRoot.getElementById("shadowContent1").firstChild, 21 3, 22 lightContent2.firstChild, 23 4); 24 } 25 </script> 26 </head> 27 <body onload="selectNodesInShadowTree()"> 28 <p id="lightContent1">LightContent1</p> 29 <div id="host">Shouldn't show up (in the shadows)</div> 30 <p id="lightContent2">LightContent2</p> 31 </body> 32 </html>