From c9b013e6906a9e19edb7f9c1244e35037482ac37 Mon Sep 17 00:00:00 2001
From: Alexey Shvayka <ashvayka@apple.com>
Date: Thu, 30 Mar 2023 13:09:55 -0700
Subject: [PATCH] WebKit export of
 https://bugs.webkit.org/show_bug.cgi?id=254571

---
 css/selectors/user-invalid.html | 50 ++++++++++++++++++++++++++++++---
 css/selectors/user-valid.html   | 49 +++++++++++++++++++++++++++++---
 2 files changed, 91 insertions(+), 8 deletions(-)
diff --git a/css/selectors/user-invalid.html b/css/selectors/user-invalid.html
index 1f3ad22a231a5dd..e4db03a45f44149 100644
--- a/css/selectors/user-invalid.html
+++ b/css/selectors/user-invalid.html
@@ -1,16 +1,58 @@
 <!doctype html>
 <title>Support for the :user-invalid pseudo-class</title>
+<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
 <link rel="help" href="https://drafts.csswg.org/selectors/#user-pseudos">
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
-<input value="bar" pattern="foo">
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+
+<style>
+input {
+  border: 2px solid black;
+}
+
+input:user-valid {
+  border-color: green;
+}
+
+input:user-invalid {
+  border-color: red;
+}
+</style>
+
+<input id="initially-invalid" type="email" value="foo">
+
 <script>
-test(() => {
-  const input = document.querySelector('input');
+promise_test(async () => {
+  const input = document.querySelector("#initially-invalid");
   assert_false(input.validity.valid, "Should be invalid");
   // The selector can't match because no interaction has happened.
   assert_false(input.matches(':user-invalid'));
-}, ':user-invalid selector should be supported');
+
+  assert_false(input.matches(":user-valid"), "Initially does not match :user-valid");
+  assert_false(input.matches(":user-invalid"), "Initially does not match :user-invalid");
+
+  await test_driver.click(input);
+  input.blur();
+
+  assert_false(input.matches(":user-valid"), "No change happened, still does not match :user-valid");
+  assert_false(input.matches(":user-invalid"), "No change happened, still does not match :user-invalid");
+
+  await test_driver.click(input);
+  await test_driver.send_keys(input, "not an email");
+  input.blur();
+
+  assert_true(input.matches(":user-invalid"), "Typed an invalid email, :user-invalid now matches");
+  assert_false(input.matches(":user-valid"), "Typed an invalid email, :user-valid does not match");
+
+  await test_driver.click(input);
+  await test_driver.send_keys(input, "test@example.com");
+  input.blur();
+
+  assert_true(input.matches(":user-valid"), "Put a valid email, :user-valid now matches");
+  assert_false(input.matches(":user-invalid"), "Put an valid email, :user-invalid no longer matches");
+}, ':user-invalid selector should respond to user action');
 
 // historical: https://github.com/w3c/csswg-drafts/issues/1329
 test(() => {
diff --git a/css/selectors/user-valid.html b/css/selectors/user-valid.html
index 36ca7afe1411638..12b89282c3ec704 100644
--- a/css/selectors/user-valid.html
+++ b/css/selectors/user-valid.html
@@ -1,14 +1,55 @@
 <!doctype html>
 <title>Support for the :user-valid pseudo-class</title>
+<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
 <link rel="help" href="https://drafts.csswg.org/selectors/#user-pseudos">
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
-<input>
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+
+<style>
+input {
+  border: 2px solid black;
+}
+
+input:user-valid {
+  border-color: green;
+}
+
+input:user-invalid {
+  border-color: red;
+}
+</style>
+
+<input id="initially-valid" type="email">
+
 <script>
-test(() => {
-  const input = document.querySelector('input');
+promise_test(async () => {
+  const input = document.querySelector("#initially-valid");
   assert_true(input.validity.valid);
   // The selector can't match because no interaction has happened.
   assert_false(input.matches(':user-valid'));
-}, ':user-valid selector should be supported');
+
+  assert_false(input.matches(":user-valid"), "Initially does not match :user-valid");
+  assert_false(input.matches(":user-invalid"), "Initially does not match :user-invalid");
+
+  await test_driver.click(input);
+  input.blur();
+
+  assert_false(input.matches(":user-valid"), "No change happened, still does not match :user-valid");
+  assert_false(input.matches(":user-invalid"), "No change happened, still does not match :user-invalid");
+
+  await test_driver.click(input);
+  await test_driver.send_keys(input, "test@example.com");
+  input.blur();
+
+  assert_true(input.matches(":user-valid"), "Typed a valid email, :user-valid now matches");
+  assert_false(input.matches(":user-invalid"), "Typed a valid email, :user-invalid does not match");
+
+  input.required = true;
+  input.value = "";
+
+  assert_false(input.matches(":user-valid"), "Cleared required input, :user-valid no longer matches");
+  assert_true(input.matches(":user-invalid"), "Cleared required input, :user-invalid now matches");
+}, ":user-valid selector should respond to user action");
 </script>
