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