gecko/content/smil/test/test_smilRestart.xhtml

106 lines
3.3 KiB
HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test for SMIL Restart Behavior </title>
<script type="text/javascript" src="/MochiKit/packed.js"></script>
<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">
<!-- These 3 circles only differ in their animation's "restart" value -->
<circle cx="20" cy="20" r="15" fill="blue">
<animate attributeName="cx" from="20" to="100" begin="0s" dur="4s"
restart="always" id="always" attributeType="XML"/>
</circle>
<circle cx="20" cy="60" r="15" fill="blue">
<animate attributeName="cx" from="20" to="100" begin="0s" dur="4s"
restart="whenNotActive" id="whenNotActive" attributeType="XML"/>
</circle>
<circle cx="20" cy="100" r="15" fill="blue">
<animate attributeName="cx" from="20" to="100" begin="0s" dur="4s"
restart="never" id="never" attributeType="XML"/>
</circle>
</svg>
</div>
<pre id="test">
<script class="testbody" type="text/javascript">
<![CDATA[
/** Test for SMIL Restart Behavior **/
/* Global Variables */
var dur = 4.0; // this must match the "dur" attribute on animations above.
var svg = document.getElementById("svg");
SimpleTest.waitForExplicitFinish();
// main: just triggers the first link in the chain of function-calls
function main() {
checkInitialState();
}
// Attempt a "beginElement" call on the given element, and
// complain if we don't get the expected return value.
// 'time' is only provided for better diagnostic output.
function tryRestartElem(id, time, expectedRetVal) {
var elem = document.getElementById(id);
var retVal = elem.beginElement();
is(retVal, expectedRetVal,
"Error restarting animation '" + id +
"' at time = " + time + ": " +
"expected return value of " + expectedRetVal +
", but got " + retVal + ".");
}
function checkInitialState() {
svg.setCurrentTime(0.0);
setTimeout('doCheckInitialState(0.0)', 0);
}
function doCheckInitialState(time) {
tryRestartElem('always', time, true);
tryRestartElem('whenNotActive', time, false);
tryRestartElem('never', time, false);
checkHalfwayState();
}
function checkHalfwayState() {
svg.setCurrentTime(0.5 * dur);
setTimeout('doCheckHalfwayState(0.5 * dur)', 0);
}
function doCheckHalfwayState(time) {
tryRestartElem('always', time, true);
tryRestartElem('whenNotActive', time, false);
tryRestartElem('never', time, false);
checkEndingState();
}
function checkEndingState() {
svg.setCurrentTime(dur);
setTimeout('doCheckEndingState(dur)', 0);
}
function doCheckEndingState(time) {
tryRestartElem('always', time, true);
tryRestartElem('whenNotActive', time, true);
tryRestartElem('never', time, false);
checkAfterEndingState();
}
function checkAfterEndingState() {
svg.setCurrentTime(dur * 3);
setTimeout('doCheckAfterEndingState(dur * 3)', 0);
}
function doCheckAfterEndingState(time) {
tryRestartElem('always', time, true);
tryRestartElem('whenNotActive', time, true);
tryRestartElem('never', time, false);
SimpleTest.finish();
}
window.addEventListener("load", main, false);
]]>
</script>
</pre>
</body>
</html>