test_smilSync.xhtml

mozilla-central/dom/smil/test/test_smilSync.xhtml (file symbol)

Enable keyboard shortcuts

Source code

File a bug in Core :: SVG

Revision control

Copy as Markdown

Other Tools

Test Info:

Manifest: dom/smil/test/mochitest.toml

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

  <title>Test for SMIL sync behaviour </title>

  <script 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">

<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);

]]>

</script>

</pre>

</body>

</html>