<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" onload="loaded()">
<rect width="100" height="100" fill="green">
<animateTransform attributeName="transform" type="skewY" from="0" to="45" begin="0s" dur="1s" fill="freeze"/>
</rect>
<!-- Beware the end result of this animation is: transform="skewY(22.5) skewY(22.5)" not skewY(45), due the post-multiplication -->
<rect y="150" width="100" height="100" fill="green">
<animateTransform attributeName="transform" type="skewY" from="0" to="22.5" begin="0s" dur="1s" fill="freeze"/>
<animateTransform attributeName="transform" type="skewY" additive="sum" from="0" to="22.5" begin="0s" dur="1s" fill="freeze"/>
</rect>
<rect y="300" width="100" height="100" fill="green">
<animateTransform attributeName="transform" type="skewY" accumulate="sum" from="0" to="22.5" begin="0s" dur="0.5s" repeatCount="2" fill="freeze"/>
</rect>
<rect x="150" width="100" height="100" fill="green">
<animateTransform attributeName="transform" type="skewY" additive="sum" from="0" to="45" begin="0s" dur="1s" fill="freeze"/>
</rect>
<rect x="150" y="150" width="100" height="100" fill="green">
<animateTransform attributeName="transform" type="skewY" accumulate="sum" from="0" to="22.5" begin="0s" dur="0.5s" repeatCount="2" fill="freeze"/>
</rect>
<!-- Beware the end result of this animation is: transform="skewY(22.5) skewY(22.5)" not skewY(45), due the post-multiplication -->
<rect x="150" y="300" width="100" height="100" fill="green" transform="skewY(22.5)">
<animateTransform attributeName="transform" type="skewY" additive="sum" accumulate="sum" from="0" to="11.25" begin="0s" dur="0.5s" repeatCount="2" fill="freeze"/>
</rect>
<script>
if (window.testRunner)
testRunner.waitUntilDone();
function loaded() {
document.documentElement.setCurrentTime(2);
if (window.testRunner)
testRunner.notifyDone();
}
</script>
</svg>