LibWeb: Update button/input activation behaviour to match spec

Author: https://github.com/Gingeh
Commit: 591c6b0f68
Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/3712
Reviewed-by: https://github.com/AtkinsSJ ✅

Libraries/LibWeb/HTML/HTMLButtonElement.cpp

@@ -137,14 +137,19 @@ void HTMLButtonElement::activation_behavior(DOM::Event const& event)
 
     // 3. If element has a form owner:
     if (form() != nullptr) {
-        // 1. If element is a submit button, then submit element's form owner from element with userInvolvement set to event's user navigation involvement.
+        // 1. If element is a submit button, then submit element's form owner from element with userInvolvement set to event's user navigation involvement, and return.
         if (is_submit_button()) {
             form()->submit_form(*this, { .user_involvement = user_navigation_involvement(event) }).release_value_but_fixme_should_propagate_errors();
+            return;
         }
-        // 2. If element's type attribute is in the Reset Button state, then reset element's form owner.
+        // 2. If element's type attribute is in the Reset Button state, then reset element's form owner, and return.
         if (type_state() == TypeAttributeState::Reset) {
             form()->reset_form();
+            return;
         }
+        // 3. If element's type attribute is in the Auto state, then return.
+        if (type_state() == TypeAttributeState::Auto)
+            return;
     }
 
     // FIXME: 4. Let target be the result of running element's get the commandfor associated element.

Libraries/LibWeb/HTML/HTMLInputElement.cpp

@@ -2696,7 +2696,11 @@ void HTMLInputElement::activation_behavior(DOM::Event const& event)
     // 2. Run this element's input activation behavior, if any, and do nothing otherwise.
     run_input_activation_behavior(event).release_value_but_fixme_should_propagate_errors();
 
-    // 3. Run the popover target attribute activation behavior given element and event's target.
+    // 3. If element has a form owner and element's type attribute is not in the Button state, then return.
+    if (form() != nullptr && type_state() != TypeAttributeState::Button)
+        return;
+
+    // 4. Run the popover target attribute activation behavior given element and event's target.
     if (event.target() && event.target()->is_dom_node())
         PopoverInvokerElement::popover_target_activation_behaviour(*this, as<DOM::Node>(*event.target()));
 }

Tests/LibWeb/Text/expected/wpt-import/html/semantics/popovers/button-type-popovertarget.txt

@@ -0,0 +1,20 @@
+Harness status: OK
+
+Found 15 tests
+
+15 Pass
+Pass	Button type=reset in form should trigger form reset and not toggle popover
+Pass	Button type=submit in form should trigger form submit and not toggle popover
+Pass	Button type=button in form should toggle popover
+Pass	Button type=invalid in form should trigger form submit and not toggle popover
+Pass	Button missing type in form should trigger form submit and not toggle popover
+Pass	Button type=reset with form attr should trigger form reset and not toggle popover
+Pass	Button type=submit with form attr should trigger form submit and not toggle popover
+Pass	Button type=button with form attr should toggle popover
+Pass	Button type=invalid with form attr should trigger form submit and not toggle popover
+Pass	Button missing type with form attr should trigger form submit and not toggle popover
+Pass	Button type=reset outside form should toggle popover
+Pass	Button type=submit outside form should toggle popover
+Pass	Button type=button outside form should toggle popover
+Pass	Button type=invalid outside form should toggle popover
+Pass	Button missing type outside form should toggle popover

Tests/LibWeb/Text/expected/wpt-import/html/semantics/popovers/input-type-popovertarget.txt

@@ -0,0 +1,17 @@
+Harness status: OK
+
+Found 12 tests
+
+12 Pass
+Pass	input type=reset in form should trigger form reset and not toggle popover
+Pass	input type=submit in form should trigger form submit and not toggle popover
+Pass	input type=button in form should toggle popover
+Pass	input type=image in form should trigger form submit and not toggle popover
+Pass	input type=reset with form attr should trigger form reset and not toggle popover
+Pass	input type=submit with form attr should trigger form submit and not toggle popover
+Pass	input type=button with form attr should toggle popover
+Pass	input type=image with form attr should trigger form submit and not toggle popover
+Pass	input type=reset outside form should toggle popover
+Pass	input type=submit outside form should toggle popover
+Pass	input type=button outside form should toggle popover
+Pass	input type=image outside form should toggle popover

