gecko-dev/dom/smil/test/test_smilSync.xhtml

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Test for SMIL sync behaviour </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">
    <animate attributeName="cx" attributeType="XML" from="20" to="100"
      begin="indefinite" dur="4s" restart="always" id="anim1"/>
  </circle>
  <circle cx="20" cy="20" r="15" fill="blue">
    <animate attributeName="cx" attributeType="XML" from="0" to="50"
      begin="0" dur="1s" additive="sum" fill="freeze" id="anim2"/>
  </circle>
  <circle cx="20" cy="20" r="15" fill="blue">
    <animate attributeName="cx" attributeType="XML" from="0" to="50"
      begin="0" dur="10s" additive="sum" fill="freeze" id="anim3"/>
  </circle>
  <circle cx="20" cy="20" r="15" fill="blue">
    <animate attributeName="cx" attributeType="XML" from="0" to="50"
      begin="0" dur="10s" additive="sum" fill="freeze" id="anim4"/>
  </circle>
  <circle cx="20" cy="20" r="15" fill="blue">
    <animate attributeName="cx" attributeType="XML" from="0" to="50"
      begin="0" dur="40s" additive="sum" fill="freeze" id="anim5"/>
  </circle>
  <circle cx="20" cy="20" r="15" fill="blue">
    <animate attributeName="cx" attributeType="XML" from="20" to="100"
      begin="100s" dur="4s" restart="always" id="anim6"/>
  </circle>
