<!DOCTYPE html>
<meta charset="utf-8">
<title>
  Forced colors mode - forced-colors media query.
  Tests that styles defined inside/outside forced-color media query
  are preserved in forced colors mode if forced-color-adjust is none
  and that the ordering of styles is preserved.
</title>
<link rel="help" href="https://www.w3.org/TR/css-color-adjust-1/#forced-colors-properties">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
  p {
    background-color: rgb(0, 128, 0);
    color: rgb(0, 0, 255);
    forced-color-adjust: none;
  }
  @media (forced-colors) {
    p {
      background-color: rgb(0, 0, 255);
      color: rgb(0, 128, 0);
    }
  }
</style>
<body>
  <p id="p">
    This text should be green in forced colors mode.
  </p>
</body>

<script>
  test(function() {
    assert_equals(getComputedStyle(p).backgroundColor, "rgb(0, 0, 255)");
    assert_equals(getComputedStyle(p).color, "rgb(0, 128, 0)");
  }, "Checks that styles defined inside/outside forced-colors are preserved in forced colors mode if forced-color-ajust is none.");
</script>
