Blitz - WPT: animation-important-002.html

wpt / css / css-animations / animation-important-002.html

/css/css-animations/animation-important-002.html

<!DOCTYPE html>
<title>Test that animated properties on :visited are overridden by !important</title>
<link rel="help" href="https://drafts.csswg.org/css-cascade/#cascade-origin">
<link rel="match" href="animation-important-002-ref.html">
<style>
  @keyframes color_and_bg_animation {
    from { background-color: rgb(0, 100, 0); color: rgb(100, 0, 0); }
    to { background-color: rgb(0, 200, 0); color: rgb(200, 0, 0); }
  }
  a {
    animation-name: color_and_bg_animation;
    animation-duration: 1000s;
    animation-delay: -500s;
    animation-timing-function: steps(2, end);
  }
  a:visited {
    color: white !important;
  }
</style>
<a href="#unvisited">Unvisited</a>
<a href="">Visited</a>

/css/css-animations/animation-important-002-ref.html

<!DOCTYPE html>
<style>
  a {
    text-decoration: underline;
    background-color: rgb(0, 150, 0);
  }
</style>
<a style="color: rgb(150, 0, 0)">Unvisited</a>
<a style="color: white">Visited</a>