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