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
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
|
<!DOCTYPE html>
<link rel=author href="mailto:jarhar@chromium.org">
<link rel="help" href="https://drafts.csswg.org/selectors/#user-pseudos">
<link rel="help" href="https://html.spec.whatwg.org/#selector-user-invalid">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/testdriver.js"></script>
<script src="/resources/testdriver-vendor.js"></script>
<!-- This test asserts specifics of keyboard behavior in multifield inputs,
like type=date and type=time, in ways that are not specified. -->
<form>
<input id=date type=date required>
<input id=time type=time required>
<input id=datetime-local type=datetime-local required>
</form>
<script>
const tabKey = '\uE004';
const backspace = '\uE003';
promise_test(async () => {
const date = document.getElementById('date');
assert_false(date.matches(':user-valid'),
'Date input should not match :user-valid at the start of the test.');
assert_false(date.matches(':user-invalid'),
'Date input should not match :user-invalid at the start of the test.');
assert_equals(date.value, '',
'Date input should not have a value at the start of the test.');
date.focus();
await test_driver.send_keys(date, `1${tabKey}`);
assert_equals(date.value, '',
'Date input value should not be set after partially inputting the date.');
assert_false(date.matches(':user-valid'),
'Date input should not match :user-valid after partially inputting the date.');
assert_false(date.matches(':user-invalid'),
'Date input should not match :user-invalid after partially inputting the date.');
await test_driver.send_keys(date, `1${tabKey}1234${tabKey}`);
assert_equals(date.value, '1234-01-01',
'Date input value should match the testdriver input.');
assert_true(date.matches(':user-valid'),
'Date input should match :user-valid after typing in a complete value.');
assert_false(date.matches(':user-invalid'),
'Date input should not match :user-invalid after typing in a complete value.');
date.blur();
date.focus();
await test_driver.send_keys(date, backspace);
assert_equals(date.value, '',
'Date input value should be cleared when deleting one of the sub-values.');
assert_false(date.matches(':user-valid'),
'Date input should not match :user-valid after typing in an invalid value.');
assert_true(date.matches(':user-invalid'),
'Date input should match :user-invalid after typing in an invalid value.');
}, '<input type=date> keyboard behavior for :user-valid/:user-invalid.');
promise_test(async () => {
const time = document.getElementById('time');
assert_false(time.matches(':user-valid'),
'Time input should not match :user-valid at the start of the test.');
assert_false(time.matches(':user-invalid'),
'Time input should not match :user-invalid at the start of the test.');
assert_equals(time.value, '',
'Time input should not have a value at the start of the test.');
time.focus();
await test_driver.send_keys(time, `1${tabKey}`);
assert_equals(time.value, '',
'Time input value should not be set after partially inputting the time.');
assert_false(time.matches(':user-valid'),
'Time input should not match :user-valid after partially inputting the time.');
assert_false(time.matches(':user-invalid'),
'Time input should not match :user-invalid after partially inputting the time.');
await test_driver.send_keys(time, `2${tabKey}a${tabKey}`);
assert_equals(time.value, '01:02',
'Time input value should match the testdriver input.');
assert_true(time.matches(':user-valid'),
'Time input should match :user-valid after typing in a complete value.');
assert_false(time.matches(':user-invalid'),
'Time input should not match :user-invalid after typing in a complete value.');
time.blur();
time.focus();
await test_driver.send_keys(time, backspace);
assert_equals(time.value, '',
'Time input value should be cleared when deleting one of the sub-values.');
assert_false(time.matches(':user-valid'),
'Time input should not match :user-valid after typing in an invalid value.');
assert_true(time.matches(':user-invalid'),
'Time input should match :user-invalid after typing in an invalid value.');
}, '<input type=time> keyboard behavior for :user-valid/:user-invalid.');
promise_test(async () => {
const dateTimeLocal = document.getElementById('datetime-local');
assert_false(dateTimeLocal.matches(':user-valid'),
'Datetime input should not match :user-valid at the start of the test.');
assert_false(dateTimeLocal.matches(':user-invalid'),
'Datetime input should not match :user-invalid at the start of the test.');
assert_equals(dateTimeLocal.value, '',
'Datetime input should not have a value at the start of the test.');
dateTimeLocal.focus();
await test_driver.send_keys(dateTimeLocal, `1${tabKey}`);
assert_equals(dateTimeLocal.value, '',
'Datetime input value should not be set after partially inputting the dateTimeLocal.');
assert_false(dateTimeLocal.matches(':user-valid'),
'Datetime input should not match :user-valid after partially inputting the dateTimeLocal.');
assert_false(dateTimeLocal.matches(':user-invalid'),
'Datetime input should not match :user-invalid after partially inputting the dateTimeLocal.');
await test_driver.send_keys(dateTimeLocal, `1${tabKey}1234${tabKey}1${tabKey}2${tabKey}a${tabKey}`);
assert_equals(dateTimeLocal.value, '1234-01-01T01:02',
'Datetime input value should match the testdriver input.');
assert_true(dateTimeLocal.matches(':user-valid'),
'Datetime input should match :user-valid after typing in a complete value.');
assert_false(dateTimeLocal.matches(':user-invalid'),
'Datetime input should not match :user-invalid after typing in a complete value.');
dateTimeLocal.blur();
dateTimeLocal.focus();
await test_driver.send_keys(dateTimeLocal, backspace);
assert_equals(dateTimeLocal.value, '',
'Datetime input value should be cleared when deleting one of the sub-values.');
assert_false(dateTimeLocal.matches(':user-valid'),
'Datetime input should not match :user-valid after typing in an invalid value.');
assert_true(dateTimeLocal.matches(':user-invalid'),
'Datetime input should match :user-invalid after typing in an invalid value.');
}, '<input type=datetime-local> keyboard behavior for :user-valid/:user-invalid.');
</script>
|
