test-print-selection-shadow-crossing-3.html (1313B)
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 const innerHost = document.createElement("div"); 17 const innerRoot = innerHost.attachShadow({ mode: "open" }); 18 innerRoot.innerHTML = ` 19 <link id="style" href="print.css" rel="stylesheet"> 20 <p>InnerContent</p> 21 `; 22 host.shadowRoot.insertBefore(innerHost, host.shadowRoot.getElementById("shadowContent2")); 23 24 // A selection where the range contains a nested shadow tree. 25 window.getSelection() 26 .setBaseAndExtent( 27 lightContent1.firstChild, 28 3, 29 lightContent2.firstChild, 30 4); 31 } 32 </script> 33 </head> 34 <body onload="selectNodesInShadowTree()"> 35 <p id="lightContent1">LightContent1</p> 36 <div id="host">Shouldn't show up (in the shadows)</div> 37 <p id="lightContent2">LightContent2</p> 38 </body> 39 </html>