browser_form_associated_custom_elements_validity.js (5025B)
1 /** 2 * Any copyright is dedicated to the Public Domain. 3 * http://creativecommons.org/publicdomain/zero/1.0/ 4 */ 5 6 "use strict"; 7 8 add_task(async function report_validity() { 9 await BrowserTestUtils.withNewTab( 10 { 11 gBrowser, 12 url: `data:text/html,<my-control></my-control>`, 13 }, 14 async function (aBrowser) { 15 let promisePopupShown = BrowserTestUtils.waitForEvent( 16 window, 17 "popupshown" 18 ); 19 20 let message = "valueMissing message"; 21 await SpecialPowers.spawn(aBrowser, [message], function (aMessage) { 22 class MyControl extends content.HTMLElement { 23 static get formAssociated() { 24 return true; 25 } 26 constructor() { 27 super(); 28 let shadow = this.attachShadow({ mode: "open" }); 29 let input = content.document.createElement("input"); 30 shadow.appendChild(input); 31 32 let internals = this.attachInternals(); 33 internals.setValidity({ valueMissing: true }, aMessage, input); 34 internals.reportValidity(); 35 } 36 } 37 content.customElements.define("my-control", MyControl); 38 39 let myControl = content.document.querySelector("my-control"); 40 content.customElements.upgrade(myControl); 41 }); 42 await promisePopupShown; 43 44 let invalidFormPopup = 45 window.document.getElementById("invalid-form-popup"); 46 is(invalidFormPopup.state, "open", "invalid-form-popup should be opened"); 47 is(invalidFormPopup.firstChild.textContent, message, "check message"); 48 49 let promisePopupHidden = BrowserTestUtils.waitForEvent( 50 invalidFormPopup, 51 "popuphidden" 52 ); 53 invalidFormPopup.hidePopup(); 54 await promisePopupHidden; 55 } 56 ); 57 }); 58 59 add_task(async function form_report_validity() { 60 await BrowserTestUtils.withNewTab( 61 { 62 gBrowser, 63 url: `data:text/html,<form><my-control></my-control></form>`, 64 }, 65 async function (aBrowser) { 66 let promisePopupShown = BrowserTestUtils.waitForEvent( 67 window, 68 "popupshown" 69 ); 70 71 let message = "valueMissing message"; 72 await SpecialPowers.spawn(aBrowser, [message], function (aMessage) { 73 class MyControl extends content.HTMLElement { 74 static get formAssociated() { 75 return true; 76 } 77 constructor() { 78 super(); 79 let shadow = this.attachShadow({ mode: "open" }); 80 let input = content.document.createElement("input"); 81 shadow.appendChild(input); 82 83 let internals = this.attachInternals(); 84 internals.setValidity({ valueMissing: true }, aMessage, input); 85 } 86 } 87 content.customElements.define("my-control", MyControl); 88 89 let myControl = content.document.querySelector("my-control"); 90 content.customElements.upgrade(myControl); 91 92 let form = content.document.querySelector("form"); 93 is(form.length, "1", "check form.length"); 94 form.reportValidity(); 95 }); 96 await promisePopupShown; 97 98 let invalidFormPopup = 99 window.document.getElementById("invalid-form-popup"); 100 is(invalidFormPopup.state, "open", "invalid-form-popup should be opened"); 101 is(invalidFormPopup.firstChild.textContent, message, "check message"); 102 103 let promisePopupHidden = BrowserTestUtils.waitForEvent( 104 invalidFormPopup, 105 "popuphidden" 106 ); 107 invalidFormPopup.hidePopup(); 108 await promisePopupHidden; 109 } 110 ); 111 }); 112 113 add_task(async function no_validation_anchor() { 114 await BrowserTestUtils.withNewTab( 115 { 116 gBrowser, 117 url: `data:text/html,<my-control tabindex=0>custom elements</my-control>`, 118 }, 119 async function (aBrowser) { 120 let promisePopupShown = BrowserTestUtils.waitForEvent( 121 window, 122 "popupshown" 123 ); 124 125 let message = "valueMissing message"; 126 await SpecialPowers.spawn(aBrowser, [message], function (aMessage) { 127 class MyControl extends content.HTMLElement { 128 static get formAssociated() { 129 return true; 130 } 131 constructor() { 132 super(); 133 let internals = this.attachInternals(); 134 internals.setValidity({ valueMissing: true }, aMessage); 135 internals.reportValidity(); 136 } 137 } 138 content.customElements.define("my-control", MyControl); 139 140 let myControl = content.document.querySelector("my-control"); 141 content.customElements.upgrade(myControl); 142 }); 143 await promisePopupShown; 144 145 let invalidFormPopup = 146 window.document.getElementById("invalid-form-popup"); 147 is(invalidFormPopup.state, "open", "invalid-form-popup should be opened"); 148 is(invalidFormPopup.firstChild.textContent, message, "check message"); 149 150 let promisePopupHidden = BrowserTestUtils.waitForEvent( 151 invalidFormPopup, 152 "popuphidden" 153 ); 154 invalidFormPopup.hidePopup(); 155 await promisePopupHidden; 156 } 157 ); 158 });