blob: 2c7b43c8fa91b0c2e25a33e53aff42b42854eb39 [file] [log] [blame]
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" onload="loaded()">
<rect x="50" y="50" width="100" height="100" fill="green">
<animateTransform attributeName="transform" type="rotate" from="0 100 100" to="45 100 100" begin="0s" dur="1s" fill="freeze"/>
</rect>
<!-- Beware the end result of this animation is: transform="rotate(22.5 100 250) rotate(22.5 100 250)" which simplifies to rotate(45 100 250) -->
<rect x="50" y="200" width="100" height="100" fill="green">
<animateTransform attributeName="transform" type="rotate" from="0 100 250" to="22.5 100 250" begin="0s" dur="1s" fill="freeze"/>
<animateTransform attributeName="transform" type="rotate" additive="sum" from="0 100 250" to="22.5 100 250" begin="0s" dur="1s" fill="freeze"/>
</rect>
<rect x="50" y="350" width="100" height="100" fill="green">
<animateTransform attributeName="transform" type="rotate" accumulate="sum" from="0 50 200" to="22.5 50 200" begin="0s" dur="0.5s" repeatCount="2" fill="freeze"/>
</rect>
<rect x="200" y="50" width="100" height="100" fill="green">
<animateTransform attributeName="transform" type="translate" additive="sum" from="250,100" to="250,100" begin="0s" dur="1s" fill="freeze"/>
<animateTransform attributeName="transform" type="rotate" additive="sum" from="0" to="45" begin="0s" dur="1s" fill="freeze"/>
<animateTransform attributeName="transform" type="translate" additive="sum" from="-250,-100" to="-250,-100" begin="0s" dur="1s" fill="freeze"/>
</rect>
<rect x="200" y="200" width="100" height="100" fill="green">
<animateTransform attributeName="transform" type="translate" additive="sum" from="250,250" to="250,250" begin="0s" dur="1s" fill="freeze"/>
<animateTransform attributeName="transform" type="rotate" additive="sum" accumulate="sum" from="0" to="22.5" begin="0s" dur="0.5s" repeatCount="2" fill="freeze"/>
<animateTransform attributeName="transform" type="translate" additive="sum" from="-250,-250" to="-250,-250" begin="0s" dur="1s" fill="freeze"/>
</rect>
<!-- Beware the end result of this animation is: transform="rotate(22.5 250 400) rotate(22.5 250 400)" which simplifies to rotate(45 250 400) -->
<rect x="200" y="350" width="100" height="100" fill="green" transform="rotate(22.5 250 400)">
<animateTransform attributeName="transform" type="rotate" additive="sum" accumulate="sum" from="0 125 200" to="11.25 125 200" 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>