<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Test for SMIL fill modes</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"> <svg id="svg" xmlns="http://www.w3.org/2000/svg" width="120px" height="120px" onload="this.pauseAnimations()"> <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'); anim.setAttribute('dur','4s'); anim.setAttribute('begin','0s'); anim.setAttribute('values', '10; 20'); return circle.appendChild(anim); } function main() { ok(svg.animationsPaused(), "should be paused by <svg> load handler"); is(svg.getCurrentTime(), 0, "should be paused at 0 in <svg> load handler"); var tests = [ testSetLaterA, testSetLaterB, testRemoveLater ]; for (var i = 0; i < tests.length; i++) { var anim = createAnim(); svg.setCurrentTime(0); tests[i](anim); anim.parentNode.removeChild(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>