gecko/dom/smil/test/test_smilCrossContainer.xhtml

<?xml version="1.0" encoding="UTF-8" ?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Test for moving animations between time containers</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="svga" xmlns="http://www.w3.org/2000/svg" width="120px" height="120px"
     onload="this.pauseAnimations()">
  <circle cx="-20" cy="20" r="15" fill="blue" id="circlea"/>
</svg>
<svg id="svgb" xmlns="http://www.w3.org/2000/svg" width="120px" height="120px"
     onload="this.pauseAnimations()">
  <circle cx="-20" cy="20" r="15" fill="blue" id="circleb">
    <set attributeName="cy" to="120" begin="4s" dur="1s" id="syncb"/>
  </circle>
</svg>
</div>
<pre id="test">
<script class="testbody" type="text/javascript">
<![CDATA[
/** Test for moving animations between time containers **/

SimpleTest.waitForExplicitFinish();

function main() {
  var svga = getElement("svga");
  ok(svga.animationsPaused(), "should be paused by <svg> load handler");
  is(svga.getCurrentTime(), 0, "should be paused at 0 in <svg> load handler");
  svga.setCurrentTime(1);

  var svgb = getElement("svgb");
  ok(svgb.animationsPaused(), "should be paused by <svg> load handler");
  is(svgb.getCurrentTime(), 0, "should be paused at 0 in <svg> load handler");
  svgb.setCurrentTime(1);

  // Create animation and check initial state
  var anim = createAnim();
  ok(noStart(anim), "Animation has start time before attaching to document");

  // Attach animation to first container
  var circlea = getElement("circlea");
  var circleb = getElement("circleb");
  circlea.appendChild(anim);

  // Check state after attaching
  is(anim.getStartTime(), 2,
    "Unexpected start time after attaching animation to target");
  is(circlea.cx.animVal.value, -20,
    "Unexpected animated value for yet-to-start animation");
  is(circleb.cx.animVal.value, -20,
    "Unexpected animated value for unanimated target");

  // Move animation from first container to second
  circleb.appendChild(anim);

  // Advance first container and check animation has no effect
  svga.setCurrentTime(2);
  is(anim.getStartTime(), 2,
    "Unexpected start time after moving animation");
  is(circlea.cx.animVal.value, -20,
    "Unexpected animated value for non-longer-animated target");
  is(circleb.cx.animVal.value, -20,
    "Unexpected animated value for now yet-to-start animation");

  // Advance second container and check the animation only affects it
  svgb.setCurrentTime(2);
  is(anim.getStartTime(), 2, "Start time changed after time container seek");
  is(circlea.cx.animVal.value, -20,
    "Unanimated target changed after seek on other container");
  is(circleb.cx.animVal.value, 100, "Animated target not animated after seek");

  // Remove animation so that it belongs to no container and check that
  // advancing the second container to the next milestone doesn't cause a crash
  // (when the animation controller goes to run the next milestone sample).
  anim.parentNode.removeChild(anim);
  svgb.setCurrentTime(3);

  // Do likewise with syncbase relationships

  // Create the syncbase relationship
  anim.setAttribute('begin', 'syncb.begin');

  // Attach to second time container (where t=3s)
  circleb.appendChild(anim);
  is(anim.getStartTime(), 4,
    "Unexpected start time for cross-time container syncbase dependency");

  // Move to first time container (where t=1s).
  // Because we're dealing with different time containers and both are paused,
  // future times are effectively unresolved.
  circlea.appendChild(anim);
  ok(noStart(anim), "Unexpected start time for paused time container");

  SimpleTest.finish();
}

function createAnim() {
  const svgns="http://www.w3.org/2000/svg";
  var anim = document.createElementNS(svgns,'set');
  anim.setAttribute('attributeName','cx');
  anim.setAttribute('to','100');
  anim.setAttribute('begin','2s');
  anim.setAttribute('dur','1s');
  return anim;
}

function noStart(elem) {
  var exceptionCaught = false;

  try {
    elem.getStartTime();
  } catch(e) {
    exceptionCaught = true;
    is (e.name, "InvalidStateError",
        "Unexpected exception from getStartTime.");
    is (e.code, DOMException.INVALID_STATE_ERR,
        "Unexpected exception code from getStartTime");
  }

  return exceptionCaught;
}

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