Tests/LibWeb/Text/input/wpt-import/html/semantics/popovers/button-type-popovertarget.html

@@ -0,0 +1,215 @@
+<!DOCTYPE html>
+<link rel=author href="mailto:jarhar@chromium.org">
+<link rel=author href="mailto:lwarlow@igalia.com">
+<link rel=help href="https://issues.chromium.org/issues/329118508">
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+
+<div id=mypopover popover=auto>popover</div>
+
+<iframe name=foo></iframe>
+<form id="form" target=foo action="about:blank">
+  <button id=reset-in-form type=reset popovertarget=mypopover>reset</button>
+  <button id=submit-in-form type=submit popovertarget=mypopover>submit</button>
+  <button id=button-in-form type=button popovertarget=mypopover>type=button</button>
+  <button id=invalid-in-form type=invalid popovertarget=mypopover>invalid</button>
+  <button id=missing-in-form popovertarget=mypopover>missing</button>
+</form>
+
+<button id=reset-attr-form type=reset popovertarget=mypopover form=form>reset</button>
+<button id=submit-attr-form type=submit popovertarget=mypopover form=form>submit</button>
+<button id=button-attr-form type=button popovertarget=mypopover form=form>type=button</button>
+<button id=invalid-attr-form type=invalid popovertarget=mypopover form=form>invalid</button>
+<button id=missing-attr-form popovertarget=mypopover form=form>missing</button>
+
+<button id=reset-outside-form type=reset popovertarget=mypopover>reset</button>
+<button id=submit-outside-form type=submit popovertarget=mypopover>submit</button>
+<button id=button-outside-form type=button popovertarget=mypopover>type=button</button>
+<button id=invalid-outside-form type=invalid popovertarget=mypopover>invalid</button>
+<button id=missing-outside-form popovertarget=mypopover>missing</button>
+
+<script>
+test((t) => {
+  let formReset = false;
+  function onReset(e) {
+    e.preventDefault();
+    formReset = true;
+  }
+  form.addEventListener('reset', onReset);
+  t.add_cleanup(() => {
+    mypopover.hidePopover();
+    form.removeEventListener('reset', onReset);
+  });
+  document.getElementById('reset-in-form').click();
+  assert_true(formReset, 'type=reset should trigger form reset event');
+  assert_false(mypopover.matches(':popover-open'), 'type=reset should not toggle the popover');
+}, 'Button type=reset in form should trigger form reset and not toggle popover');
+
+test((t) => {
+  let formSubmit = false;
+  function onSubmit(e) {
+    e.preventDefault();
+    formSubmit = true;
+  }
+  form.addEventListener('submit', onSubmit);
+  t.add_cleanup(() => {
+    mypopover.hidePopover();
+    form.removeEventListener('submit', onSubmit);
+  });
+  document.getElementById('submit-in-form').click();
+  assert_true(formSubmit, 'type=submit should trigger form submit event');
+  assert_false(mypopover.matches(':popover-open'), 'type=submit should not toggle the popover');
+}, 'Button type=submit in form should trigger form submit and not toggle popover');
+
+test((t) => {
+  t.add_cleanup(() => {
+    mypopover.hidePopover();
+  });
+  document.getElementById('button-in-form').click();
+  assert_true(mypopover.matches(':popover-open'), 'type=button should toggle the popover');
+}, 'Button type=button in form should toggle popover');
+
+test((t) => {
+  let formSubmit = false;
+  function onSubmit(e) {
+    e.preventDefault();
+    formSubmit = true;
+  }
+  form.addEventListener('submit', onSubmit);
+  t.add_cleanup(() => {
+    mypopover.hidePopover();
+    form.removeEventListener('submit', onSubmit);
+  });
+  document.getElementById('invalid-in-form').click();
+  assert_true(formSubmit, 'type=invalid should trigger form submit event');
+  assert_false(mypopover.matches(':popover-open'), 'type=invalid should not toggle the popover');
+}, 'Button type=invalid in form should trigger form submit and not toggle popover');
+
+test((t) => {
+  let formSubmit = false;
+  function onSubmit(e) {
+    e.preventDefault();
+    formSubmit = true;
+  }
+  form.addEventListener('submit', onSubmit);
+  t.add_cleanup(() => {
+    mypopover.hidePopover();
+    form.removeEventListener('submit', onSubmit);
+  });
+  document.getElementById('missing-in-form').click();
+  assert_true(formSubmit, 'missing type should trigger form submit event');
+  assert_false(mypopover.matches(':popover-open'), 'type=invalid should not toggle the popover');
+}, 'Button missing type in form should trigger form submit and not toggle popover');
+
+test((t) => {
+  let formReset = false;
+  function onReset(e) {
+    e.preventDefault();
+    formReset = true;
+  }
+  form.addEventListener('reset', onReset);
+  t.add_cleanup(() => {
+    mypopover.hidePopover();
+    form.removeEventListener('reset', onReset);
+  });
+  document.getElementById('reset-attr-form').click();
+  assert_true(formReset, 'type=reset should trigger form reset event');
+  assert_false(mypopover.matches(':popover-open'), 'type=reset should not toggle the popover');
+}, 'Button type=reset with form attr should trigger form reset and not toggle popover');
+
+test((t) => {
+  let formSubmit = false;
+  function onSubmit(e) {
+    e.preventDefault();
+    formSubmit = true;
+  }
+  form.addEventListener('submit', onSubmit);
+  t.add_cleanup(() => {
+    mypopover.hidePopover();
+    form.removeEventListener('submit', onSubmit);
+  });
+  document.getElementById('submit-attr-form').click();
+  assert_true(formSubmit, 'type=submit should trigger form submit event');
+  assert_false(mypopover.matches(':popover-open'), 'type=submit should not toggle the popover');
+}, 'Button type=submit with form attr should trigger form submit and not toggle popover');
+
+test((t) => {
+  t.add_cleanup(() => {
+    mypopover.hidePopover();
+  });
+  document.getElementById('button-attr-form').click();
+  assert_true(mypopover.matches(':popover-open'), 'type=button should toggle the popover');
+}, 'Button type=button with form attr should toggle popover');
+
+test((t) => {
+  let formSubmit = false;
+  function onSubmit(e) {
+    e.preventDefault();
+    formSubmit = true;
+  }
+  form.addEventListener('submit', onSubmit);
+  t.add_cleanup(() => {
+    mypopover.hidePopover();
+    form.removeEventListener('submit', onSubmit);
+  });
+  document.getElementById('invalid-attr-form').click();
+  assert_true(formSubmit, 'type=invalid should trigger form submit event');
+  assert_false(mypopover.matches(':popover-open'), 'type=invalid should not toggle the popover');
+}, 'Button type=invalid with form attr should trigger form submit and not toggle popover');
+
+test((t) => {
+  let formSubmit = false;
+  function onSubmit(e) {
+    e.preventDefault();
+    formSubmit = true;
+  }
+  form.addEventListener('submit', onSubmit);
+  t.add_cleanup(() => {
+    mypopover.hidePopover();
+    form.removeEventListener('submit', onSubmit);
+  });
+  document.getElementById('missing-attr-form').click();
+  assert_true(formSubmit, 'missing type should trigger form submit event');
+  assert_false(mypopover.matches(':popover-open'), 'type=invalid should not toggle the popover');
+}, 'Button missing type with form attr should trigger form submit and not toggle popover');
+
+test((t) => {
+  t.add_cleanup(() => {
+    mypopover.hidePopover();
+  });
+  document.getElementById('reset-outside-form').click();
+  assert_true(mypopover.matches(':popover-open'), 'type=reset should toggle the popover');
+}, 'Button type=reset outside form should toggle popover');
+
+test((t) => {
+  t.add_cleanup(() => {
+    mypopover.hidePopover();
+  });
+  document.getElementById('submit-outside-form').click();
+  assert_true(mypopover.matches(':popover-open'), 'type=submit should toggle the popover');
+}, 'Button type=submit outside form should toggle popover');
+
+test((t) => {
+  t.add_cleanup(() => {
+    mypopover.hidePopover();
+  });
+  document.getElementById('button-outside-form').click();
+  assert_true(mypopover.matches(':popover-open'), 'type=button should toggle the popover');
+}, 'Button type=button outside form should toggle popover');
+
+test((t) => {
+  t.add_cleanup(() => {
+    mypopover.hidePopover();
+  });
+  document.getElementById('invalid-outside-form').click();
+  assert_true(mypopover.matches(':popover-open'), 'type=invalid should toggle the popover');
+}, 'Button type=invalid outside form should toggle popover');
+
+test((t) => {
+  t.add_cleanup(() => {
+    mypopover.hidePopover();
+  });
+  document.getElementById('missing-outside-form').click();
+  assert_true(mypopover.matches(':popover-open'), 'missing type should toggle the popover');
+}, 'Button missing type outside form should toggle popover');
+</script>

