Bug 1881199 - Use FACE itself to show invalid popup when the validation anchor is null; r=smaug

Differential Revision: https://phabricator.services.mozilla.com/D202423

browser/actors/FormValidationChild.sys.mjs

@@ -73,7 +73,11 @@ export class FormValidationChild extends JSWindowActorChild {
       if (element.isFormAssociatedCustomElements) {
         // For element that are form-associated custom elements, user agents
         // should use their validation anchor instead.
-        element = element.internals.validationAnchor;
+        // It is not clear how constraint validation should work for FACE in
+        // spec if the validation anchor is null, see
+        // https://github.com/whatwg/html/issues/10155. Blink seems fallback to
+        // FACE itself when validation anchor is null, which looks reasonable.
+        element = element.internals.validationAnchor || element;
       }
 
       if (!element || !Services.focus.elementIsFocusable(element, 0)) {

dom/tests/browser/browser_form_associated_custom_elements_validity.js

@@ -109,3 +109,50 @@ add_task(async function form_report_validity() {
     }
   );
 });
+
+add_task(async function no_validation_anchor() {
+  await BrowserTestUtils.withNewTab(
+    {
+      gBrowser,
+      url: `data:text/html,<my-control tabindex=0>custom elements</my-control>`,
+    },
+    async function (aBrowser) {
+      let promisePopupShown = BrowserTestUtils.waitForEvent(
+        window,
+        "popupshown"
+      );
+
+      let message = "valueMissing message";
+      await SpecialPowers.spawn(aBrowser, [message], function (aMessage) {
+        class MyControl extends content.HTMLElement {
+          static get formAssociated() {
+            return true;
+          }
+          constructor() {
+            super();
+            let internals = this.attachInternals();
+            internals.setValidity({ valueMissing: true }, aMessage);
+            internals.reportValidity();
+          }
+        }
+        content.customElements.define("my-control", MyControl);
+
+        let myControl = content.document.querySelector("my-control");
+        content.customElements.upgrade(myControl);
+      });
+      await promisePopupShown;
+
+      let invalidFormPopup =
+        window.document.getElementById("invalid-form-popup");
+      is(invalidFormPopup.state, "open", "invalid-form-popup should be opened");
+      is(invalidFormPopup.firstChild.textContent, message, "check message");
+
+      let promisePopupHidden = BrowserTestUtils.waitForEvent(
+        invalidFormPopup,
+        "popuphidden"
+      );
+      invalidFormPopup.hidePopup();
+      await promisePopupHidden;
+    }
+  );
+});