121 lines
5.4 KiB
HTML
121 lines
5.4 KiB
HTML
<!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>
|
|
|