Blitz - WPT: animation-name-in-shadow-part-inner-match.html

wpt / css / css-animations / animation-name-in-shadow-part-inner-match.html

/css/css-animations/animation-name-in-shadow-part-inner-match.html

<!DOCTYPE html>
<html>
<head>
<title>Matching animation-name from within a shadow root with multiple @keyframes rules</title>
<link rel="author" title="Antoine Quint" href="mailto:graouts@webkit.org">
<link rel="help" href="https://bugs.webkit.org/show_bug.cgi?id=296048">
<link rel="help" href="https://drafts.csswg.org/css-shadow-1/#shadow-names">
<link rel="match" href="animation-name-in-shadow-part-ref.html">
</head>
<body>

<style>

#shadow {
  width: 100px;
  height: 100px;
}

@keyframes animation {
  from, to { background-color: blue }
}

#shadow::part(target) {
  height: 100px;
  width: 100px;
  background-color: red;
}

</style>

<div id="shadow">
  <template shadowrootmode="open">
    <style>
      @keyframes animation {
        from, to { background-color: green }
      }

      div {
        animation: animation 1s both;
      }
    </style>
    <div part="target"></div>
  </template>
</div>

</body>
</html>

/css/css-animations/animation-name-in-shadow-part-ref.html

<div style="width: 100px; height: 100px; background-color: green;"></div>