blob: 3bd3a8de9fb54de01c54cf8491b07217d1cc8f8a [file] [log] [blame]
<!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>