<!DOCTYPE html>
<html>
<head>
<script src="../../../resources/js-test-pre.js"></script>
<script src="../../dom/shadow/resources/polyfill.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.webkitCreateShadowRoot();
  shadow1.innerHTML = "<div id='E'>/div>";
  var e = shadow1.getElementById("E");
  var shadow2 = e.webkitCreateShadowRoot();
  shadow2.innerHTML = "<div id='F'></div>";
  var f = shadow2.getElementById("F");
  var shadow3 = f.webkitCreateShadowRoot();
  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.");
  div = document.createElement("div");
  document.body.appendChild(div);
  shadow1 = div.webkitCreateShadowRoot();
  shadow1.innerHTML = "<div id='H'></div>";

  var h = shadow1.getElementById("H");
  shadow2 = h.webkitCreateShadowRoot();
  shadow2.innerHTML = "<div>shadow2</div>";
  shadow3 = h.webkitCreateShadowRoot();
  shadow3.innerHTML = "<div>shadow3</div>";
  shouldBe("internals.parentTreeScope(shadow2)", "shadow1");
  shouldBe("internals.parentTreeScope(shadow3)", "shadow1");

  document.body.removeChild(div);

  debug("Creating multiple shadow dom subtrees from bottom to top.");
  f = document.createElement("div");
  shadow3 = f.webkitCreateShadowRoot();
  shadow3.innerHTML = "<div id='G'></div>";
  e = document.createElement("div");
  shadow2 = e.webkitCreateShadowRoot();
  shadow2.appendChild(f);
  div = document.createElement("div");
  shadow1 = div.webkitCreateShadowRoot();
  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>
  <script src="../../../resources/js-test-post.js"></script>
</body>
</html>