layout/reftests/printing/test-print-selection-shadow-crossing-3.html

   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>