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