| <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN"> |
| <html> |
| <head> |
| <script src="../../resources/js-test-pre.js"></script> |
| </head> |
| |
| <body> |
| <h1>SVG 1.1 dynamic animation tests</h1> |
| |
| <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> |
| 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'); |
| |
| function runTest() { |
| var test = tests[curIdx++]; |
| |
| svg.setCurrentTime(test.time[0]); |
| 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) { |
| if (window.testRunner) |
| testRunner.notifyDone(); |
| } |
| else |
| runTest(); |
| }, 0); |
| } |
| |
| function executeTests() { |
| nestedsvg.pauseAnimations(); |
| svg.pauseAnimations(); |
| |
| tests = [ |
| // Test invalid values. |
| { time: ['tintin', NaN], 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> |
| |
