Test order of toggle events in addition to order of DOMSubtreeModified events.

I realized while writing
whatwg/html#9400 (comment) that the
ordering of the `open` attribute manipulation is also exposed through
`toggle` events, so this tests those events in addition to
`DOMSubtreeModified` events.

Bug: 1444057
Change-Id: I6d3c65f5402053d77e4f6c488aa07209181a8cdd
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4599204
Reviewed-by: Mason Freed <[email protected]>
Commit-Queue: David Baron <[email protected]>
Cr-Commit-Position: refs/heads/main@{#1154716}

Author: dbaron

html/semantics/interactive-elements/the-details-element/name-attribute.tentative.html

@@ -110,24 +110,7 @@
   assert_element_states(elements, [1, 0, 0, 1, 0, 1, 0, 1], "after final mutation");
 }, "mutually exclusive details across multiple names and multiple tree scopes");
 
-// The next two tests test characteristics of the design that are only
-// exposed via mutation events.  If mutation events (for attribute
-// addition/removal) are removed from the web, these tests could be
-// removed, and some small simplifications could be made to the code
-// implementing this feature.
-function mutation_events_for_attribute_removal_supported() {
-  container.innerHTML = `<div id="event-removal-test"></div>`;
-  let element = container.firstChild;
-  let event_fired = false;
-  element.addEventListener("DOMSubtreeModified", event => event_fired = true);
-  element.removeAttribute("id");
-  return event_fired;
-}
-
 promise_test(async t => {
-  if (!mutation_events_for_attribute_removal_supported()) {
-    return;
-  }
   container.innerHTML = `
     <details name="a" id="e0" open></details>
     <details name="a" id="e1"></details>
@@ -143,24 +126,57 @@
                    document.getElementById("e3") ];
   container.insertBefore(e2, elements[3]);
 
-  let received_ids = [];
-  let listener = event => {
+  let mutation_event_received_ids = [];
+  let mutation_listener = event => {
     assert_equals(event.type, "DOMSubtreeModified");
     assert_equals(event.target.nodeType, Node.ELEMENT_NODE);
     let element = event.target;
     assert_equals(element.localName, "details");
-    received_ids.push(element.id);
+    mutation_event_received_ids.push(element.id);
   };
+  let toggle_event_received_ids = [];
+  let toggle_event_promises = [];
   for (let element of elements) {
-    element.addEventListener("DOMSubtreeModified", listener);
+    element.addEventListener("DOMSubtreeModified", mutation_listener);
+    toggle_event_promises.push(new Promise((resolve, reject) => {
+      element.addEventListener("toggle", event => {
+        assert_equals(event.type, "toggle");
+        assert_equals(event.target, element);
+        toggle_event_received_ids.push(element.id);
+        resolve(undefined);
+      });
+    }));
   }
-  assert_array_equals(received_ids, []);
+  assert_array_equals(mutation_event_received_ids, []);
   assert_element_states(elements, [1, 0, 1, 1], "states before mutation");
   elements[1].open = true;
-  assert_array_equals(received_ids, ["e0", "e3", "e2", "e1"],
-                      "removal events received in node insertion order, followed by addition event");
+  if (mutation_event_received_ids.length == 0) {
+    // ok if mutation events are not supported
+  } else {
+    assert_array_equals(mutation_event_received_ids, ["e0", "e3", "e2", "e1"],
+                        "removal events received in node insertion order, followed by addition event");
+  }
   assert_element_states(elements, [0, 1, 0, 0], "states after mutation");
-}, "mutation event order matches order of insertion in set of named elements");
+  assert_array_equals(toggle_event_received_ids, [], "toggle events received before awaiting promises");
+  await Promise.all(toggle_event_promises);
+  assert_array_equals(toggle_event_received_ids, ["e1", "e0", "e3", "e2"], "toggle events received after awaiting promises");
+}, "mutation event and toggle event order matches order of insertion in set of named elements");
+
+// This function is used to guard tests that test behavior that is
+// relevant only because of Mutation Events.  If mutation events (for
+// attribute addition/removal) are removed from the web, the tests using
+// this function can be removed.
+function mutation_events_for_attribute_removal_supported() {
+  if (!("MutationEvent" in window)) {
+    return false;
+  }
+  container.innerHTML = `<div id="event-removal-test"></div>`;
+  let element = container.firstChild;
+  let event_fired = false;
+  element.addEventListener("DOMSubtreeModified", event => event_fired = true);
+  element.removeAttribute("id");
+  return event_fired;
+}
 
 promise_test(async t => {
   if (!mutation_events_for_attribute_removal_supported()) {