layout/reftests/printing/test-print-selection-shadow-crossing-1.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       // A shadow-crossing selection where the start node is in light DOM,
  17       // and the end node is in shadow DOM.
  18       window.getSelection()
  19         .setBaseAndExtent(
  20           lightContent1.firstChild,
  21           3,
  22           host.shadowRoot.getElementById("shadowContent1").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>