user-valid-user-invalid-multifield-inputs.tentative.html (6462B)
1 <!DOCTYPE html> 2 <link rel=author href="mailto:jarhar@chromium.org"> 3 <link rel="help" href="https://drafts.csswg.org/selectors/#user-pseudos"> 4 <link rel="help" href="https://html.spec.whatwg.org/#selector-user-invalid"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <script src="/resources/testdriver.js"></script> 8 <script src="/resources/testdriver-vendor.js"></script> 9 10 <!-- This test asserts specifics of keyboard behavior in multifield inputs, 11 like type=date and type=time, in ways that are not specified. --> 12 13 <form> 14 <input id=date type=date required> 15 <input id=time type=time required> 16 <input id=datetime-local type=datetime-local required> 17 </form> 18 19 <script> 20 const tabKey = '\uE004'; 21 const backspace = '\uE003'; 22 23 promise_test(async () => { 24 const date = document.getElementById('date'); 25 assert_false(date.matches(':user-valid'), 26 'Date input should not match :user-valid at the start of the test.'); 27 assert_false(date.matches(':user-invalid'), 28 'Date input should not match :user-invalid at the start of the test.'); 29 assert_equals(date.value, '', 30 'Date input should not have a value at the start of the test.'); 31 32 date.focus(); 33 await test_driver.send_keys(date, `1${tabKey}`); 34 assert_equals(date.value, '', 35 'Date input value should not be set after partially inputting the date.'); 36 assert_false(date.matches(':user-valid'), 37 'Date input should not match :user-valid after partially inputting the date.'); 38 assert_false(date.matches(':user-invalid'), 39 'Date input should not match :user-invalid after partially inputting the date.'); 40 41 await test_driver.send_keys(date, `1${tabKey}1234${tabKey}`); 42 assert_equals(date.value, '1234-01-01', 43 'Date input value should match the testdriver input.'); 44 assert_true(date.matches(':user-valid'), 45 'Date input should match :user-valid after typing in a complete value.'); 46 assert_false(date.matches(':user-invalid'), 47 'Date input should not match :user-invalid after typing in a complete value.'); 48 49 date.blur(); 50 date.focus(); 51 await test_driver.send_keys(date, backspace); 52 assert_equals(date.value, '', 53 'Date input value should be cleared when deleting one of the sub-values.'); 54 assert_false(date.matches(':user-valid'), 55 'Date input should not match :user-valid after typing in an invalid value.'); 56 assert_true(date.matches(':user-invalid'), 57 'Date input should match :user-invalid after typing in an invalid value.'); 58 }, '<input type=date> keyboard behavior for :user-valid/:user-invalid.'); 59 60 promise_test(async () => { 61 const time = document.getElementById('time'); 62 assert_false(time.matches(':user-valid'), 63 'Time input should not match :user-valid at the start of the test.'); 64 assert_false(time.matches(':user-invalid'), 65 'Time input should not match :user-invalid at the start of the test.'); 66 assert_equals(time.value, '', 67 'Time input should not have a value at the start of the test.'); 68 69 time.focus(); 70 await test_driver.send_keys(time, `1${tabKey}`); 71 assert_equals(time.value, '', 72 'Time input value should not be set after partially inputting the time.'); 73 assert_false(time.matches(':user-valid'), 74 'Time input should not match :user-valid after partially inputting the time.'); 75 assert_false(time.matches(':user-invalid'), 76 'Time input should not match :user-invalid after partially inputting the time.'); 77 78 await test_driver.send_keys(time, `2${tabKey}a${tabKey}`); 79 assert_equals(time.value, '01:02', 80 'Time input value should match the testdriver input.'); 81 assert_true(time.matches(':user-valid'), 82 'Time input should match :user-valid after typing in a complete value.'); 83 assert_false(time.matches(':user-invalid'), 84 'Time input should not match :user-invalid after typing in a complete value.'); 85 86 time.blur(); 87 time.focus(); 88 await test_driver.send_keys(time, backspace); 89 assert_equals(time.value, '', 90 'Time input value should be cleared when deleting one of the sub-values.'); 91 assert_false(time.matches(':user-valid'), 92 'Time input should not match :user-valid after typing in an invalid value.'); 93 assert_true(time.matches(':user-invalid'), 94 'Time input should match :user-invalid after typing in an invalid value.'); 95 }, '<input type=time> keyboard behavior for :user-valid/:user-invalid.'); 96 97 promise_test(async () => { 98 const dateTimeLocal = document.getElementById('datetime-local'); 99 assert_false(dateTimeLocal.matches(':user-valid'), 100 'Datetime input should not match :user-valid at the start of the test.'); 101 assert_false(dateTimeLocal.matches(':user-invalid'), 102 'Datetime input should not match :user-invalid at the start of the test.'); 103 assert_equals(dateTimeLocal.value, '', 104 'Datetime input should not have a value at the start of the test.'); 105 106 dateTimeLocal.focus(); 107 await test_driver.send_keys(dateTimeLocal, `1${tabKey}`); 108 assert_equals(dateTimeLocal.value, '', 109 'Datetime input value should not be set after partially inputting the dateTimeLocal.'); 110 assert_false(dateTimeLocal.matches(':user-valid'), 111 'Datetime input should not match :user-valid after partially inputting the dateTimeLocal.'); 112 assert_false(dateTimeLocal.matches(':user-invalid'), 113 'Datetime input should not match :user-invalid after partially inputting the dateTimeLocal.'); 114 115 await test_driver.send_keys(dateTimeLocal, `1${tabKey}1234${tabKey}1${tabKey}2${tabKey}a${tabKey}`); 116 assert_equals(dateTimeLocal.value, '1234-01-01T01:02', 117 'Datetime input value should match the testdriver input.'); 118 assert_true(dateTimeLocal.matches(':user-valid'), 119 'Datetime input should match :user-valid after typing in a complete value.'); 120 assert_false(dateTimeLocal.matches(':user-invalid'), 121 'Datetime input should not match :user-invalid after typing in a complete value.'); 122 123 dateTimeLocal.blur(); 124 dateTimeLocal.focus(); 125 await test_driver.send_keys(dateTimeLocal, backspace); 126 assert_equals(dateTimeLocal.value, '', 127 'Datetime input value should be cleared when deleting one of the sub-values.'); 128 assert_false(dateTimeLocal.matches(':user-valid'), 129 'Datetime input should not match :user-valid after typing in an invalid value.'); 130 assert_true(dateTimeLocal.matches(':user-invalid'), 131 'Datetime input should match :user-invalid after typing in an invalid value.'); 132 }, '<input type=datetime-local> keyboard behavior for :user-valid/:user-invalid.'); 133 </script>