</svg>
</div>
<pre id="test">
<script class="testbody" type="text/javascript">
<![CDATA[
/** Test for SMIL sync behavior  **/

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

SimpleTest.waitForExplicitFinish();

function main() {
  testBeginAt(document.getElementById("anim1"));
  testChangeBaseVal(document.getElementById("anim2"));
  testChangeWhilePaused(document.getElementById("anim3"));
  testChangeAnimAttribute(document.getElementById("anim4"));
  testChangeTimingAttribute(document.getElementById("anim5"));
  testSetCurrentTime(document.getElementById("anim6"));
  SimpleTest.finish();
}

function testBeginAt(anim) {
  // This (hugely important) test checks that a call to beginElement updates to
  // the new interval

  // Check some pre-conditions
  is(anim.getAttribute("restart"), "always");
  ok(anim.getSimpleDuration() >= 4);

  // First start the animation
  svg.setCurrentTime(2);
  anim.beginElement();

  // Then restart it--twice
  svg.setCurrentTime(4);
  anim.beginElement();
  anim.beginElementAt(-1);

  // The first restart should win if the state machine has been successfully
  // updated. If we get '3' back instead we haven't updated properly.
  is(anim.getStartTime(), 4);
}

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

  // preconditions -- element should have ended
  try {
    anim.getStartTime();
    ok(false, "Element has not ended yet.");
  } catch (e) { }

  // check frozen value is applied
  var target = anim.targetElement;
  is(target.cx.animVal.value, 70);
  is(target.cx.baseVal.value, 20);

  // change base val and re-check
  target.cx.baseVal.value = 30;
  is(target.cx.animVal.value, 80);
  is(target.cx.baseVal.value, 30);
}

function testChangeWhilePaused(anim) {
  // Check that a change to the base value is updated even when the animation is
  // paused

  svg.pauseAnimations();
  svg.setCurrentTime(anim.getSimpleDuration() / 2);

  // check paused value is applied
  var target = anim.targetElement;
  is(target.cx.animVal.value, 45);
  is(target.cx.baseVal.value, 20);

  // change base val and re-check
  target.cx.baseVal.value = 30;
  is(target.cx.animVal.value, 55);
  is(target.cx.baseVal.value, 30);
}

function testChangeAnimAttribute(anim) {
  // Check that a change to an animation attribute causes an update even when
  // the animation is frozen and paused

  // Make sure animation is paused and frozen
  svg.pauseAnimations();
  svg.setCurrentTime(anim.getStartTime() + anim.getSimpleDuration() + 1);

  // Check frozen value is applied
  var target = anim.targetElement;
  is(target.cx.animVal.value, 70);
  is(target.cx.baseVal.value, 20);

  // Make the animation no longer additive
  anim.removeAttribute("additive");
  is(target.cx.animVal.value, 50);
  is(target.cx.baseVal.value, 20);
}

function testChangeTimingAttribute(anim) {
  // Check that a change to a timing attribute causes an update even when
  // the animation is paused

  svg.pauseAnimations();
  svg.setCurrentTime(anim.getSimpleDuration() / 2);

  // Check part-way value is applied
  var target = anim.targetElement;
  is(target.cx.animVal.value, 45);
  is(target.cx.baseVal.value, 20);

  // Make the animation no longer additive
  anim.setAttribute("dur", String(anim.getSimpleDuration() / 2) + "s");
  is(target.cx.animVal.value, 70);
  is(target.cx.baseVal.value, 20);

  // Remove fill
  anim.removeAttribute("fill");
  is(target.cx.animVal.value, 20);
  is(target.cx.baseVal.value, 20);
}

function testSetCurrentTime(anim) {
  // This test checks that a call to setCurrentTime flushes restarts
  //
  // Actually, this same scenario arises in test_smilRestart.xhtml but we
  // isolate this particular situation here for easier diagnosis if this ever
  // fails.
  //
  // At first we have:
  //                       currentTime   begin="100s"
  //                            v            v
  // Doc time: 0---\/\/\/-------99----------100-------
  //
  svg.setCurrentTime(99);
  is(anim.getStartTime(), 100);

  // Then we restart giving us:
  //
  //                       beginElement begin="100s"
  //                            v            v
  // Doc time: 0---\/\/\/-------99----------100-------
  //
  // So our current interval is
  //
  //                            begin="100s"
  //                                v
  //                            +---------------|
  // Doc time: 0---\/\/\/-------99-100-101-102-103-----
  //
  anim.beginElement();
  is(anim.getStartTime(), svg.getCurrentTime());

  // Then we skip to half-way, i.e.
  //
  //                                currentTime
  //                                    v
  //                            begin="100s"
  //                                v
  //                            +---------------|
  // Doc time: 0---\/\/\/-------99-100-101-102-103-----
  //
  // At this point we should flush our restarts and early end the first interval
  // and start the second interval, giving us
  //
  // So our timegraph looks like:
  //
  //                                currentTime
  //                                    v
  //                                +---------------|
  //                            +---|
  // Doc time: 0---\/\/\/-------99-100-101-102-103-104-
  //
  var newTime = anim.getStartTime() + 0.5 * anim.getSimpleDuration();
  svg.setCurrentTime(newTime);

  // Finally we call beginElement again giving us
  //
  //                                currentTime
  //                                    v
  //                                    +---------------|
  //                                +---|
  //                            +---|
  // Doc time: 0---\/\/\/-------99-100-101-102-103-104-105-
  //
  // If, however, setCurrentTime failed to flush restarts out starting point
  // we do come to update the timegraph would be:
  //
  //                              beginElementAt
  //                                    v
  //                            begin="100s"
  //                                v
  //                            +---------------|
  // Doc time: 0---\/\/\/-------99-100-101-102-103-----
  //
  // And as soon as we encountered the begin="100s" spec we'd do a restart
  // according to the SMIL algorithms and a restart involves a reset which
  // clears the instance times created by DOM calls and so we'd end up with
  // just:
  //
  //                                currentTime
  //                                    v
  //                                +---------------|
  //                            +---|
  // Doc time: 0---\/\/\/-------99-100-101-102-103-104-
  //
  // Which is probably not what the author intended.
  //
  anim.beginElement();
  is(anim.getStartTime(), svg.getCurrentTime());
}

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