<!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>