39 lines
1.3 KiB
HTML
39 lines
1.3 KiB
HTML
<!DOCTYPE html>
|
|
<html reftest-print-range="selection">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<link id="style" href="print.css" rel="stylesheet">
|
|
<script>
|
|
function selectNodesInShadowTree() {
|
|
let host = document.getElementById("host");
|
|
host.attachShadow({ mode: "open" }).innerHTML = `
|
|
<link id="style" href="print.css" rel="stylesheet">
|
|
<p id="shadowContent1">ShadowContent1</p>
|
|
<p id="shadowContent2">ShadowContent2</p>
|
|
<p id="shadowContent3">ShadowContent3</p>
|
|
`;
|
|
|
|
const innerHost = document.createElement("div");
|
|
const innerRoot = innerHost.attachShadow({ mode: "open" });
|
|
innerRoot.innerHTML = `
|
|
<link id="style" href="print.css" rel="stylesheet">
|
|
<p>InnerContent</p>
|
|
`;
|
|
host.shadowRoot.insertBefore(innerHost, host.shadowRoot.getElementById("shadowContent2"));
|
|
|
|
// A selection where the range contains a nested shadow tree.
|
|
window.getSelection()
|
|
.setBaseAndExtent(
|
|
lightContent1.firstChild,
|
|
3,
|
|
lightContent2.firstChild,
|
|
4);
|
|
}
|
|
</script>
|
|
</head>
|
|
<body onload="selectNodesInShadowTree()">
|
|
<p id="lightContent1">LightContent1</p>
|
|
<div id="host">Shouldn't show up (in the shadows)</div>
|
|
<p id="lightContent2">LightContent2</p>
|
|
</body>
|
|
</html>
|