animate-setcurrenttime.html | Explore in Territory

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<html>
<head>
  <script src="../../resources/js-test.js"></script>
</head>

<body>
  <svg id='outer-svg' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve'>
    <!-- sequential animations -->
    <rect id='plain' x='0' y='0' width='32' height='32' fill='green'>
      <animate id='plain-anim' attributeName='x' from='0' to='128' begin='0s' dur='4s' fill='freeze'/>
    </rect>

    <!-- sequential animations -->
    <rect id='sequential' x='0' y='32' width='32' height='32' fill='green'>
      <animate attributeName='x'  from='0'  to='32' begin='0s' dur='1s' fill='freeze'/>
      <animate attributeName='x' from='64' to='128' begin='3s' dur='1s' fill='freeze'/>
    </rect>

    <!-- accumulating values -->
    <rect id='accumulating' x='0' y='64' width='32' height='32' fill='green'>
      <animate attributeName='x' values='0; 256; 128' additive='sum' accumulate='sum' begin='0s' dur='4s' fill='freeze'/>
    </rect>

    <!-- repeating -->
    <rect id='repeating' x='0' y='96' width='32' height='32' fill='green'>
      <animate attributeName='x' values='0; 256; 128; 0; 128' begin='0s' dur='2s' fill='freeze' repeatCount='2'/>
    </rect>

    <!-- nested -->
    <svg id='nested-svg' x='0' y='128'>
      <rect id='nested' x='0' y='0' width='32' height='32' fill='green'>
        <animate attributeName='x' from='0' to='128' begin='0s' dur='4s' fill='freeze'/>
      </rect>
    </svg>

    <script>
    description("SVG 1.1 dynamic animation tests");
    self.jsTestIsAsync = true;

    var svg = document.getElementById('outer-svg'),
        nestedsvg = document.getElementById('nested-svg');
    var tests, curIdx = 0;

    var plain = document.getElementById('plain');
    var sequential = document.getElementById('sequential');
    var accumulating = document.getElementById('accumulating');
    var repeating = document.getElementById('repeating');
    var nested = document.getElementById('nested');
    var test;

    function runTest() {
      test = tests[curIdx++];

      if (test.throws && test.throws[0])
        shouldThrow("svg.setCurrentTime(test.time[0])");
      else
        svg.setCurrentTime(test.time[0]);

      if (test.throws && test.throws[1])
        shouldThrow("nestedsvg.setCurrentTime(test.time[1])");
      else
        nestedsvg.setCurrentTime(test.time[1]);

      setTimeout(function() {
        for (var attr in test.values) {
          shouldBe(attr + '.animVal.value', String(test.values[attr]));
        }

        if (curIdx == tests.length)
          finishJSTest();
        else
          runTest();
      }, 0);
    }

    function executeTests() {
      nestedsvg.pauseAnimations();
      svg.pauseAnimations();

      tests = [
        // Test invalid values.
        { time: ['tintin', NaN], throws: [true, true], values: { 'plain.x':   0, 'sequential.x':   0, 'accumulating.x':   0, 'repeating.x':   0, 'nested.x':   0 } },

        // Test out-of-range values.
        { time: [-1, -1], values: { 'plain.x':   0, 'sequential.x':   0, 'accumulating.x':   0, 'repeating.x':   0, 'nested.x':   0 } },
        { time: [ 5,  5], values: { 'plain.x': 128, 'sequential.x': 128, 'accumulating.x': 128, 'repeating.x': 128, 'nested.x': 128 } },

        // Test changing time only for all elements.
        { time: [0, 0], values: { 'plain.x':   0, 'sequential.x':   0, 'accumulating.x':   0, 'repeating.x':   0, 'nested.x':   0 } },
        { time: [1, 1], values: { 'plain.x':  32, 'sequential.x':  32, 'accumulating.x': 128, 'repeating.x': 128, 'nested.x':  32 } },
        { time: [2, 2], values: { 'plain.x':  64, 'sequential.x':  32, 'accumulating.x': 256, 'repeating.x':   0, 'nested.x':  64 } },
        { time: [3, 3], values: { 'plain.x':  96, 'sequential.x':  64, 'accumulating.x': 192, 'repeating.x': 128, 'nested.x':  96 } },
        { time: [4, 4], values: { 'plain.x': 128, 'sequential.x': 128, 'accumulating.x': 128, 'repeating.x': 128, 'nested.x': 128 } },

        // Test changing time only for the nested svg element.
        { time: [0, 0], values: { 'plain.x':   0, 'sequential.x':   0, 'accumulating.x':   0, 'repeating.x':   0, 'nested.x':   0 } },
        { time: [0, 1], values: { 'plain.x':   0, 'sequential.x':   0, 'accumulating.x':   0, 'repeating.x':   0, 'nested.x':  32 } },
        { time: [0, 2], values: { 'plain.x':   0, 'sequential.x':   0, 'accumulating.x':   0, 'repeating.x':   0, 'nested.x':  64 } },
        { time: [0, 3], values: { 'plain.x':   0, 'sequential.x':   0, 'accumulating.x':   0, 'repeating.x':   0, 'nested.x':  96 } },
        { time: [0, 4], values: { 'plain.x':   0, 'sequential.x':   0, 'accumulating.x':   0, 'repeating.x':   0, 'nested.x': 128 } },

        // Test changing time only for the outer svg element.
        { time: [0, 0], values: { 'plain.x':   0, 'sequential.x':   0, 'accumulating.x':   0, 'repeating.x':   0, 'nested.x':   0 } },
        { time: [1, 0], values: { 'plain.x':  32, 'sequential.x':  32, 'accumulating.x': 128, 'repeating.x': 128, 'nested.x':   0 } },
        { time: [2, 0], values: { 'plain.x':  64, 'sequential.x':  32, 'accumulating.x': 256, 'repeating.x':   0, 'nested.x':   0 } },
        { time: [3, 0], values: { 'plain.x':  96, 'sequential.x':  64, 'accumulating.x': 192, 'repeating.x': 128, 'nested.x':   0 } },
        { time: [4, 0], values: { 'plain.x': 128, 'sequential.x': 128, 'accumulating.x': 128, 'repeating.x': 128, 'nested.x':   0 } },
      ];

      runTest();
    }

    // Begin test async
    if (window.testRunner) {
      testRunner.dumpAsText()
      testRunner.waitUntilDone()
    }
    executeTests();
    </script>
  </svg>

  <p id="description"></p>
  <div id="console"></div>
</body>
</html>
chromium/third_party/blink/web_tests/svg/animations/animate-setcurrenttime.html
