1 files changed, 49 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/selectors/user-invalid.html b/testing/web-platform/tests/css/selectors/user-invalid.html
index 5f8fa5811a..c57e764831 100644
--- a/testing/web-platform/tests/css/selectors/user-invalid.html
+++ b/testing/web-platform/tests/css/selectors/user-invalid.html
@@ -29,6 +29,7 @@
   <input placeholder="Required field" required id="required-input"><br>
   <textarea placeholder="Required field" required id="required-textarea"></textarea><br>
   <input type="checkbox" required id="required-checkbox"><br>
+  <input type="date" required id="required-date"><br>
   <input type="submit" id="submit-button">
   <input type="reset" id="reset-button">
 </form>
@@ -80,12 +81,14 @@ promise_test(async () => {
   const requiredInput = document.querySelector("#required-input");
   const requiredTextarea = document.querySelector("#required-textarea");
   const requiredCheckbox = document.querySelector("#required-checkbox");
+  const requiredDate = document.querySelector("#required-date");
   const submitButton = document.querySelector("#submit-button");
   const resetButton = document.querySelector("#reset-button");
 
   assert_false(requiredInput.validity.valid);
   assert_false(requiredTextarea.validity.valid);
   assert_false(requiredCheckbox.validity.valid);
+  assert_false(requiredDate.validity.valid);
   // The selector can't match because no interaction has happened.
   assert_false(requiredInput.matches(":user-valid"), "Initially does not match :user-valid");
   assert_false(requiredInput.matches(":user-invalid"), "Initially does not match :user-invalid");
@@ -96,6 +99,9 @@ promise_test(async () => {
   assert_false(requiredCheckbox.matches(":user-valid"), "Initially does not match :user-valid");
   assert_false(requiredCheckbox.matches(":user-invalid"), "Initially does not match :user-invalid");
 
+  assert_false(requiredDate.matches(":user-valid"), "Initially does not match :user-valid");
+  assert_false(requiredDate.matches(":user-invalid"), "Initially does not match :user-invalid");
+
   submitButton.click();
 
   assert_true(requiredInput.matches(":user-invalid"), "Submitted the form, input is validated");
@@ -107,6 +113,9 @@ promise_test(async () => {
   assert_true(requiredCheckbox.matches(":user-invalid"), "Submitted the form, checkbox is validated");
   assert_false(requiredCheckbox.matches(":user-valid"), "Submitted the form, checkbox is validated");
 
+  assert_true(requiredDate.matches(":user-invalid"), "Submitted the form, date input is validated");
+  assert_false(requiredDate.matches(":user-valid"), "Submitted the form, date input is validated");
+
   resetButton.click();
 
   assert_false(requiredInput.matches(":user-valid"), "Reset the form, user-interacted flag is reset");
@@ -118,6 +127,9 @@ promise_test(async () => {
   assert_false(requiredCheckbox.matches(":user-valid"), "Reset the form, user-interacted flag is reset");
   assert_false(requiredCheckbox.matches(":user-invalid"), "Reset the form, user-interacted flag is reset");
 
+  assert_false(requiredDate.matches(":user-valid"), "Reset the form, user-interacted flag is reset");
+  assert_false(requiredDate.matches(":user-invalid"), "Reset the form, user-interacted flag is reset");
+
   // Test programmatic form submission with constraint validation.
   form.requestSubmit();
 
@@ -129,6 +141,9 @@ promise_test(async () => {
 
   assert_true(requiredCheckbox.matches(":user-invalid"), "Called form.requestSubmit(), checkbox is validated");
   assert_false(requiredCheckbox.matches(":user-valid"), "Called form.requestSubmit(), checkbox is validated");
+
+  assert_true(requiredDate.matches(":user-invalid"), "Called form.requestSubmit(), date input is validated");
+  assert_false(requiredDate.matches(":user-valid"), "Called form.requestSubmit(), date input is validated");
 }, ":user-invalid selector properly interacts with submit & reset buttons");
 
 // historical: https://github.com/w3c/csswg-drafts/issues/1329
@@ -193,4 +208,38 @@ promise_test(async () => {
   assert_true(checkbox.matches(':user-invalid'),
     'Checkbox should match :user-invalid after clicking twice.');
 }, 'A required checkbox should match :user-invalid if the user unchecks it and blurs.');
+
+promise_test(async () => {
+  const date = document.getElementById('required-date');
+
+  const resetButton = document.getElementById('reset-button');
+  resetButton.click();
+  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.value = '2024-04-15';
+  assert_false(date.matches(':user-invalid'),
+    'date should not match :user-invalid after programatically changing value.');
+  date.value = '';
+  assert_false(date.matches(':user-invalid'),
+    'date should not match :user-invalid after programatically changing value.');
+
+  const tabKey = '\uE004';
+  const backspace = '\uE003';
+  date.focus();
+  // Press tab twice at the end to make sure that focus has left the input.
+  await test_driver.send_keys(date, `1${tabKey}1${tabKey}1234${tabKey}${tabKey}`);
+  assert_not_equals(document.activeElement, date,
+    'Pressing tab twice after typing in the date should have blurred the input.');
+  assert_equals(date.value, '1234-01-01',
+    'Date input value should match the testdriver input.');
+  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_true(date.matches(':user-invalid'),
+    'Date input should match :user-invalid after typing in an invalid value.');
+}, 'A required date should match :user-invalid if the user unchecks it and blurs.');
 </script>