user-valid-user-invalid.html (2161B)
1 <!DOCTYPE html> 2 <link rel=author href="mailto:jarhar@chromium.org"> 3 <link rel=help href="https://bugs.chromium.org/p/chromium/issues/detail?id=1477396"> 4 <link rel=help href="https://bugs.chromium.org/p/chromium/issues/detail?id=1477392"> 5 <link rel=help href="https://drafts.csswg.org/selectors/#user-pseudos"> 6 <link rel=help href="https://html.spec.whatwg.org/#selector-user-valid"> 7 <script src="/resources/testharness.js"></script> 8 <script src="/resources/testharnessreport.js"></script> 9 <script src="/resources/testdriver.js"></script> 10 <script src="/resources/testdriver-vendor.js"></script> 11 12 <form> 13 <input type=email> 14 <input type=submit> 15 </form> 16 17 <style> 18 input:user-valid { 19 color: rgb(0, 255, 0); 20 } 21 input:user-invalid { 22 background-color: rgb(255, 0, 0); 23 } 24 </style> 25 26 <script> 27 const green = 'rgb(0, 255, 0)'; 28 const red = 'rgb(255, 0, 0)'; 29 30 promise_test(async () => { 31 const emailInput = document.querySelector('input[type=email]'); 32 assert_not_equals(getComputedStyle(emailInput).color, green, 33 'Input should not initially match :user-valid.'); 34 assert_not_equals(getComputedStyle(emailInput).backgroundColor, red, 35 'Input should not initially match :user-invalid.'); 36 37 emailInput.focus(); 38 await test_driver.send_keys(emailInput, 'user'); 39 assert_not_equals(getComputedStyle(emailInput).color, green, 40 ':user-valid should not match until after blurring.'); 41 assert_not_equals(getComputedStyle(emailInput).backgroundColor, red, 42 ':user-invalid should not match until after blurring.'); 43 44 emailInput.blur(); 45 assert_not_equals(getComputedStyle(emailInput).color, green, 46 'Invalid input should not match :user-valid.'); 47 assert_equals(getComputedStyle(emailInput).backgroundColor, red, 48 'Invalid input should match :user-invalid.'); 49 50 emailInput.focus(); 51 await test_driver.send_keys(emailInput, '@example.com'); 52 assert_equals(getComputedStyle(emailInput).color, green, 53 'Valid input should match :user-valid.'); 54 assert_not_equals(getComputedStyle(emailInput).backgroundColor, red, 55 'Valid input should not match :user-invalid.'); 56 }, ':user-valid and :user-invalid should invalidate after user input.'); 57 </script>