diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-details-element/name-attribute.tentative.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-details-element/name-attribute.tentative.html
index 9aa5ce42e8e5a..f283633aab43a 100644
--- a/testing/web-platform/tests/html/semantics/interactive-elements/the-details-element/name-attribute.tentative.html
+++ b/testing/web-platform/tests/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 = `
`;
- 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 = `
@@ -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 = ``;
+ 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()) {