<!DOCTYPE html>
<!-- Copied directly from https://chromium.googlesource.com/chromium/src/+/master/third_party/WebKit/LayoutTests/fast/dom/NodeList/nodelist-iterable.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>
</script>
</form>
</div></title>