From 3d3ea3af3e2049be17b4d881c957550c13637ba4 Mon Sep 17 00:00:00 2001 From: Keith Cirkel Date: Mon, 9 Dec 2024 11:53:39 -0800 Subject: [PATCH] Re-design logic for commandfor form-owner combinations In https://github.com/whatwg/html/pull/9841 the behaviour for commandfor= as a form owner has subtly changed: - + + + diff --git a/html/semantics/forms/the-button-element/button-click-submits-with-commandfor.tentative.html b/html/semantics/forms/the-button-element/button-click-submits-with-commandfor.tentative.html new file mode 100644 index 00000000000000..ced0d9ef152d82 --- /dev/null +++ b/html/semantics/forms/the-button-element/button-click-submits-with-commandfor.tentative.html @@ -0,0 +1,110 @@ + + +Clicking a button should submit the form + + + + + +
+ +
+ + diff --git a/html/semantics/invokers/invoketarget-button-event-dispatch.tentative.html b/html/semantics/invokers/invoketarget-button-event-dispatch.tentative.html index ef870627a066f5..74148caa2107d3 100644 --- a/html/semantics/invokers/invoketarget-button-event-dispatch.tentative.html +++ b/html/semantics/invokers/invoketarget-button-event-dispatch.tentative.html @@ -37,7 +37,7 @@ assert_equals(event.isTrusted, true, "isTrusted"); assert_equals(event.command, "--custom-command", "command"); assert_equals(event.target, invokee, "target"); - assert_equals(event.source, invokerbutton, "invoker"); + assert_equals(event.source, invokerbutton, "source"); }, "event dispatches on click"); // valid custom invokeactions @@ -56,7 +56,7 @@ assert_equals(event.isTrusted, true, "isTrusted"); assert_equals(event.command, command, "command"); assert_equals(event.target, invokee, "target"); - assert_equals(event.source, invokerbutton, "invoker"); + assert_equals(event.source, invokerbutton, "source"); }, `setting custom command property to ${command} (must include dash) sets event command`); promise_test(async function (t) { @@ -72,7 +72,7 @@ assert_equals(event.isTrusted, true, "isTrusted"); assert_equals(event.command, command, "command"); assert_equals(event.target, invokee, "target"); - assert_equals(event.source, invokerbutton, "invoker"); + assert_equals(event.source, invokerbutton, "source"); }, `setting custom command attribute to ${command} (must include dash) sets event command`); }, ); @@ -139,19 +139,47 @@ let called = false; invokee.addEventListener("command", (e) => (called = true), { once: true }); invokerbutton.setAttribute("form", "aform"); + invokerbutton.removeAttribute("type"); await clickOn(invokerbutton); assert_false(called, "event was not called"); - }, "event does not dispatch if invoker is form associated without `type`"); + }, "event does NOT dispatch if button is form associated, with implicit type"); + + promise_test(async function (t) { + t.add_cleanup(resetState); + let event; + invokee.addEventListener("command", (e) => (event = e), { once: true }); + invokerbutton.setAttribute("form", "aform"); + invokerbutton.setAttribute("type", "button"); + await clickOn(invokerbutton); + assert_true(event instanceof CommandEvent, "event is CommandEvent"); + assert_equals(event.type, "command", "type"); + assert_equals(event.bubbles, false, "bubbles"); + assert_equals(event.composed, true, "composed"); + assert_equals(event.isTrusted, true, "isTrusted"); + assert_equals(event.command, "--custom-command", "command"); + assert_equals(event.target, invokee, "target"); + assert_equals(event.source, invokerbutton, "source"); + }, "event dispatches if button is form associated, with explicit type=button"); promise_test(async function (t) { t.add_cleanup(resetState); let called = false; invokee.addEventListener("command", (e) => (called = true), { once: true }); invokerbutton.setAttribute("form", "aform"); - invokerbutton.setAttribute("type", "button"); + invokerbutton.setAttribute("type", "submit"); + await clickOn(invokerbutton); + assert_false(called, "event was not called"); + }, "event does NOT dispatch if button is form associated, with explicit type=submit"); + + promise_test(async function (t) { + t.add_cleanup(resetState); + let called = false; + invokee.addEventListener("command", (e) => (called = true), { once: true }); + invokerbutton.setAttribute("form", "aform"); + invokerbutton.setAttribute("type", "reset"); await clickOn(invokerbutton); - assert_true(called, "event was not called"); - }, "event dispatches if invoker is form associated with `type=button`"); + assert_false(called, "event was not called"); + }, "event does NOT dispatch if button is form associated, with explicit type=reset"); promise_test(async function (t) { svgInvokee = document.createElementNS("http://www.w3.org/2000/svg", "svg");