Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

WebKit export of https://bugs.webkit.org/show_bug.cgi?id=254571 #39293

Merged
merged 1 commit into from
Apr 3, 2023
Merged

WebKit export of https://bugs.webkit.org/show_bug.cgi?id=254571 #39293

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
51 changes: 47 additions & 4 deletions css/selectors/user-invalid.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,59 @@
<!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");

input.value = "";
await test_driver.click(input);
await test_driver.send_keys(input, "[email protected]");
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(() => {
Expand Down
49 changes: 45 additions & 4 deletions css/selectors/user-valid.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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, "[email protected]");
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>