Blitz - WPT: image-animation-pseudo-animated-image.html

wpt / css / css-image-animation / image-animation-pseudo-animated-image.html

/css/css-image-animation/image-animation-pseudo-animated-image.html

<!DOCTYPE html>
<title>The :animated-image pseudo-class matches only elements with animated images</title>
<link rel="author" title="Seokho Song" href="seokho@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-image-animation-1/">
<meta charset="utf-8" />
<link rel="match" href="image-animation-pseudo-animated-image-ref.html">
<style>
  img {
    display: block;
    margin: 10px;
    width: 20px;
    height: 20px;
  }

  img {
    outline: 5px solid red;
  }

  img:animated-image {
    image-animation: paused;
    outline: 5px solid green;
  }
</style>

<img src="../../images/anim-gr.gif">

<img src="../../images/green.png">

<img src="../../images/anim-gr.png">

<img src="../../images/computer.jpg">

/css/css-image-animation/image-animation-pseudo-animated-image-ref.html

<!DOCTYPE html>
<style>
  img {
    display: block;
    margin: 10px;
    width: 20px;
    height: 20px;
  }
  .green { outline: 5px solid green; }
  .red { outline: 5px solid red; }
</style>

<img class="green" src="../../images/green.png">
<img class="red" src="../../images/green.png">
<img class="green" src="../../images/green.png">
<img class="red" src="../../images/computer.jpg">