DomTokenList.forEach() now takes care of the current state of the list

rbri · rbri · commit ab67050ecaf6 · 2025-05-09T18:59:45.000+02:00
diff --git a/src/changes/changes.xml b/src/changes/changes.xml
@@ -8,6 +8,10 @@
 
     <body>
         <release version="4.12.0" date="April xx, 2025" description="Chrome/Edge 135, Firefox 137, Rhino RegExp, Bugfixes">
+            <action type="fix" dev="rbri">
+                DomTokenList.forEach() now takes care of the current state of the list
+                (e.g. the forEach function might add/remove elements to the list itself).
+            </action>
             <action type="fix" dev="rbri">
                 NodeList.forEach() now takes care of the current state of the list
                 (e.g. the forEach function might add/remove elements to the list itself).
diff --git a/src/main/java/org/htmlunit/javascript/host/dom/DOMTokenList.java b/src/main/java/org/htmlunit/javascript/host/dom/DOMTokenList.java
@@ -421,10 +421,16 @@ public void forEach(final Object callback) {
         final ContextAction<Object> contextAction = cx -> {
             final Function function = (Function) callback;
             final Scriptable scope = getParentScope();
-            final List<String> parts = split(value);
+
+            List<String> parts = split(value);
             final int size = parts.size();
-            for (int i = 0; i < size; i++) {
+            int i = 0;
+            while (i < size && i < parts.size()) {
                 function.call(cx, scope, this, new Object[] {parts.get(i), i, this});
+
+                // refresh
+                parts = split(getValue());
+                i++;
             }
             return null;
         };
diff --git a/src/test/java/org/htmlunit/javascript/host/dom/DOMTokenListTest.java b/src/test/java/org/htmlunit/javascript/host/dom/DOMTokenListTest.java
@@ -210,6 +210,90 @@ public void forEach() throws Exception {
         loadPageVerifyTitle2(html);
     }
 
+    /**
+     * @throws Exception if the test fails
+     */
+    @Test
+    @Alerts({"4", "a", "b", "c", "d", "4"})
+    public void forEachAdd() throws Exception {
+        final String html = DOCTYPE_HTML
+                + "<html><head><script>\n"
+                + LOG_TITLE_FUNCTION
+                + "function test() {\n"
+                + "  var list = document.getElementById('d1').classList;\n"
+                + "  log(list.length);\n"
+
+                + "  list.forEach((i) => {\n"
+                + "    log(i);\n"
+                + "    if (list.lenght < 7) { list.add('new ' + i); }\n"
+                + "  });\n"
+
+                + "  log(list.length);\n"
+                + "}\n"
+                + "</script></head><body onload='test()'>\n"
+                + "  <div id='d1' class='a b c d'></div>\n"
+                + "</body></html>";
+
+        loadPageVerifyTitle2(html);
+    }
+
+    /**
+     * @throws Exception if the test fails
+     */
+    @Test
+    @Alerts({"4", "a", "c", "d", "3"})
+    public void forEachRemove() throws Exception {
+        final String html = DOCTYPE_HTML
+                + "<html><head><script>\n"
+                + LOG_TITLE_FUNCTION
+                + "function test() {\n"
+                + "  var list = document.getElementById('d1').classList;\n"
+                + "  log(list.length);\n"
+
+                + "  list.forEach((i) => {\n"
+                + "    log(i);\n"
+                + "    list.remove('a');\n"
+                + "  });\n"
+
+                + "  log(list.length);\n"
+                + "}\n"
+                + "</script></head><body onload='test()'>\n"
+                + "  <div id='d1' class='a b c d'></div>\n"
+                + "</body></html>";
+
+        loadPageVerifyTitle2(html);
+    }
+
+
+    /**
+     * @throws Exception if the test fails
+     */
+    @Test
+    @Alerts({"4", "a", "1"})
+    public void forEachRemove2() throws Exception {
+        final String html = DOCTYPE_HTML
+                + "<html><head><script>\n"
+                + LOG_TITLE_FUNCTION
+                + "function test() {\n"
+                + "  var list = document.getElementById('d1').classList;\n"
+                + "  log(list.length);\n"
+
+                + "  list.forEach((i) => {\n"
+                + "    log(i);\n"
+                + "    list.remove('a');\n"
+                + "    list.remove('c');\n"
+                + "    list.remove('d');\n"
+                + "  });\n"
+
+                + "  log(list.length);\n"
+                + "}\n"
+                + "</script></head><body onload='test()'>\n"
+                + "  <div id='d1' class='a b c d'></div>\n"
+                + "</body></html>";
+
+        loadPageVerifyTitle2(html);
+    }
+
     /**
      * @throws Exception if the test fails
      */
