<!DOCTYPE html>
<html>
<head>
<script src="../../../resources/js-test-pre.js"></script>
<script src="resources/polyfill.js"></script>
</head>
<body>
<pre id="console"></pre>
<iframe name="i0"></iframe>
<iframe name="i1"></iframe>
<iframe name="i1"></iframe>
<iframe name="i2"></iframe>

<div id="host"></div>

<script>

description("This test ensures that iframe inside shadow isn't visible from the host document.");

// At first, check iframe in usual way
shouldBe("window.length", "4");
var i0 = document["i0"];
var i0byname = document.getElementsByName("i0");
shouldBe("i0byname.length", "1");
shouldBe("i0", "i0byname[0].contentWindow");

var i1 = document["i1"];
var i2byname = document.getElementsByName("i0");
shouldBe("i1.length", "2");

// Then Adding some iframes into a shadow.

var host = document.getElementById("host");
var shadow = host.webkitCreateShadowRoot();
var i2InShadow = document.createElement("iframe");
i2InShadow.setAttribute("name", "i2");
shadow.appendChild(i2InShadow);

var i3InShadow = document.createElement("iframe");
i3InShadow.setAttribute("name", "i3");
shadow.appendChild(i3InShadow);

shouldBe("window.length", "4");

var i2 = document["i2"];
var i2byname = document.getElementsByName("i2");
shouldBe("i2byname.length", "1");
shouldBe("i2byname[0].contentWindow", "i2");

var i3 = document["i3"];
var i3byname = document.getElementsByName("i3");
shouldBe("i3byname.length", "0");
shouldBe("i3", "undefined");

// Moving iframes across shadow boundary to ensure
// That window.length and property availability are
// correctly updated.

shadow.appendChild(i0.frameElement);

shouldBe("window.length", "3");
shouldBe("document['i0']", "undefined");

document.body.appendChild(i3InShadow);
shouldBe("window.length", "4");
shouldBe("document['i3']", "i3InShadow.contentWindow");

</script>

<script src="../../../resources/js-test-post.js"></script>
</body>
</html>