wpt / css / css-pseudo / highlight-cascade / highlight-currentcolor-computed-visited.html

Status: PASS | Duration: 55ms | Subtests: 12/12 | Open test on wpt.live | wpt.fyi

TestTest SourceSubtests (12/12)

Data from commit:
a50cb89 wpt: run reference-named files which are themselves tests (#836) (2026-09-03)

SubtestStatusMessage
getComputedStyle() for ::selection at #target1PASS
getComputedStyle() for ::selection at #target2PASS
getComputedStyle() for ::target-text at #target1PASS
getComputedStyle() for ::target-text at #target2PASS
getComputedStyle() for ::search-text at #target1PASS
getComputedStyle() for ::search-text at #target2PASS
getComputedStyle() for ::spelling-error at #target1PASS
getComputedStyle() for ::spelling-error at #target2PASS
getComputedStyle() for ::grammar-error at #target1PASS
getComputedStyle() for ::grammar-error at #target2PASS
getComputedStyle() for ::highlight(foo) at #target1PASS
getComputedStyle() for ::highlight(foo) at #target2PASS

/css/css-pseudo/highlight-cascade/highlight-currentcolor-computed-visited.html

<!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::search-text {
    color: currentcolor;
  }
  a:visited::search-text:current {
    color: red;
  }
  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", "::search-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>