2010-01-12 12:00:49 -08:00
|
|
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
|
|
|
|
<head>
|
|
|
|
|
<title>Test for SMIL fill modes</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">
|
|
|
|
|
<circle cx="-100" cy="20" r="15" fill="blue" id="circle"/>
|
|
|
|
|
</svg>
|
|
|
|
|
</div>
|
|
|
|
|
<pre id="test">
|
|
|
|
|
<script class="testbody" type="text/javascript">
|
|
|
|
|
<![CDATA[
|
|
|
|
|
/** Test for SMIL fill modes **/
|
|
|
|
|
|
|
|
|
|
/* Global Variables */
|
|
|
|
|
const svgns="http://www.w3.org/2000/svg";
|
|
|
|
|
var svg = document.getElementById("svg");
|
|
|
|
|
var circle = document.getElementById('circle');
|
|
|
|
|
|
|
|
|
|
SimpleTest.waitForExplicitFinish();
|
|
|
|
|
|
|
|
|
|
function createAnim() {
|
|
|
|
|
var anim = document.createElementNS(svgns,'animate');
|
|
|
|
|
anim.setAttribute('attributeName','cx');
|
2010-01-12 12:00:50 -08:00
|
|
|
anim.setAttribute('dur','4s');
|
2010-01-12 12:00:49 -08:00
|
|
|
anim.setAttribute('begin','0s');
|
2010-01-12 12:00:50 -08:00
|
|
|
anim.setAttribute('values', '10; 20');
|
2010-01-12 12:00:49 -08:00
|
|
|
return circle.appendChild(anim);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function main() {
|
|
|
|
|
svg.pauseAnimations();
|
|
|
|
|
var tests =
|
|
|
|
|
[ testSetLaterA,
|
|
|
|
|
testSetLaterB,
|
|
|
|
|
testRemoveLater ];
|
|
|
|
|
for (var i = 0; i < tests.length; i++) {
|
|
|
|
|
var anim = createAnim();
|
|
|
|
|
svg.setCurrentTime(0);
|
|
|
|
|
tests[i](anim);
|
|
|
|
|
removeElement(anim);
|
|
|
|
|
}
|
|
|
|
|
SimpleTest.finish();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function checkSample(time, expectedValue) {
|
|
|
|
|
svg.setCurrentTime(time);
|
|
|
|
|
is(circle.cx.animVal.value, expectedValue,
|
|
|
|
|
"Updated fill mode not applied to animation");
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Test that we can update the fill mode after an interval has played and it
|
|
|
|
|
// will be updated correctly.
|
|
|
|
|
function testSetLaterA(anim) {
|
|
|
|
|
checkSample(5, -100);
|
|
|
|
|
anim.setAttribute('fill', 'freeze');
|
|
|
|
|
is(circle.cx.animVal.value, 20,
|
|
|
|
|
"Fill not applied for retrospectively set fill mode");
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function testSetLaterB(anim) {
|
|
|
|
|
anim.setAttribute('fill', 'freeze');
|
|
|
|
|
checkSample(5, 20);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function testRemoveLater(anim) {
|
|
|
|
|
anim.setAttribute('fill', 'freeze');
|
|
|
|
|
checkSample(5, 20);
|
|
|
|
|
anim.setAttribute('fill', 'remove');
|
|
|
|
|
is(circle.cx.animVal.value, -100,
|
|
|
|
|
"Fill not removed for retrospectively set fill mode");
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
window.addEventListener("load", main, false);
|
|
|
|
|
]]>
|
|
|
|
|
</script>
|
|
|
|
|
</pre>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
