gecko/dom/smil/test/test_smilSyncTransform.xhtml

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Test for SMIL sync behaviour for transform types</title>
  <script type="text/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
</head>
<body>
<p id="display"></p>
<div id="content" style="display: none">
<svg id="svg" xmlns="http://www.w3.org/2000/svg" width="120px" height="120px">
  <circle cx="20" cy="20" r="15" fill="blue">
    <animateTransform attributeName="transform" type="rotate"
      from="90" to="180" begin="0s" dur="2s" fill="freeze"
      additive="sum" id="anim1"/>
  </circle>
  <circle cx="20" cy="20" r="15" fill="blue">
    <animateTransform attributeName="transform" type="scale"
      from="1" to="2" begin="2s" dur="2s" id="anim2"/>
  </circle>
</svg>
</div>
<pre id="test">
<script class="testbody" type="text/javascript">
<![CDATA[
/** Test for SMIL sync behavior for transform types **/

/* Global Variables */
var svg = document.getElementById("svg");

SimpleTest.waitForExplicitFinish();

function main() {
  testChangeBaseVal(document.getElementById("anim1"));
  SimpleTest.finish();
}

function testChangeBaseVal(anim) {
  // Check that a change to the base value is updated even after animation is
  // frozen

  var target = anim.targetElement;

  var baseList = target.transform.baseVal;
  var animList = target.transform.animVal;

  // make sure element has ended
  svg.setCurrentTime(anim.getSimpleDuration());

  // check frozen value is applied
  is(baseList.numberOfItems, 0);
  is(animList.numberOfItems, 1);

  // change base val and re-check
  var newTransform = svg.createSVGTransform();
  newTransform.setScale(1,2);
  baseList.appendItem(newTransform);
  is(baseList.numberOfItems, 1);
  is(animList.numberOfItems, 2);
}

window.addEventListener("load", main, false);
]]>
</script>
</pre>
</body>
</html>