Tests/LibWeb/Text/input/wpt-import/html/semantics/popovers/input-type-popovertarget.html

@@ -0,0 +1,172 @@
+<!DOCTYPE html>
+<link rel=author href="mailto:jarhar@chromium.org">
+<link rel=author href="mailto:lwarlow@igalia.com">
+<link rel=help href="https://issues.chromium.org/issues/329118508">
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+
+<div id=mypopover popover=auto>popover</div>
+
+<iframe name=foo></iframe>
+<form id="form" target=foo action="about:blank">
+  <input id=reset-in-form type=reset popovertarget=mypopover value="reset">
+  <input id=submit-in-form type=submit popovertarget=mypopover value="submit">
+  <input id=button-in-form type=button popovertarget=mypopover value="type=button">
+  <input id=image-in-form type=image popovertarget=mypopover value="type=image">
+</form>
+
+<input id=reset-attr-form type=reset popovertarget=mypopover value="reset" form=form>
+<input id=submit-attr-form type=submit popovertarget=mypopover value="submit" form=form>
+<input id=button-attr-form type=button popovertarget=mypopover value="type=button" form=form>
+<input id=image-attr-form type=image popovertarget=mypopover value="type=image" form=form>
+
+<input id=reset-outside-form type=reset popovertarget=mypopover value="reset">
+<input id=submit-outside-form type=submit popovertarget=mypopover value="submit">
+<input id=button-outside-form type=button popovertarget=mypopover value="type=button">
+<input id=image-outside-form type=image popovertarget=mypopover value="type=image">
+
+<script>
+test((t) => {
+  let formReset = false;
+  function onReset(e) {
+    e.preventDefault();
+    formReset = true;
+  }
+  form.addEventListener('reset', onReset);
+  t.add_cleanup(() => {
+    mypopover.hidePopover();
+    form.removeEventListener('reset', onReset);
+  });
+  document.getElementById('reset-in-form').click();
+  assert_true(formReset, 'type=reset should trigger form reset event');
+  assert_false(mypopover.matches(':popover-open'), 'type=reset should not toggle the popover');
+}, 'input type=reset in form should trigger form reset and not toggle popover');
+
+test((t) => {
+  let formSubmit = false;
+  function onSubmit(e) {
+    e.preventDefault();
+    formSubmit = true;
+  }
+  form.addEventListener('submit', onSubmit);
+  t.add_cleanup(() => {
+    mypopover.hidePopover();
+    form.removeEventListener('submit', onSubmit);
+  });
+  document.getElementById('submit-in-form').click();
+  assert_true(formSubmit, 'type=submit should trigger form submit event');
+  assert_false(mypopover.matches(':popover-open'), 'type=submit should not toggle the popover');
+}, 'input type=submit in form should trigger form submit and not toggle popover');
+
+test((t) => {
+  t.add_cleanup(() => {
+    mypopover.hidePopover();
+  });
+  document.getElementById('button-in-form').click();
+  assert_true(mypopover.matches(':popover-open'), 'type=button should toggle the popover');
+}, 'input type=button in form should toggle popover');
+
+test((t) => {
+  let formSubmit = false;
+  function onSubmit(e) {
+    e.preventDefault();
+    formSubmit = true;
+  }
+  form.addEventListener('submit', onSubmit);
+  t.add_cleanup(() => {
+    mypopover.hidePopover();
+    form.removeEventListener('submit', onSubmit);
+  });
+  document.getElementById('image-in-form').click();
+  assert_true(formSubmit, 'type=image should trigger form submit event');
+  assert_false(mypopover.matches(':popover-open'), 'type=image should not toggle the popover');
+}, 'input type=image in form should trigger form submit and not toggle popover');
+
+test((t) => {
+  let formReset = false;
+  function onReset(e) {
+    e.preventDefault();
+    formReset = true;
+  }
+  form.addEventListener('reset', onReset);
+  t.add_cleanup(() => {
+    mypopover.hidePopover();
+    form.removeEventListener('reset', onReset);
+  });
+  document.getElementById('reset-attr-form').click();
+  assert_true(formReset, 'type=reset should trigger form reset event');
+  assert_false(mypopover.matches(':popover-open'), 'type=reset should not toggle the popover');
+}, 'input type=reset with form attr should trigger form reset and not toggle popover');
+
+test((t) => {
+  let formSubmit = false;
+  function onSubmit(e) {
+    e.preventDefault();
+    formSubmit = true;
+  }
+  form.addEventListener('submit', onSubmit);
+  t.add_cleanup(() => {
+    mypopover.hidePopover();
+    form.removeEventListener('submit', onSubmit);
+  });
+  document.getElementById('submit-attr-form').click();
+  assert_true(formSubmit, 'type=submit should trigger form submit event');
+  assert_false(mypopover.matches(':popover-open'), 'type=submit should not toggle the popover');
+}, 'input type=submit with form attr should trigger form submit and not toggle popover');
+
+test((t) => {
+  t.add_cleanup(() => {
+    mypopover.hidePopover();
+  });
+  document.getElementById('button-attr-form').click();
+  assert_true(mypopover.matches(':popover-open'), 'type=button should toggle the popover');
+}, 'input type=button with form attr should toggle popover');
+
+test((t) => {
+  let formSubmit = false;
+  function onSubmit(e) {
+    e.preventDefault();
+    formSubmit = true;
+  }
+  form.addEventListener('submit', onSubmit);
+  t.add_cleanup(() => {
+    mypopover.hidePopover();
+    form.removeEventListener('submit', onSubmit);
+  });
+  document.getElementById('image-attr-form').click();
+  assert_true(formSubmit, 'type=image should trigger form submit event');
+  assert_false(mypopover.matches(':popover-open'), 'type=image should not toggle the popover');
+}, 'input type=image with form attr should trigger form submit and not toggle popover');
+
+test((t) => {
+  t.add_cleanup(() => {
+    mypopover.hidePopover();
+  });
+  document.getElementById('reset-outside-form').click();
+  assert_true(mypopover.matches(':popover-open'), 'type=reset should toggle the popover');
+}, 'input type=reset outside form should toggle popover');
+
+test((t) => {
+  t.add_cleanup(() => {
+    mypopover.hidePopover();
+  });
+  document.getElementById('submit-outside-form').click();
+  assert_true(mypopover.matches(':popover-open'), 'type=submit should toggle the popover');
+}, 'input type=submit outside form should toggle popover');
+
+test((t) => {
+  t.add_cleanup(() => {
+    mypopover.hidePopover();
+  });
+  document.getElementById('button-outside-form').click();
+  assert_true(mypopover.matches(':popover-open'), 'type=button should toggle the popover');
+}, 'input type=button outside form should toggle popover');
+
+test((t) => {
+  t.add_cleanup(() => {
+    mypopover.hidePopover();
+  });
+  document.getElementById('image-outside-form').click();
+  assert_true(mypopover.matches(':popover-open'), 'type=image should toggle the popover');
+}, 'input type=image outside form should toggle popover');
+</script>