use-element-attr-selector-transition.html

Enable keyboard shortcuts

<!DOCTYPE html>

<html class="reftest-wait">

<title>SVG Test: Attribute change in template starts transition in &lt;use&gt; element tree</title>

<link rel="help" href="https://svgwg.org/svg2-draft/struct.html#UseElement">

<link rel="match" href="use-element-selector-ref.html">

<style>

  #rect { fill: black; transition: fill 1000s steps(2, start); }

  [attr] > #rect { fill: lime; }

</style>

<svg>

  <use id="use_elm" xlink:href="#tmpl" />

  <defs>

    <g id="tmpl">

      <rect id="rect" width="100" height="100"></rect>

    </g>

  </defs>

</svg>

<script>

  requestAnimationFrame(() => {

    requestAnimationFrame(() => {

      tmpl.setAttribute("attr", "val");

      document.documentElement.classList.remove('reftest-wait');

});

});

</script>