anim-change-display-block-for-dynamically-appended-elem.html

Enable keyboard shortcuts

<!DOCTYPE html>

<html class="reftest-wait">

  <head>

    <title>Test dynamically-appended animation in a subtree that dynamically became 'display:none'</title>

  </head>

  <body style="background-color: lime;">

    <div id="target" style="display: none;">

      <svg>

        <rect width="100" height="100" fill="brown" id="rect">

        </rect>

      </svg>

    </div>

    <script>

      document.addEventListener('MozReftestInvalidate', function() {

        var svg     = document.getElementsByTagName("svg")[0];

        svg.pauseAnimations();  // pause svg animation.

        var target  = document.getElementById("target");

        var rect    = document.getElementById("rect");

        var animate = document.createElementNS('http://www.w3.org/2000/svg',

                                               'animate');

        animate.setAttribute('attributeName', 'fill');

        animate.setAttribute('from', 'blue');

        animate.setAttribute('to', 'red');

        animate.setAttribute('dur', '100s');

        rect.appendChild(animate);

        requestAnimationFrame(function(time) {

          target.style.display = 'block';

          requestAnimationFrame(function(time) {

            document.documentElement.removeAttribute("class");

});

});

});

    </script>

  </body>

</html>