<!doctype html>
<meta charset="utf-8">
<title>CSS Pseudo-Elements Test: highlight selectors getComputedStyle for currentcolor on visited</title>
<meta name="assert" content="Checks the result of getComputedStyle for each kind of highlight pseudo, when ‘color’ is set to ‘currentColor’ for visited links (and for unvisited links, via implicit defaulting up to the root). The result for both links should equal the originating element ‘color’ as if the link was unvisited.">
<link rel="help" href="https://drafts.csswg.org/css-pseudo/#highlight-selectors">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
  a {
    color: lime;
  }
  a:visited {
    color: cyan;
  }
  a:visited::selection {
    color: currentcolor;
  }
  a:visited::target-text {
    color: currentcolor;
  }
  a:visited::spelling-error {
    color: currentcolor;
  }
  a:visited::grammar-error {
    color: currentcolor;
  }
  a:visited::highlight(foo) {
    color: currentcolor;
  }
</style>
<a id="target1" class="target" href=""></a>
<a id="target2" class="target" href="unvisited"></a>
<script>
  for (const pseudo of ["::selection", "::target-text", "::spelling-error", "::grammar-error", "::highlight(foo)"]) {
    for (const target of [target1, target2]) {
      test(() => {
        let style = getComputedStyle(target, pseudo);
        assert_equals(style.color, "rgb(0, 255, 0)", "Color is lime.");
      }, `getComputedStyle() for ${pseudo} at #${target.id}`);
    }
  }
</script>
