wpt / css / css-forms / radio-checkmark-animation.html

Status: FAIL | Duration: 44ms | Subtests: 0/1 | Open test on wpt.live | wpt.fyi

TestTest Source

/css/css-forms/radio-checkmark-animation.html

<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Pseudo-Elements Test: ::checkmark & web animations (radio)</title>
<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
<link rel="help" href="https://drafts.csswg.org/css-forms/#checkmark">
<link rel="help" href="https://drafts.csswg.org/web-animations-1/">
<meta name="assert" content="This test checks that ::checkmark on radio inputs can be animated with Web Animations.">
<style>
#radio { appearance: base; }
#radio::checkmark { all: unset; content: "x"; }
</style>

<input type="radio" id="radio" checked>

<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script>
test(function() {
  const cs = getComputedStyle(radio, "::checkmark");
  const anim = radio.animate([
    {color: "rgb(0, 100, 200)"},
    {color: "rgb(200, 0, 100)"},
  ], {
    pseudoElement: "::checkmark",
    duration: 2,
    delay: -1,
  });
  this.add_cleanup(() => anim.cancel());
  assert_equals(cs.color, "rgb(100, 50, 150)", "color");
}, "::checkmark pseudo-element animates");
</script>