LayoutTests/svg/animations/animateTransform-skewX.svg

<?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="skewX" from="0" to="45" begin="0s" dur="1s" fill="freeze"/>
</rect>

<!-- Beware the end result of this animation is: transform="skewX(22.5) skewX(22.5)" not skewX(45), due the post-multiplication -->
<rect y="150" width="100" height="100" fill="green">
    <animateTransform attributeName="transform" type="skewX" from="0" to="22.5" begin="0s" dur="1s" fill="freeze"/>
    <animateTransform attributeName="transform" type="skewX" 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="skewX" 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="skewX" 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="skewX" 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="skewX(22.5) skewX(22.5)" not skewX(45), due the post-multiplication -->
<rect x="150" y="300" width="100" height="100" fill="green" transform="skewX(22.5)">
    <animateTransform attributeName="transform" type="skewX" 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>