<!DOCTYPE html>
<meta charset="utf-8">
<title>Forced colors mode - highlighted text.</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>
  body {
    color: red;
  }

  #a {
    background-color: purple;
    color: orange;
    forced-color-adjust: auto;
  }
  #b {
    background-color: purple;
    color: orange;
    forced-color-adjust: none;
  }
  #c {
    background-color: purple;
    color: orange;
    forced-color-adjust: preserve-parent-color;
  }
  #d {
    background-color: purple;
    color: currentColor;
    forced-color-adjust: preserve-parent-color;
  }
  #e {
    background-color: purple;
    color: inherit;
    forced-color-adjust: preserve-parent-color;
  }
  #f {
    background-color: currentColor;
    forced-color-adjust: preserve-parent-color;
  }
  #g::visited {
    color: orange;
  }
  #h, #i {
    forced-color-adjust: preserve-parent-color;
  }
  #h:visited {
    color: inherit;
  }
</style>
<body>
  This is regular body text. It should be CanvasText in forced colors mode.
  <br>
  <mark id="a">
    This text should be black in forced colors mode because forced-color-adjust
    is auto. The background color should be yellow because the default
    highlighted colors should not be overridden in forced colors mode.
  </mark>
  <br>
  <mark id="b">
    This text should be orange in forced colors mode because
    forced-color-adjust is none. The background color should be purple because
    forced-color-adjust is none.
  </mark>
  <br>
  <mark id="c">
    This text should be orange in forced colors mode because
    although forced-color-adjust is preserve-parent-color, the color value is
    neither currentColor nor inherited. The background color should be purple
    because preserve-parent-color behaves like none for all properties except
    color.
  </mark>
  <br>
  <mark id="d">
    This text should be CanvasText in forced colors mode because
    forced-color-adjust is preserve-parent-color and we are inheriting from its
    parent. The background color should be purple because preserve-parent-color
    behaves like none for all properties except color.
  </mark>
  <br>
  <mark id="e">
    This text should be CanvasText in forced colors mode because
    forced-color-adjust is preserve-parent-color and we are inheriting from its
    parent. The background color should be purple because preserve-parent-color
    behaves like none for all properties except color.
  </mark>
  <br>
  <mark id="f">
    This text should be CanvasText in forced colors mode because
    forced-color-adjust is preserve-parent-color and we are inheriting from its
    parent. The background color should also be CanvasText because although
    forced-color-adjust behaves like none, the computed value of currentColor is
    CanvasText.
  </mark>
  <br>
  <a href="" id="g">Should be VisitedText, and not orange.
    <a href="" id="h">Should be VisitedText, and not orange.</a>
    <a href="" id="i">Should be VisitedText, and not orange.</a>
  </a>
</body>

<script>
  test(function(){
    let body = document.querySelector('body');

    assert_equals(getComputedStyle(a).color, "rgb(0, 0, 0)");

    assert_equals(getComputedStyle(b).color, "rgb(255, 165, 0)");

    assert_equals(getComputedStyle(c).color, "rgb(255, 165, 0)");

    assert_equals(getComputedStyle(d).color, getComputedStyle(body).color);

    assert_equals(getComputedStyle(e).color, getComputedStyle(body).color);

    assert_equals(getComputedStyle(f).color, getComputedStyle(body).color);

    assert_equals(getComputedStyle(g).color, "rgb(0, 0, 238)");

    assert_equals(getComputedStyle(h).color, getComputedStyle(g).color);

    assert_equals(getComputedStyle(i).color, getComputedStyle(g).color);

    assert_equals(getComputedStyle(a).backgroundColor, "rgb(255, 255, 0)");

    assert_equals(getComputedStyle(b).backgroundColor, "rgb(128, 0, 128)");

    assert_equals(getComputedStyle(c).backgroundColor, "rgb(128, 0, 128)")

    assert_equals(getComputedStyle(d).backgroundColor, "rgb(128, 0, 128)");

    assert_equals(getComputedStyle(e).backgroundColor, "rgb(128, 0, 128)");

    assert_equals(getComputedStyle(f).backgroundColor, getComputedStyle(f).color);
  }, "Checks that default highlighted text style does not get overridden in forced colors mode.");
</script>
