Allow <input type=image> to submit forms

See https://html.spec.whatwg.org/#image-button-state-(type=image):input-activation-behavior.
jsdom · Jan 7, 2023 · 59a8af3 · 59a8af3
1 parent 22f7c3c
commit 59a8af3
Show file tree

Hide file tree

Showing 2 changed files with 61 additions and 1 deletion.
diff --git a/lib/jsdom/living/nodes/HTMLInputElement-impl.js b/lib/jsdom/living/nodes/HTMLInputElement-impl.js
@@ -200,7 +200,7 @@ class HTMLInputElementImpl extends HTMLElementImpl {
         fireAnEvent("input", this, undefined, { bubbles: true });
         fireAnEvent("change", this, undefined, { bubbles: true });
       }
-    } else if (form && this.type === "submit") {
+    } else if (form && (this.type === "submit" || this.type === "image")) {
       form._doRequestSubmit(this);
     } else if (form && this.type === "reset") {
       form._doReset();

diff --git a/...eb-platform-tests/to-upstream/html/semantics/forms/form-submission-0/form-submitters.html b/...eb-platform-tests/to-upstream/html/semantics/forms/form-submission-0/form-submitters.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>HTML Test: form submitters</title>
+<link rel="help" href="https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#form-submission-algorithm">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<body>
+<script>
+"use strict";
+
+let isSubmitted;
+function prepareForm() {
+  isSubmitted = false;
+  const form = document.createElement("FORM");
+  form.addEventListener("submit", event => {
+    event.preventDefault();
+    isSubmitted = true;
+  });
+  document.body.appendChild(form);
+  form.innerHTML = `
+    <button type="submit" />
+    <button type="button" />
+    <input type="submit" />
+    <input type="image" />
+    <input type="text" />
+  `;
+  return form;
+}
+
+test(() => {
+  const form = prepareForm();
+  form.querySelector("button[type=submit]").click();
+  assert_true(isSubmitted, "Form is submitted");
+}, "Form is submitted by submit buttons");
+
+test(() => {
+  const form = prepareForm();
+  form.querySelector("button[type=button]").click();
+  assert_false(isSubmitted, "Form is not submitted");
+}, "Form is not submitted by other button types");
+
+test(() => {
+  const form = prepareForm();
+  form.querySelector("input[type=submit]").click();
+  assert_true(isSubmitted, "Form is submitted");
+}, "Form is submitted by submit inputs");
+
+test(() => {
+  const form = prepareForm();
+  form.querySelector("input[type=image]").click();
+  assert_true(isSubmitted, "Form is submitted");
+}, "Form is submitted by image inputs");
+
+test(() => {
+  const form = prepareForm();
+  form.querySelector("input[type=text]").click();
+  assert_false(isSubmitted, "Form is not submitted");
+}, "Form is not submitted by other input types");
+</script>