| <!DOCTYPE html> |
| <meta charset="utf-8"> |
| <script src=../../resources/testharness.js></script> |
| <script src=../../resources/testharnessreport.js></script> |
| <style> |
| input { |
| background-color: rgb(50, 150, 200); |
| } |
| input:focus-within { |
| background-color: rgb(250, 200, 150); |
| } |
| </style> |
| <input id="input"> |
| <script> |
| test(() => assert_not_equals(window.testRunner, undefined), |
| "Check window.testRunner is available"); |
| |
| const input = document.getElementById("input"); |
| input.focus(); |
| |
| test(() => assert_equals(getComputedStyle(input).backgroundColor, "rgb(250, 200, 150)"), |
| "Check ':focus-within' is applied after focusing the input"); |
| |
| testRunner.setWindowIsKey(false); |
| test(() => assert_equals(getComputedStyle(input).backgroundColor, "rgb(50, 150, 200)"), |
| "Check ':focus-within' is not applied when the window is inactive"); |
| |
| testRunner.setWindowIsKey(true); |
| test(() => assert_equals(getComputedStyle(input).backgroundColor, "rgb(250, 200, 150)"), |
| "Check ':focus-within' is applied when the window is active again"); |
| </script> |
