summaryrefslogtreecommitdiffstats
path: root/dom/smil/test/test_smilSync.xhtml
diff options
context:
space:
mode:
Diffstat (limited to 'dom/smil/test/test_smilSync.xhtml')
-rw-r--r--dom/smil/test/test_smilSync.xhtml255
1 files changed, 255 insertions, 0 deletions
diff --git a/dom/smil/test/test_smilSync.xhtml b/dom/smil/test/test_smilSync.xhtml
new file mode 100644
index 0000000000..36b2a91198
--- /dev/null
+++ b/dom/smil/test/test_smilSync.xhtml
@@ -0,0 +1,255 @@
+<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>
generated by cgit v1.2.3 (git 2.39.1) at 2024-12-18 13:54:13 +0000