<!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>