<!doctype html>
<title>Animating 'stop-color' from 'currentcolor'</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<svg>
<linearGradient id="lg" style="color: green">
<stop stop-color="red">
<animate attributeName="stop-color" from="currentcolor" to="green" dur="10s" fill="freeze"/>
</stop>
</linearGradient>
<rect width="100" height="100" fill="url(#lg)"/>
</svg>
<script>
async_test(t => {
let svg = document.querySelector("svg");
svg.pauseAnimations();
svg.setCurrentTime(5);
onload = t.step_func(() => {
requestAnimationFrame(t.step_func_done(() => {
let stop = document.querySelector("stop");
assert_equals(getComputedStyle(stop).getPropertyValue("stop-color"),
"rgb(0, 128, 0)");
}));
});
});
</script>