test_smilFillMode.xhtml

Enable keyboard shortcuts

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

  <title>Test for SMIL fill modes</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"

     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.remove();

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

]]>

</script>

</pre>

</body>

</html>