Add forEach() to CSSVariablesMap

LayoutTests/fast/css/variables/cssom-foreach.html

+<script>
+if (window.testRunner)
+    testRunner.dumpAsText();
+</script>
+
+<div id="test"></div>
+<pre id="output"></pre>
+
+<script>
+var div = document.querySelector("#test");
+var output = document.querySelector("#output");
+var forEachValues = [];
+
+function checkForEachValues(expectedValues) {
+    if (forEachValues.length !== expectedValues.length)
+        return false;
+    for (var i = 0; i < forEachValues.length; i++) {
+        if (forEachValues[i][0] !== expectedValues[i][0] || forEachValues[i][1] !== expectedValues[i][1])
+            return false;
+    }
+    return true;
+}
+
+function checkForEachValuesAndOutput(expectedValues) {
+    if (checkForEachValues(expectedValues)) {
+        output.innerText += "pass\n";
+    } else {
+        output.innerText += "fail\n";
+        function outputItem(item) {
+            output.innerText += "    " + item[0] + ": " + item[1] + "\n";
+        }
+        output.innerText += "  expected:\n";
+        expectedValues.forEach(outputItem);
+        output.innerText += "  actual:\n";
+        forEachValues.forEach(outputItem);
+    }
+}
+
+output.innerText += "Test calling forEach with no parameters: ";
+try {
+    div.style.var.forEach();
+    output.innerText += "fail";
+}
+catch (error) {
+    output.innerText += error;
+}
+output.innerText += "\n";
+
+output.innerText += "Test calling forEach with non-function as first argument: ";
+try {
+    div.style.var.forEach({});
+    output.innerText += "fail";
+}
+catch (error) {
+    output.innerText += error;
+}
+output.innerText += "\n";
+
+output.innerText += "Test calling forEach with thisArg specified: ";
+div.style.var.clear();
+div.style.var.set("existing", "pass");
+window.x = "fail";
+div.style.var.forEach(function() {
+    output.innerText += this.x;
+}, {x: "pass"});
+output.innerText += "\n";
+
+output.innerText += "Test adding variable in forEach: ";
+forEachValues = [];
+div.style.var.forEach(function(value, name, varMap) {
+    forEachValues.push([name, value]);
+    if (name === "existing") {
+        varMap.set("added", "pass");
+    }
+});
+checkForEachValuesAndOutput([
+    ["existing", "pass"],
+    ["added", "pass"],
+]);
+
+output.innerText += "Test deleting in forEach: ";
+div.style.var.clear();
+div.style.var.set("existing", "pass");
+div.style.var.set("toDelete", "fail");
+forEachValues = [];
+div.style.var.forEach(function(value, name, varMap) {
+    forEachValues.push([name, value]);
+    if (name === "existing") {
+        varMap.delete("toDelete");
+    }
+});
+checkForEachValuesAndOutput([
+    ["existing", "pass"],
+]);
+
+output.innerText += "Test clearing in forEach: ";
+div.style.var.clear();
+div.style.var.set("existing", "pass");
+div.style.var.set("toClear", "fail");
+forEachValues = [];
+div.style.var.forEach(function(value, name, varMap) {
+    forEachValues.push([name, value]);
+    if (name === "existing") {
+        varMap.clear();
+    }
+});
+checkForEachValuesAndOutput([
+    ["existing", "pass"],
+]);
+
+output.innerText += "Test adding then deleting in forEach: ";
+div.style.var.clear();
+div.style.var.set("existing", "pass");
+forEachValues = [];
+div.style.var.forEach(function(value, name, varMap) {
+    forEachValues.push([name, value]);
+    if (name === "existing") {
+        varMap.set("toDelete", "fail");
+        varMap.delete("toDelete");
+    }
+});
+checkForEachValuesAndOutput([
+    ["existing", "pass"],
+]);
+
+output.innerText += "Test adding then clearing in forEach: ";
+div.style.var.clear();
+div.style.var.set("existing", "pass");
+forEachValues = [];
+div.style.var.forEach(function(value, name, varMap) {
+    forEachValues.push([name, value]);
+    if (name === "existing") {
+        varMap.set("toClear", "fail");
+        varMap.clear("toClear");
+    }
+});
+checkForEachValuesAndOutput([
+    ["existing", "pass"],
+]);
+
+output.innerText += "Test deleting then adding in forEach: ";
+div.style.var.clear();
+div.style.var.set("existing", "pass");
+div.style.var.set("toDelete", "fail");
+forEachValues = [];
+div.style.var.forEach(function(value, name, varMap) {
+    forEachValues.push([name, value]);
+    if (name === "existing") {
+        varMap.delete("toDelete");
+        varMap.set("added", "pass");
+    }
+});
+checkForEachValuesAndOutput([
+    ["existing", "pass"],
+    ["added", "pass"],
+]);
+
+output.innerText += "Test clearing then adding in forEach: ";
+div.style.var.clear();
+div.style.var.set("existing", "pass");
+forEachValues = [];
+div.style.var.forEach(function(value, name, varMap) {
+    forEachValues.push([name, value]);
+    if (name === "existing") {
+        varMap.clear();
+        varMap.set("added", "pass");
+    }
+});
+checkForEachValuesAndOutput([
+    ["existing", "pass"],
+    ["added", "pass"],
+]);
+
+output.innerText += "Test updating visited variable in forEach: ";
+div.style.var.clear();
+div.style.var.set("existingA", "pass");
+div.style.var.set("existingB", "pass");
+forEachValues = [];
+div.style.var.forEach(function(value, name, varMap) {
+    forEachValues.push([name, value]);
+    if (name === "existingB") {
+        varMap.set("existingA", "fail");
+    }
+});
+checkForEachValuesAndOutput([
+    ["existingA", "pass"],
+    ["existingB", "pass"],
+]);
+
+output.innerText += "Test nested forEach calls with addition and deletion: ";
+div.style.var.clear();
+div.style.var.set("existingA", "pass");
+div.style.var.set("existingB", "pass");
+forEachValues = [];
+div.style.var.forEach(function(value, name, varMap) {
+    forEachValues.push([name, value]);
+    varMap.forEach(function(innerValue, innerName) {
+        forEachValues.push(["  " + innerName, innerValue]);
+        if (name === "existingA" && innerName === "existingB") {
+            varMap.delete("existingB");
+            varMap.set("innerAdded", "pass");
+        }
+    });
+});
+checkForEachValuesAndOutput([
+    ["existingA", "pass"],
+    ["  existingA", "pass"],
+    ["  existingB", "pass"],
+    ["  innerAdded", "pass"],
+    ["innerAdded", "pass"],
+    ["  existingA", "pass"],
+    ["  innerAdded", "pass"],
+]);
+
+</script>