commit 19837b0f8aa1d21fe199b8848e0aa08cc2fe1ccb
parent 1f303dff5934a0f967fc08f339c28c48c4309871
Author: Serban Stanca <sstanca@mozilla.com>
Date: Wed, 5 Nov 2025 00:49:52 +0200
Revert "Bug 1991743 - Add form behavior for SelectControl. r=mkennedy" for causing mochitests failures in test_moz_checkbox.html.
This reverts commit 1c4cd715aba2c9ea159f52bae4c57ae7873fdbb2.
This reverts commit a3c1803f345d52bc1ae19e5547a629a6677ecd99.
This reverts commit 6cc653bf5158678fae38491d5f73307c7773c2e4.
Diffstat:
5 files changed, 0 insertions(+), 563 deletions(-)
diff --git a/toolkit/content/tests/widgets/chrome.toml b/toolkit/content/tests/widgets/chrome.toml
@@ -50,8 +50,6 @@ skip-if = ["os == 'mac' && os_version == '14.70' && processor == 'x86_64'"] # Bu
["test_moz_input_color.html"]
-["test_moz_input_elems_in_form.html"]
-
["test_moz_input_folder.html"]
["test_moz_input_password.html"]
diff --git a/toolkit/content/tests/widgets/test_moz_input_elems_in_form.html b/toolkit/content/tests/widgets/test_moz_input_elems_in_form.html
@@ -1,499 +0,0 @@
-<!doctype html>
-<html>
- <head>
- <meta charset="utf-8" />
- <title>test_moz_input_elems_in_form</title>
- <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
- <script src="chrome://mochikit/content/tests/SimpleTest/EventUtils.js"></script>
- <link
- rel="stylesheet"
- href="chrome://mochikit/content/tests/SimpleTest/test.css"
- />
- <script src="lit-test-helpers.js"></script>
- <script class="testbody" type="application/javascript">
- /* Bug 1996125: There's a lot of duplicated logic that should be refactored
- For example:
- * The template functions
- * The `assert*` event handlers
- * The `*with_form_attribute` tasks, since they're copies of the
- submission and reset tests respectively
- Most of the `is` asserts can probably be pulled into a function
- so that we can reduce the number of lines.
- Additionally, we should have some dynamic way of determining valid
- moz-* input elements as this test will be out of date as soon as
- a new moz input element is created.
- **/
- let testHelpers = new InputTestHelpers();
- let formAttributeTemplateFn;
-
- add_setup(async function setup() {
- let { html } = await testHelpers.setupLit();
- let templateFn = () =>
- html` <form id="main-form">
- <moz-fieldset>
- <moz-checkbox
- name="moz-checkbox"
- value="checkbox_val"
- checked=""
- ></moz-checkbox>
- <moz-radio-group name="moz-radio-group" value="radio_val_1">
- <moz-radio value="radio_val_1"></moz-radio>
- <moz-radio value="radio_val_2"></moz-radio>
- </moz-radio-group>
- <moz-select name="moz-select" value="select_val_1">
- <moz-option value="select_val_1"></moz-option>
- <moz-option value="select_val_2"></moz-option>
- </moz-select>
- <moz-toggle
- name="moz-toggle"
- value="toggle_val"
- pressed="true"
- ></moz-toggle>
- <moz-input-search
- name="moz-input-search"
- value="input_search_val"
- ></moz-input-search>
- <moz-input-text
- name="moz-input-text"
- value="input_text_val"
- ></moz-input-text>
- </moz-fieldset>
- <button id="submit" type="submit"></button>
- </form>`;
- testHelpers.setupTests({ templateFn });
- formAttributeTemplateFn = html`<form id="form-attribute-id"></form>
- <moz-fieldset>
- <moz-checkbox
- name="moz-checkbox"
- value="checkbox_val"
- checked=""
- form="form-attribute-id"
- ></moz-checkbox>
- <moz-radio-group
- name="moz-radio-group"
- value="radio_val_1"
- form="form-attribute-id"
- >
- <moz-radio value="radio_val_1"></moz-radio>
- <moz-radio value="radio_val_2"></moz-radio>
- </moz-radio-group>
- <moz-select
- name="moz-select"
- value="select_val_1"
- form="form-attribute-id"
- >
- <moz-option value="select_val_1"></moz-option>
- <moz-option value="select_val_2"></moz-option>
- </moz-select>
- <moz-toggle
- name="moz-toggle"
- value="toggle_val"
- pressed="true"
- form="form-attribute-id"
- ></moz-toggle>
- <moz-input-search
- name="moz-input-search"
- value="input_search_val"
- form="form-attribute-id"
- ></moz-input-search>
- <moz-input-text
- name="moz-input-text"
- value="input_text_val"
- form="form-attribute-id"
- ></moz-input-text>
- </moz-fieldset>
- <button id="submit" type="submit" form="form-attribute-id"></button>`;
- });
- add_task(async function test_form_submission() {
- let renderTarget = await testHelpers.renderTemplate();
- let form = renderTarget.firstElementChild;
-
- let assertDefaultValue = (event, form) => {
- event.preventDefault();
- const formData = new FormData(form);
- is(
- formData.get("moz-checkbox"),
- "checkbox_val",
- "moz-checkbox, when checked, should have a submitted value"
- );
- is(
- formData.get("moz-radio-group"),
- "radio_val_1",
- "moz-radio-group should have a submitted value"
- );
- is(
- formData.get("moz-select"),
- "select_val_1",
- "moz-select should have a submitted value"
- );
- is(
- formData.get("moz-toggle"),
- "toggle_val",
- "moz-toggle should have a submitted value"
- );
- is(
- formData.get("moz-input-search"),
- "input_search_val",
- "moz-input-search should have a submitted value"
- );
- is(
- formData.get("moz-input-text"),
- "input_text_val",
- "moz-input-text should have a submitted value"
- );
- };
- form.addEventListener(
- "submit",
- event => assertDefaultValue(event, form),
- { once: true }
- );
-
- let submit = document.getElementById("submit");
- await synthesizeMouseAtCenter(submit, {});
-
- let assertChangedValue = (event, form) => {
- event.preventDefault();
- const formData = new FormData(form);
- for (let [key, value] of formData) {
- if (key === "moz-radio-group") {
- is(
- value,
- "radio_val_2",
- `${key} should have a non-default value`
- );
- } else {
- is(
- value,
- "non-default value",
- `${key} should have a non-default submitted value`
- );
- }
- }
- };
- form.addEventListener(
- "submit",
- event => assertChangedValue(event, form),
- { once: true }
- );
- let fieldset = form.querySelector("moz-fieldset");
- for (let c of fieldset.children) {
- if (c.name === "moz-radio-group") {
- c.value = "radio_val_2";
- } else {
- c.value = "non-default value";
- }
- }
-
- // Wait for the input elements to update before clicking the
- // submit button. Otherwise, the value property may not have
- // updated which will cause a test failure when submitting the
- // form.
- let childArray = Array.from(fieldset.children);
- await Promise.all(childArray.map(item => item.updateComplete));
- await synthesizeMouseAtCenter(submit, {});
-
- await synthesizeMouseAtCenter(
- document.querySelector("moz-checkbox"),
- {}
- );
- let assertCheckboxValue = (event, form) => {
- event.preventDefault();
- const formData = new FormData(form);
- ok(
- !formData.get("moz-checkbox"),
- "moz-checkbox that is not checked should not submit a value"
- );
- };
- form.addEventListener(
- "submit",
- event => assertCheckboxValue(event, form),
- { once: true }
- );
-
- await synthesizeMouseAtCenter(submit, {});
- });
-
- add_task(async function test_form_reset() {
- let renderTarget = await testHelpers.renderTemplate();
- let form = renderTarget.firstElementChild;
- let fieldset = document.querySelector("moz-fieldset");
- for (let c of fieldset.children) {
- c.value = "non-default value";
- }
- let checkbox = document.querySelector("moz-checkbox");
- // Change the checked state so that we can assert later that
- // it is restored to the defaultChecked value.
- checkbox.checked = !checkbox.defaultChecked;
- // Assert that the value property of the input elements has
- // changed before we reset the form
- for (let c of fieldset.children) {
- is(
- c.value,
- "non-default value",
- `${c.name} should have a non-default value`
- );
- }
- form.reset();
-
- let formData = new FormData(form);
- // Each tested element's value property should reset to its
- // value attribute.
- is(
- formData.get("moz-checkbox"),
- document.querySelector("moz-checkbox").getAttribute("value"),
- "moz-checkbox should reset to default value"
- );
- is(
- formData.get("moz-radio-group"),
- document.querySelector("moz-radio-group").getAttribute("value"),
- "moz-radio-group should reset to default value"
- );
- is(
- formData.get("moz-select"),
- document.querySelector("moz-select").getAttribute("value"),
- "moz-select should reset to default value"
- );
- is(
- formData.get("moz-toggle"),
- document.querySelector("moz-toggle").getAttribute("value"),
- "moz-toggle should reset to default value"
- );
- is(
- formData.get("moz-input-search"),
- document.querySelector("moz-input-search").getAttribute("value"),
- "moz-input-search should reset to default value"
- );
- is(
- formData.get("moz-input-text"),
- document.querySelector("moz-input-text").getAttribute("value"),
- "moz-input-text should reset to default value"
- );
-
- // Assert that the checkbox checked is restored to the
- // defaultChecked property
- is(
- checkbox.checked,
- checkbox.defaultChecked,
- "moz-checkbox should reset its checked state to the defaultChecked value"
- );
- });
-
- // Assert that moz-checkbox contributes its value to the form
- // when it is checked, does not contribute its value when unchecked,
- // and contributes its value when switching from unchecked to
- // checked.
- add_task(async function test_moz_checkbox() {
- let renderTarget = await testHelpers.renderTemplate();
- let form = renderTarget.firstElementChild;
- let formData = new FormData(form);
- is(
- formData.get("moz-checkbox"),
- "checkbox_val",
- "There should be a value for a checked moz-checkbox in the form data"
- );
- let checkbox = document.querySelector("moz-checkbox");
- await synthesizeMouseAtCenter(checkbox, {});
- formData = new FormData(form);
- ok(
- !formData.get("moz-checkbox"),
- "There should be no value for an unchecked moz-checkbox in the form data"
- );
- await synthesizeMouseAtCenter(checkbox, {});
- formData = new FormData(form);
- is(
- formData.get("moz-checkbox"),
- "checkbox_val",
- "There should be a value for a checked moz-checkbox in the form data"
- );
- });
-
- // Assert that the input elements submit their values as expected
- // when using the `form` attribute
- add_task(async function test_form_submission_with_form_attribute() {
- let renderTarget = await testHelpers.renderTemplate(
- formAttributeTemplateFn
- );
- let form = renderTarget.firstElementChild;
-
- let assertDefaultValue = (event, form) => {
- event.preventDefault();
- const formData = new FormData(form);
- is(
- formData.get("moz-checkbox"),
- "checkbox_val",
- "moz-checkbox, when checked, should have a submitted value"
- );
- is(
- formData.get("moz-radio-group"),
- "radio_val_1",
- "moz-radio-group should have a submitted value"
- );
- is(
- formData.get("moz-select"),
- "select_val_1",
- "moz-select should have a submitted value"
- );
- is(
- formData.get("moz-toggle"),
- "toggle_val",
- "moz-toggle should have a submitted value"
- );
- is(
- formData.get("moz-input-search"),
- "input_search_val",
- "moz-input-search should have a submitted value"
- );
- is(
- formData.get("moz-input-text"),
- "input_text_val",
- "moz-input-text should have a submitted value"
- );
- };
- form.addEventListener(
- "submit",
- event => assertDefaultValue(event, form),
- { once: true }
- );
-
- let submit = document.getElementById("submit");
- await synthesizeMouseAtCenter(submit, {});
-
- let assertChangedValue = (event, form) => {
- event.preventDefault();
- const formData = new FormData(form);
- for (let [key, value] of formData) {
- if (key === "moz-radio-group") {
- is(
- value,
- "radio_val_2",
- `${key} should have a non-default value`
- );
- } else {
- is(
- value,
- "non-default value",
- `${key} should have a non-default submitted value`
- );
- }
- }
- };
- form.addEventListener(
- "submit",
- event => assertChangedValue(event, form),
- { once: true }
- );
- let fieldset = document.querySelector("div moz-fieldset");
- for (let c of fieldset.children) {
- if (c.name === "moz-radio-group") {
- c.value = "radio_val_2";
- } else {
- c.value = "non-default value";
- }
- }
-
- // Wait for the input elements to update before clicking the
- // submit button. Otherwise, the value property may not have
- // updated which will cause a test failure when submitting the
- // form.
- let childArray = Array.from(fieldset.children);
- await Promise.all(childArray.map(item => item.updateComplete));
- await synthesizeMouseAtCenter(submit, {});
-
- // Assert that an unchecked moz-checkbox does not submit a value
- // when a form is submitted.
- await synthesizeMouseAtCenter(
- document.querySelector("moz-checkbox"),
- {}
- );
- let assertCheckboxValue = (event, form) => {
- event.preventDefault();
- const formData = new FormData(form);
- ok(
- !formData.get("moz-checkbox"),
- "moz-checkbox that is not checked should not submit a value"
- );
- };
- form.addEventListener(
- "submit",
- event => assertCheckboxValue(event, form),
- { once: true }
- );
-
- await synthesizeMouseAtCenter(submit, {});
- });
-
- // Assert that the input elements reset their values as expected
- // when using the `form` attribute
- add_task(async function test_form_reset_with_form_attribute() {
- let renderTarget = await testHelpers.renderTemplate(
- formAttributeTemplateFn
- );
- let form = renderTarget.firstElementChild;
- let fieldset = document.querySelector("moz-fieldset");
- for (let c of fieldset.children) {
- c.value = "non-default value";
- }
- let checkbox = document.querySelector("moz-checkbox");
- // Change the checked state so that we can assert later that
- // it is restored to the defaultChecked value.
- checkbox.checked = !checkbox.defaultChecked;
-
- // Assert that the value property of the input elements has
- // changed before we reset the form
- for (let c of fieldset.children) {
- is(
- c.value,
- "non-default value",
- `${c.name} should have a non-default value`
- );
- }
- form.reset();
-
- let formData = new FormData(form);
- // Each tested element's value property should reset to its
- // value attribute.
- is(
- formData.get("moz-checkbox"),
- document.querySelector("moz-checkbox").getAttribute("value"),
- "moz-checkbox should reset to default value"
- );
- is(
- formData.get("moz-radio-group"),
- document.querySelector("moz-radio-group").getAttribute("value"),
- "moz-radio-group should reset to default value"
- );
- is(
- formData.get("moz-select"),
- document.querySelector("moz-select").getAttribute("value"),
- "moz-select should reset to default value"
- );
- is(
- formData.get("moz-toggle"),
- document.querySelector("moz-toggle").getAttribute("value"),
- "moz-toggle should reset to default value"
- );
- is(
- formData.get("moz-input-search"),
- document.querySelector("moz-input-search").getAttribute("value"),
- "moz-input-search should reset to default value"
- );
- is(
- formData.get("moz-input-text"),
- document.querySelector("moz-input-text").getAttribute("value"),
- "moz-input-text should reset to default value"
- );
- // Assert that the checkbox checked is restored to the
- // defaultChecked property
- is(
- checkbox.checked,
- checkbox.defaultChecked,
- "moz-checkbox should reset its checked state to the defaultChecked value"
- );
- });
- </script>
- </head>
- <body>
- <div id="render"></div>
- <pre id="test"></pre>
- </body>
-</html>
diff --git a/toolkit/content/widgets/lit-select-control.mjs b/toolkit/content/widgets/lit-select-control.mjs
@@ -39,12 +39,10 @@ const NAVIGATION_DIRECTIONS = {
* expected.
*/
export class SelectControlBaseElement extends MozLitElement {
- static formAssociated = true;
#childElements;
#value;
#checkedIndex;
#focusedIndex;
- #internals;
static properties = {
type: { type: String },
@@ -63,7 +61,6 @@ export class SelectControlBaseElement extends MozLitElement {
set value(newValue) {
this.#value = newValue;
- this.#internals.setFormValue(newValue);
this.childElements.forEach((item, index) => {
let isChecked = this.value === item.value;
item.checked = isChecked;
@@ -139,19 +136,11 @@ export class SelectControlBaseElement extends MozLitElement {
}
return this.#childElements;
}
- get form() {
- return this.#internals.form;
- }
-
- formResetCallback() {
- this.value = this.getAttribute("value");
- }
constructor() {
super();
this.type = "radio";
this.disabled = false;
- this.#internals = this.attachInternals();
this.addEventListener("blur", e => this.handleBlur(e), true);
this.addEventListener("keydown", e => this.handleKeydown(e));
}
@@ -275,9 +264,6 @@ export class SelectControlBaseElement extends MozLitElement {
item.role = childRole;
});
}
- if (changedProperties.has("value")) {
- this.#internals.setFormValue(this.value);
- }
}
handleSetName() {
diff --git a/toolkit/content/widgets/lit-utils.mjs b/toolkit/content/widgets/lit-utils.mjs
@@ -246,7 +246,6 @@ export class MozLitElement extends LitElement {
* @property {string} ariaDescription - The aria-description text when there is no visible description.
*/
export class MozBaseInputElement extends MozLitElement {
- static formAssociated = true;
#internals;
#hasSlottedContent = new Map();
@@ -271,28 +270,9 @@ export class MozBaseInputElement extends MozLitElement {
this.#internals = this.attachInternals();
}
- get form() {
- return this.#internals.form;
- }
-
- /**
- * @param {string} value The current value of the element.
- */
- setFormValue(value) {
- this.#internals.setFormValue(value);
- }
-
- formResetCallback() {
- this.value = this.defaultValue;
- }
-
connectedCallback() {
super.connectedCallback();
this.setAttribute("inputlayout", this.constructor.inputLayout);
- let val = this.getAttribute("value");
- this.defaultValue = val;
- this.value = val;
- this.#internals.setFormValue(this.value || null);
}
willUpdate(changedProperties) {
@@ -301,9 +281,6 @@ export class MozBaseInputElement extends MozLitElement {
this.#updateInternalState(this.supportPage, "support-link");
this.#updateInternalState(this.label, "label");
- if (changedProperties.has("value")) {
- this.setFormValue(this.value);
- }
let activatedProperty = this.constructor.activatedProperty;
if (
(activatedProperty && changedProperties.has(activatedProperty)) ||
diff --git a/toolkit/content/widgets/moz-checkbox/moz-checkbox.mjs b/toolkit/content/widgets/moz-checkbox/moz-checkbox.mjs
@@ -39,21 +39,6 @@ export default class MozCheckbox extends MozBaseInputElement {
this.checked = false;
}
- connectedCallback() {
- super.connectedCallback();
- this.defaultChecked = this.getAttribute("checked") === "";
- this.checked = !!this.defaultChecked;
- let val = this.getAttribute("value");
- if (!val) {
- this.defaultValue = "on";
- this.value = "on";
- } else {
- this.defaultValue = val;
- this.value = val;
- }
- this.setFormValue(this.value);
- }
-
/**
* Handles click events and keeps the checkbox checked value in sync
*
@@ -62,16 +47,6 @@ export default class MozCheckbox extends MozBaseInputElement {
*/
handleStateChange(event) {
this.checked = event.target.checked;
- if (this.checked) {
- this.setFormValue(this.value);
- } else {
- this.setFormValue(null);
- }
- }
-
- formResetCallback() {
- this.checked = this.defaultChecked;
- this.value = this.defaultValue;
}
inputTemplate() {
