<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="reftest-wait"> <style> .background { fill: lime } .workspace { fill: red } .test { fill: lime } .filler { fill: lime } </style> <script xlink:href="../smil-util.js" type="text/javascript"/> <script type="text/javascript"> function doTest() { setTimeAndSnapshot(101, true); } window.addEventListener("MozReftestInvalidate", doTest, false); </script> <!-- Big green background to match lime.svg --> <rect class="background" width="100%" height="100%" /> <!-- Red "workspace" (should be covered up, if tests pass) --> <rect class="workspace" x="100" y="100" width="100" height="100"/> <!-- FIRST ROW --> <!-- Check that 'rotate' gets applied at begin time --> <g> <animateMotion from="150, 100" to="500, 500" rotate="90" begin="101" dur="1"/> <rect class="test" x="0" y="0" width="20" height="50"/> <rect class="test" x="0" y="0" width="50" height="20"/> </g> <rect class="filler" x="100" y="120" width="30" height="30"/> <!-- Check that 'rotate' gets applied at end time --> <g> <animateMotion from="600, 700" to="200, 150" rotate="180" begin="100" dur="1" fill="freeze"/> <rect class="test" x="0" y="0" width="20" height="50"/> <rect class="test" x="0" y="0" width="50" height="20"/> </g> <rect class="filler" x="150" y="100" width="30" height="30"/> <!-- SECOND ROW --> <!-- Check that rotate combines with existing rotate --> <g transform="rotate(90)"> <animateMotion from="150,200" to="600,600" rotate="90" begin="101" dur="1"/> <rect class="test" x="0" y="0" width="20" height="50"/> <rect class="test" x="0" y="0" width="50" height="20"/> </g> <rect class="filler" x="100" y="150" width="30" height="30"/> <!-- Check additivity of <animateMotion> "rotate" adds --> <g> <animateMotion from="100,100" to="100,200" rotate="90" begin="100.5" dur="1"/> <animateMotion by="100,-200" rotate="90" begin="100.5" dur="1"/> <rect class="test" x="0" y="0" width="20" height="50"/> <rect class="test" x="0" y="0" width="50" height="20"/> </g> <rect class="filler" x="150" y="150" width="30" height="30"/> </svg>