valid-invalid-form-fieldset.html (4789B)
1 <!DOCTYPE html> 2 <link rel=author href="mailto:jarhar@chromium.org"> 3 <link rel=help href="https://github.com/w3c/csswg-drafts/issues/9257"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <script src="/resources/testdriver.js"></script> 7 <script src="/resources/testdriver-vendor.js"></script> 8 9 <form> 10 <fieldset> 11 <input type=email> 12 <input type=submit> 13 </fieldset> 14 </form> 15 16 <script> 17 promise_test(async () => { 18 const form = document.querySelector('form'); 19 const fieldset = document.querySelector('fieldset'); 20 const input = document.querySelector('input[type=email]'); 21 22 assert_false(form.matches(':invalid'), 'form should not initially match :invalid.'); 23 assert_true(form.matches(':valid'), 'form should initialy match :valid.'); 24 assert_false(form.matches(':user-valid'), 'initial state: form should never match :user-valid.'); 25 assert_false(form.matches(':user-invalid'), 'initial state: form should never match :user-invalid.'); 26 27 assert_false(fieldset.matches(':invalid'), 'fieldset should not initially match :invalid.'); 28 assert_true(fieldset.matches(':valid'), 'fieldset should initialy match :valid.'); 29 assert_false(fieldset.matches(':user-valid'), 'initial state: fieldset should never match :user-valid.'); 30 assert_false(fieldset.matches(':user-invalid'), 'initial state: fieldset should never match :user-invalid.'); 31 32 assert_false(input.matches(':invalid'), 'input should not initially match :invalid.'); 33 assert_true(input.matches(':valid'), 'input should initialy match :valid.'); 34 assert_false(input.matches(':user-valid'), 'input should not initialy match :user-valid.'); 35 assert_false(input.matches(':user-invalid'), 'input should not initialy match :user-invalid.'); 36 37 await test_driver.click(input); 38 await test_driver.send_keys(input, 'user'); 39 input.blur(); 40 41 assert_true(form.matches(':invalid'), 'form should match :invalid after invalid text was entered.'); 42 assert_false(form.matches(':valid'), 'form should not match :valid after invalid text was entered.'); 43 assert_false(form.matches(':user-valid'), 'after text was entered: form should never match :user-valid.'); 44 assert_false(form.matches(':user-invalid'), 'after text was entered: form should never match :user-invalid.'); 45 46 assert_true(fieldset.matches(':invalid'), 'fieldset should match :invalid after invalid text was entered.'); 47 assert_false(fieldset.matches(':valid'), 'fieldset should not match :valid after invalid text was entered.'); 48 assert_false(fieldset.matches(':user-valid'), 'after invalid text was entered: fieldset should never match :user-valid.'); 49 assert_false(fieldset.matches(':user-invalid'), 'after ininvalid text was entered: fieldset should never match :user-invalid.'); 50 51 assert_true(input.matches(':invalid'), 'input should match :invalid after invalid text was entered.'); 52 assert_false(input.matches(':valid'), 'input should not match :valid after invalid text was entered.'); 53 assert_false(input.matches(':user-valid'), 'input should not match :user-valid after invalid text was entered.'); 54 assert_true(input.matches(':user-invalid'), 'input should match :user-invalid after invalid text was entered.'); 55 56 await test_driver.click(input); 57 await test_driver.send_keys(input, '@example.com'); 58 await input.blur(); 59 60 assert_false(form.matches(':invalid'), 'form should not match :invalid after valid text was entered.'); 61 assert_true(form.matches(':valid'), 'form should match :valid after valid text was entered.'); 62 assert_false(form.matches(':user-valid'), 'after valid text was entered: form should never match :user-valid.'); 63 assert_false(form.matches(':user-invalid'), 'after invalid text was entered: form should never match :user-invalid.'); 64 65 assert_false(fieldset.matches(':invalid'), 'fieldset should not match :invalid after valid text was entered.'); 66 assert_true(fieldset.matches(':valid'), 'fieldset should match :valid after valid text was entered.'); 67 assert_false(fieldset.matches(':user-valid'), 'after valid text was entered: fieldset should never match :user-valid.'); 68 assert_false(fieldset.matches(':user-invalid'), 'after invalid text was entered: fieldset should never match :user-invalid.'); 69 70 assert_false(input.matches(':invalid'), 'input should not match :invalid after valid text was entered.'); 71 assert_true(input.matches(':valid'), 'input should match :valid after valid text was entered.'); 72 assert_true(input.matches(':user-valid'), 'input should match :user-valid after valid text was entered.'); 73 assert_false(input.matches(':user-invalid'), 'input should not match :user-invalid after invalid text was entered.'); 74 }, 'form and fieldset elements should match :valid/:invalid but not :user-valid/:user-invalid.'); 75 </script>