<!doctype html>
<html>
<head>
<script src="../../resources/js-test-pre.js"></script>
</head>
<body>
</body>
<script>
description('Test #ID selector matching over detached tree');

var root = document.createElement('div');
root.innerHTML = '<div id="Cocoa" data="pass1"><div id="Cappuccino" data="pass2"></div></div>'

shouldBe('root.querySelectorAll("#Cocoa").length', '1');
shouldBeEqualToString('root.querySelectorAll("#Cocoa")[0].getAttribute("data")', 'pass1');

shouldBe('root.querySelectorAll("#Cappuccino").length', '1');
shouldBeEqualToString('root.querySelectorAll("#Cappuccino")[0].getAttribute("data")', 'pass2');

shouldBe('root.querySelectorAll("#Cocoa > div").length', '1');
shouldBeEqualToString('root.querySelectorAll("#Cocoa > div")[0].getAttribute("data")', 'pass2');

root.innerHTML = '<div id="Cocoa" data="pass1"><div id="Cocoa" data="pass2"></div></div>'

shouldBe('root.querySelectorAll("#Cocoa").length', '2');
shouldBeEqualToString('root.querySelectorAll("#Cocoa")[0].getAttribute("data")', 'pass1');
shouldBeEqualToString('root.querySelectorAll("#Cocoa")[1].getAttribute("data")', 'pass2');
shouldBe('root.querySelectorAll("#Cocoa > div").length', '1');
shouldBeEqualToString('root.querySelectorAll("#Cocoa > div")[0].getAttribute("data")', 'pass2');

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