| <!DOCTYPE html> |
| <html> |
| <head> |
| <style> |
| input { |
| color: #FFFFFF; |
| background-color: #FFFFFF; |
| } |
| form:has(input:autofill) { |
| background-color: green; |
| color: white; |
| } |
| </style> |
| </head> |
| <body> |
| This tests that foreground and background colors properly change for autofilled inputs.<br> |
| <form name="form" id="form"> |
| <input type="text" id="input" value="Field value" /> |
| </form> |
| <script src="../../resources/testharness.js"></script> |
| <script src="../../resources/testharnessreport.js"></script> |
| <script> |
| test(() => { |
| testElement(input); |
| }, "Testing input style changing with UA stylesheet"); |
| test(() => { |
| testElement(form); |
| }, "Testing form style changing with :has() selector"); |
| |
| function testElement(element) { |
| let computedStyle = getComputedStyle(element); |
| let originalForeground = computedStyle.color; |
| let originalBackground = computedStyle.backgroundColor; |
| |
| if (window.internals) |
| window.internals.setAutofilled(input, true); |
| |
| // Both the foreground and background colors should change when autofilled. |
| computedStyle = getComputedStyle(element); |
| assert_not_equals(computedStyle.color, originalForeground, "Text color should change when autofilled."); |
| assert_not_equals(computedStyle.backgroundColor, originalBackground, "Background color should change when autofilled.") |
| |
| if (window.internals) |
| window.internals.setAutofilled(input, false); |
| |
| // Colors should be restored. |
| computedStyle = getComputedStyle(element); |
| assert_equals(computedStyle.color, originalForeground, "Text color should be restored"); |
| assert_equals(computedStyle.backgroundColor, originalBackground, "Background color should be restored") |
| } |
| </script> |
| </body> |
| </html> |
