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

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

<script>
description("Tests to ensure ShadowRoot.getElementById works after complex DOM manipulation.");

function createDiv(id)
{
    var div = document.createElement('div');
    div.id = id;
    return div;
}

var A = createDiv('A');
var B = createDiv('B');
var C = createDiv('C');
var D = createDiv('D');
var shadowRootA = A.webkitCreateShadowRoot();
var shadowRootB = B.webkitCreateShadowRoot();
var shadowRootC = C.webkitCreateShadowRoot();

shadowRootA.appendChild(B);
shadowRootB.appendChild(C);
shadowRootC.appendChild(D);

container.appendChild(A);
shouldBe('document.getElementById("A")', 'A');
shouldBe('shadowRootA.getElementById("B")', 'B');
shouldBe('shadowRootB.getElementById("C")', 'C');
shouldBe('shadowRootC.getElementById("D")', 'D');

debug('');
debug('Remove C from shadowRootB');
shadowRootB.removeChild(C);

shouldBe('document.getElementById("A")', 'A');
shouldBe('shadowRootA.getElementById("B")', 'B');
shouldBe('shadowRootB.getElementById("C")', 'null');
shouldBe('shadowRootC.getElementById("D")', 'D');

debug('');
debug('Append C to ShadowRootB, and remove A from document');
shadowRootB.appendChild(C);
container.removeChild(A);

shouldBe('document.getElementById("A")', 'null');
shouldBe('shadowRootA.getElementById("B")', 'B');
shouldBe('shadowRootB.getElementById("C")', 'C');
shouldBe('shadowRootC.getElementById("D")', 'D');

debug('');
debug('Remove C from shadowRootB');
shadowRootB.removeChild(C);

shouldBe('document.getElementById("A")', 'null');
shouldBe('shadowRootA.getElementById("B")', 'B');
shouldBe('shadowRootB.getElementById("C")', 'null');
shouldBe('shadowRootC.getElementById("D")', 'D');

debug('');
debug('Remove D from shadowRootC');
shadowRootC.removeChild(D);

shouldBe('document.getElementById("A")', 'null');
shouldBe('shadowRootA.getElementById("B")', 'B');
shouldBe('shadowRootB.getElementById("C")', 'null');
shouldBe('shadowRootC.getElementById("D")', 'null');

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