NodeList-Iterable.html
<!doctype html>
<meta charset="utf-8">
<title>NodeList Iterable Test</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<p id="1"></p>
<p id="2"></p>
<p id="3"></p>
<p id="4"></p>
<p id="5"></p>
<div id="live"><b id="b1">1</b><b id="b2">2</b><b id="b3">3</b></div>
<script>
var paragraphs;
setup(function() {
paragraphs = document.querySelectorAll('p');
})
test(function() {
assert_true('length' in paragraphs);
}, 'NodeList has length method.');
test(function() {
assert_true('values' in paragraphs);
}, 'NodeList has values method.');
test(function() {
assert_true('entries' in paragraphs);
}, 'NodeList has entries method.');
test(function() {
assert_true('forEach' in paragraphs);
}, 'NodeList has forEach method.');
test(function() {
assert_true(Symbol.iterator in paragraphs);
}, 'NodeList has Symbol.iterator.');
test(function() {
var ids = "12345", idx=0;
for(var node of paragraphs){
assert_equals(node.getAttribute('id'), ids[idx++]);
}
}, 'NodeList is iterable via for-of loop.');
test(function() {
assert_array_equals(Object.keys(paragraphs), ['0', '1', '2', '3', '4']);
}, 'NodeList responds to Object.keys correctly');
test(function() {
var container = document.getElementById('live');
var nodeList = container.childNodes;
var ids = [];
for (var el of nodeList) {
ids.push(el.id);
assert_equals(el.localName, 'b');
if (ids.length < 3) {
var newEl = document.createElement('b');
newEl.id = 'after' + el.id;
container.appendChild(newEl);
}
}
assert_array_equals(ids, ['b1', 'b2', 'b3', 'afterb1', 'afterb2']);
}, 'live NodeLists are for-of iterable and update appropriately');
</script>