valid-invalid-fieldset-disconnected.html (1647B)
1 <!DOCTYPE html> 2 <meta charset=utf-8> 3 <title>Selector: pseudo-classes (:valid, :invalid) on disconnected fieldset element</title> 4 <link rel=help href="https://html.spec.whatwg.org/multipage/semantics-other.html#selector-valid"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 8 <fieldset id=fieldset1> 9 <input id=input1> 10 </fieldset> 11 12 <fieldset id=fieldset2> 13 <select id=select1 required multiple> 14 <option>foo 15 </select> 16 </fieldset> 17 18 <script> 19 test(() => { 20 const fieldset = document.querySelector("#fieldset1"); 21 const input = document.querySelector("#input1"); 22 23 assert_true(fieldset.matches(":valid")); 24 assert_false(fieldset.matches(":invalid")); 25 26 fieldset.remove(); 27 input.setCustomValidity("foo"); 28 29 assert_false(fieldset.matches(":valid")); 30 assert_true(fieldset.matches(":invalid")); 31 32 input.setCustomValidity(""); 33 34 assert_true(fieldset.matches(":valid")); 35 assert_false(fieldset.matches(":invalid")); 36 }, "<input> element becomes invalid inside disconnected <fieldset>"); 37 38 test(() => { 39 const fieldset = document.querySelector("#fieldset2"); 40 const select = document.querySelector("#select1"); 41 42 assert_false(fieldset.matches(":valid")); 43 assert_true(fieldset.matches(":invalid")); 44 45 fieldset.remove(); 46 select.required = false; 47 48 assert_true(fieldset.matches(":valid")); 49 assert_false(fieldset.matches(":invalid")); 50 51 select.required = true; 52 select.firstElementChild.selected = true; 53 54 assert_true(fieldset.matches(":valid")); 55 assert_false(fieldset.matches(":invalid")); 56 }, "<select> element becomes valid inside disconnected <fieldset>"); 57 </script>