parent-tree-scope-in-shadow.html | Explore in Territory

<!DOCTYPE html>
<html>
<head>
<script src="../../../resources/js-test.js"></script>
</head>
<body>
<div id="test"></div>

<script>
  var div = document.createElement("div");
  document.body.appendChild(div);

  debug("Creating shadow dom subtrees from top to bottom.");
  var shadow1 = div.attachShadow({mode: 'open'});
  shadow1.innerHTML = "<div id='E'>/div>";
  var e = shadow1.getElementById("E");
  var shadow2 = e.attachShadow({mode: 'open'});
  shadow2.innerHTML = "<div id='F'></div>";
  var f = shadow2.getElementById("F");
  var shadow3 = f.attachShadow({mode: 'open'});
  shadow3.innerHTML = "<div id='G'></div>";

  shouldBe("internals.parentTreeScope(shadow1)", "document");
  shouldBe("internals.parentTreeScope(shadow2)", "shadow1");
  shouldBe("internals.parentTreeScope(shadow3)", "shadow2");

  document.body.removeChild(div);

  debug("Creating multiple shadow dom subtrees from bottom to top.");
  f = document.createElement("div");
  shadow3 = f.attachShadow({mode: 'open'});
  shadow3.innerHTML = "<div id='G'></div>";
  e = document.createElement("div");
  shadow2 = e.attachShadow({mode: 'open'});
  shadow2.appendChild(f);
  div = document.createElement("div");
  shadow1 = div.attachShadow({mode: 'open'});
  shadow1.appendChild(e);
  document.body.appendChild(div);

  shouldBe("internals.parentTreeScope(shadow1)", "document");
  shouldBe("internals.parentTreeScope(shadow2)", "shadow1");
  shouldBe("internals.parentTreeScope(shadow3)", "shadow2");

  document.body.removeChild(div);
</script>
</body>
</html>
chromium/third_party/blink/web_tests/fast/dom/shadow/parent-tree-scope-in-shadow.html
