-
Notifications
You must be signed in to change notification settings - Fork 3.2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
WebKit export of https://bugs.webkit.org/show_bug.cgi?id=254571
- Loading branch information
Alexey Shvayka
committed
Mar 31, 2023
1 parent
e68cb91
commit c9b013e
Showing
2 changed files
with
91 additions
and
8 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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, "[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(() => { | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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> |