<!DOCTYPE html>
<html>
<body>
<script src="../../../resources/js-test-pre.js"></script>
<script src="resources/polyfill.js"></script>

<div id="wrapper"></div>
<pre id="console"></pre>

<script>
function createDivWithId(id)
{
    var div = document.createElement('div');
    div.id = id;

    return div;
}

description("Tests to ensure ShadowRoot.getElementById works even if a ShadowRoot is orphan.");

var host = document.createElement('div');
var shadowRoot = host.webkitCreateShadowRoot();

var shadowChild1 = createDivWithId('child1');
var shadowChild2 = createDivWithId('child2');
var hostChild1 = createDivWithId('child3');
var hostChild2 = createDivWithId('child4');

host.appendChild(hostChild1);
host.appendChild(hostChild2);
shadowRoot.appendChild(shadowChild1);
shadowRoot.appendChild(shadowChild2);

shouldBe('shadowRoot.getElementById("child1")', 'shadowChild1');
shouldBe('shadowRoot.getElementById("child2")', 'shadowChild2');
shouldBe('shadowRoot.getElementById("child3")', 'null');
shouldBe('shadowRoot.getElementById("child4")', 'null');

shouldBe('document.getElementById("child1")', 'null');
shouldBe('document.getElementById("child2")', 'null');
shouldBe('document.getElementById("child3")', 'null');
shouldBe('document.getElementById("child4")', 'null');

debug('');
debug('Insert elements having the same id');

var shadowChild2_2 = createDivWithId('child2');
shadowRoot.appendChild(shadowChild2_2);

shouldBe('shadowRoot.getElementById("child2")', 'shadowChild2');

var shadowChild2_3 = createDivWithId('child2');
shadowRoot.insertBefore(shadowChild2_3, shadowRoot.firstChild);

shouldBe('shadowRoot.getElementById("child2")', 'shadowChild2_3');

debug('');
debug('Make the host in document');
wrapper.appendChild(host);

shouldBe('shadowRoot.getElementById("child1")', 'shadowChild1');
shouldBe('shadowRoot.getElementById("child2")', 'shadowChild2_3');
shouldBe('shadowRoot.getElementById("child3")', 'null');
shouldBe('shadowRoot.getElementById("child4")', 'null');

shouldBe('document.getElementById("child1")', 'null');
shouldBe('document.getElementById("child2")', 'null');
shouldBe('document.getElementById("child3")', 'child3');
shouldBe('document.getElementById("child4")', 'child4');

debug('');
debug('Add a child and make the host not in document');
var shadowChild5 = createDivWithId('child5');
shadowRoot.appendChild(shadowChild5);
wrapper.removeChild(host);

shouldBe('shadowRoot.getElementById("child5")', 'shadowChild5');

debug('');
wrapper.innerHTML = "";
</script>
<script src="../../../resources/js-test-post.js"></script>
</body>
</html>