| <!DOCTYPE html> |
| <meta charset="utf-8"> |
| <title>Ensure NodeList semantically matches WebIDL iterable</title> |
| <script src="../../../resources/testharness.js"></script> |
| <script src="../../../resources/testharnessreport.js"></script> |
| <div id="container"> |
| <div id="div1"></div> |
| <div id="div2"></div><br> |
| <div id="div3"></div><br> |
| <div id="div4"></div><br> |
| <div id="div5"></div><br> |
| <form id="form"> |
| <input id="rad1" type="radio" name="radio" value="a"> |
| <input id="rad2" type="radio" name="radio" value="b"> |
| <input id="rad3" type="radio" name="radio" value="c"> |
| <input id="rad4" type="radio" name="radio" value="d"> |
| </form> |
| </div> |
| <script> |
| "use strict"; |
| |
| test(function() { |
| let nodeList = container.querySelectorAll("div"); |
| let ids = []; |
| for (let node of nodeList) { |
| assert_true(node instanceof HTMLDivElement, "elements should be expected types"); |
| ids.push(node.id); |
| } |
| assert_array_equals(ids, ["div1", "div2", "div3", "div4", "div5"], "elements should be the expected values"); |
| }, "for (node of NodeList)"); |
| |
| |
| test(function() { |
| let nodeList = container.querySelectorAll("div"); |
| for (let entry of nodeList.entries()) { |
| assert_equals(typeof entry[0], "number", "value-iterable keys should be integers"); |
| let id = entry[0] + 1; |
| let node = entry[1]; |
| assert_true(node instanceof HTMLDivElement, "elements should be expected types"); |
| assert_equals(node.id, "div" + id, "elements should be the expected values"); |
| } |
| }, "for ([index, node] of NodeList.entries())"); |
| |
| |
| test(function() { |
| let nodeList = container.querySelectorAll("div"); |
| for (let id of nodeList.keys()) { |
| assert_equals(typeof id, "number", "value-iterable keys should be integers"); |
| let node = nodeList[id]; |
| assert_true(node instanceof HTMLDivElement, "elements should be expected types"); |
| assert_equals(node.id, "div" + (id + 1), "elements should be the expected values"); |
| } |
| }, "for (index of NodeList.keys())"); |
| |
| |
| test(function() { |
| let nodeList = container.querySelectorAll("div"); |
| let ids = []; |
| for (let node of nodeList.values()) { |
| assert_true(node instanceof HTMLDivElement, "elements should be expected types"); |
| ids.push(node.id); |
| } |
| assert_array_equals(ids, ["div1", "div2", "div3", "div4", "div5"], "elements should be the expected values"); |
| }, "for (node of NodeList.values())"); |
| |
| |
| test(function() { |
| let nodeList = container.querySelectorAll("div"); |
| nodeList.forEach(function(node, id) { |
| assert_true(node instanceof HTMLDivElement, "elements should be expected types"); |
| assert_equals(node.id, "div" + (id + 1), "elements should be the expected values"); |
| }); |
| }, "NodeList.prototype.forEach()"); |
| |
| |
| test(function() { |
| let nodeList = form.radio; |
| let rad = rad1; |
| let ids = []; |
| for (let node of nodeList) { |
| assert_true(node instanceof HTMLInputElement, "elements should be expected types"); |
| ids.push(node.id); |
| if (node === rad2) rad1.remove(); |
| } |
| assert_array_equals(ids, ["rad1", "rad2", "rad4"], "elements should be the expected values"); |
| form.insertBefore(rad, rad2); |
| }, "Delete earlier element in live NodeList"); |
| |
| |
| test(function() { |
| let nodeList = form.radio; |
| let rad = rad2; |
| let ids = []; |
| for (let node of nodeList) { |
| assert_true(node instanceof HTMLInputElement, "elements should be expected types"); |
| ids.push(node.id); |
| if (node === rad1) rad.remove(); |
| } |
| assert_array_equals(ids, ["rad1", "rad3", "rad4"], "elements should be the expected values"); |
| form.insertBefore(rad, rad3); |
| }, "Delete later element in live NodeList"); |
| </script> |
