2009-01-22 01:00:27 +00:00
|
|
|
<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
|
2009-10-12 23:14:08 +00:00
|
|
|
try {
|
|
|
|
|
anim.getStartTime();
|
|
|
|
|
ok(false, "Element has not ended yet.");
|
|
|
|
|
} catch (e) { }
|
2009-01-22 01:00:27 +00:00
|
|
|
|
|
|
|
|
// 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>
|
