summaryrefslogtreecommitdiffstats
path: root/dom/tests/browser/browser_form_associated_custom_elements_validity.js
blob: 3765405735a5416d246a72d8d577e09f46b87b89 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
/**
 * Any copyright is dedicated to the Public Domain.
 * http://creativecommons.org/publicdomain/zero/1.0/
 */

"use strict";

add_task(async function report_validity() {
  await BrowserTestUtils.withNewTab(
    {
      gBrowser,
      url: `data:text/html,<my-control></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 shadow = this.attachShadow({ mode: "open" });
            let input = content.document.createElement("input");
            shadow.appendChild(input);

            let internals = this.attachInternals();
            internals.setValidity({ valueMissing: true }, aMessage, input);
            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;
    }
  );
});

add_task(async function form_report_validity() {
  await BrowserTestUtils.withNewTab(
    {
      gBrowser,
      url: `data:text/html,<form><my-control></my-control></form>`,
    },
    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 shadow = this.attachShadow({ mode: "open" });
            let input = content.document.createElement("input");
            shadow.appendChild(input);

            let internals = this.attachInternals();
            internals.setValidity({ valueMissing: true }, aMessage, input);
          }
        }
        content.customElements.define("my-control", MyControl);

        let myControl = content.document.querySelector("my-control");
        content.customElements.upgrade(myControl);

        let form = content.document.querySelector("form");
        is(form.length, "1", "check form.length");
        form.reportValidity();
      });
      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;
    }
  );
});