Add WPT for validity pseudos on forms and fieldsets
This patch adds tests for :valid, :invalid, :user-invalid, and
:user-valid on <form>s, <fieldset>s, and <input>s.
This is being discussed here:
https://github.com/w3c/csswg-drafts/issues/9257
This behavior is already interoperable, so this test should pass in all
browsers.
Bug: 1156069
Change-Id: I02a4ae0d628b37196ef269e066b3272114ed0b61
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4839394
Reviewed-by: Mason Freed <masonf@chromium.org>
Commit-Queue: Joey Arhar <jarhar@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1192951}
diff --git a/css/selectors/valid-invalid-form-fieldset.html b/css/selectors/valid-invalid-form-fieldset.html
new file mode 100644
index 0000000..95bfd9c
--- /dev/null
+++ b/css/selectors/valid-invalid-form-fieldset.html
@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<link rel=author href="mailto:jarhar@chromium.org">
+<link rel=help href="https://github.com/w3c/csswg-drafts/issues/9257">
+<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>
+
+<form>
+ <fieldset>
+ <input type=email>
+ <input type=submit>
+ </fieldset>
+</form>
+
+<script>
+promise_test(async () => {
+ const form = document.querySelector('form');
+ const fieldset = document.querySelector('fieldset');
+ const input = document.querySelector('input[type=email]');
+
+ assert_false(form.matches(':invalid'), 'form should not initially match :invalid.');
+ assert_true(form.matches(':valid'), 'form should initialy match :valid.');
+ assert_false(form.matches(':user-valid'), 'initial state: form should never match :user-valid.');
+ assert_false(form.matches(':user-invalid'), 'initial state: form should never match :user-invalid.');
+
+ assert_false(fieldset.matches(':invalid'), 'fieldset should not initially match :invalid.');
+ assert_true(fieldset.matches(':valid'), 'fieldset should initialy match :valid.');
+ assert_false(fieldset.matches(':user-valid'), 'initial state: fieldset should never match :user-valid.');
+ assert_false(fieldset.matches(':user-invalid'), 'initial state: fieldset should never match :user-invalid.');
+
+ assert_false(input.matches(':invalid'), 'input should not initially match :invalid.');
+ assert_true(input.matches(':valid'), 'input should initialy match :valid.');
+ assert_false(input.matches(':user-valid'), 'input should not initialy match :user-valid.');
+ assert_false(input.matches(':user-invalid'), 'input should not initialy match :user-invalid.');
+
+ await test_driver.click(input);
+ await test_driver.send_keys(input, 'user');
+ input.blur();
+
+ assert_true(form.matches(':invalid'), 'form should match :invalid after invalid text was entered.');
+ assert_false(form.matches(':valid'), 'form should not match :valid after invalid text was entered.');
+ assert_false(form.matches(':user-valid'), 'after text was entered: form should never match :user-valid.');
+ assert_false(form.matches(':user-invalid'), 'after text was entered: form should never match :user-invalid.');
+
+ assert_true(fieldset.matches(':invalid'), 'fieldset should match :invalid after invalid text was entered.');
+ assert_false(fieldset.matches(':valid'), 'fieldset should not match :valid after invalid text was entered.');
+ assert_false(fieldset.matches(':user-valid'), 'after invalid text was entered: fieldset should never match :user-valid.');
+ assert_false(fieldset.matches(':user-invalid'), 'after ininvalid text was entered: fieldset should never match :user-invalid.');
+
+ assert_true(input.matches(':invalid'), 'input should match :invalid after invalid text was entered.');
+ assert_false(input.matches(':valid'), 'input should not match :valid after invalid text was entered.');
+ assert_false(input.matches(':user-valid'), 'input should not match :user-valid after invalid text was entered.');
+ assert_true(input.matches(':user-invalid'), 'input should match :user-invalid after invalid text was entered.');
+
+ await test_driver.click(input);
+ await test_driver.send_keys(input, '@example.com');
+ await input.blur();
+
+ assert_false(form.matches(':invalid'), 'form should not match :invalid after valid text was entered.');
+ assert_true(form.matches(':valid'), 'form should match :valid after valid text was entered.');
+ assert_false(form.matches(':user-valid'), 'after valid text was entered: form should never match :user-valid.');
+ assert_false(form.matches(':user-invalid'), 'after invalid text was entered: form should never match :user-invalid.');
+
+ assert_false(fieldset.matches(':invalid'), 'fieldset should not match :invalid after valid text was entered.');
+ assert_true(fieldset.matches(':valid'), 'fieldset should match :valid after valid text was entered.');
+ assert_false(fieldset.matches(':user-valid'), 'after valid text was entered: fieldset should never match :user-valid.');
+ assert_false(fieldset.matches(':user-invalid'), 'after invalid text was entered: fieldset should never match :user-invalid.');
+
+ assert_false(input.matches(':invalid'), 'input should not match :invalid after valid text was entered.');
+ assert_true(input.matches(':valid'), 'input should match :valid after valid text was entered.');
+ assert_true(input.matches(':user-valid'), 'input should match :user-valid after valid text was entered.');
+ assert_false(input.matches(':user-invalid'), 'input should not match :user-invalid after invalid text was entered.');
+}, 'form and fieldset elements should match :valid/:invalid but not :user-valid/:user-invalid.');
+</script>
