зеркало из https://github.com/mozilla/gecko-dev.git
Bug 1574131 [wpt PR 18455] - Translate svg/animation tests to WPT (Commit 5), a=testonly
Automatic update from web-platform-tests Translate svg/animation tests to WPT (Commit 5) This is the fifth commit in the series of updating all the old svg animation tests. The usage of testharness has replaced the older SVGAnimationTest.js for all where it's suitable. No functionality should have changed and the tests should cover almost the same. In all of the animations where there is a sampling at T=0, where it was assumed that no animations had started. Which didn't work flawlessly when moved to the new system, it has thus been removed. Bug: 985335 Change-Id: I34fc15e34d01f774c7992ed6c1d79d9e86cd9409 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1753003 Auto-Submit: Edvard Thörnros <edvardt@opera.com> Commit-Queue: Stephen Chenney <schenney@chromium.org> Reviewed-by: Stephen Chenney <schenney@chromium.org> Cr-Commit-Position: refs/heads/master@{#687295} -- wpt-commits: 004dc3d548e448b74c3d5323b27bb1688f00a7ab wpt-pr: 18455
This commit is contained in:
Edvard Thörnros
moz-wptsync-bot
Родитель
6974412dbd
Коммит
3da41b9af1
|
|
@ -0,0 +1,70 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<meta charset="utf-8">
|
||||
<title>Test calcMode spline with to animation. You should see a green 100x100 rect and only PASS messages</title>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/SVGAnimationTestCase-testharness.js"></script>
|
||||
|
||||
<svg>
|
||||
</svg>
|
||||
|
||||
<script>
|
||||
var rootSVGElement = document.querySelector("svg");
|
||||
var epsilon = 1.0;
|
||||
|
||||
// Setup test document
|
||||
var rect = createSVGElement("rect");
|
||||
rect.setAttribute("id", "rect");
|
||||
rect.setAttribute("x", "100");
|
||||
rect.setAttribute("width", "100");
|
||||
rect.setAttribute("height", "100");
|
||||
rect.setAttribute("fill", "green");
|
||||
rect.setAttribute("onclick", "executeTest()");
|
||||
|
||||
var animate = createSVGElement("animate");
|
||||
animate.setAttribute("id", "animation");
|
||||
animate.setAttribute("attributeName", "x");
|
||||
animate.setAttribute("to", "0");
|
||||
animate.setAttribute("begin", "0s");
|
||||
animate.setAttribute("dur", "4s");
|
||||
animate.setAttribute("keyTimes", "0;1");
|
||||
animate.setAttribute("keySplines", "0.25 .5 .25 0.85");
|
||||
animate.setAttribute("calcMode", "spline");
|
||||
rect.appendChild(animate);
|
||||
rootSVGElement.appendChild(rect);
|
||||
|
||||
// Setup animation test
|
||||
function sample1() {
|
||||
// Check initial/end conditions
|
||||
assert_approx_equals(rect.x.animVal.value, 100, epsilon);
|
||||
assert_equals(rect.x.baseVal.value, 100);
|
||||
}
|
||||
|
||||
function sample2() {
|
||||
// Check half-time conditions
|
||||
assert_approx_equals(rect.x.animVal.value, 18.8, epsilon);
|
||||
assert_equals(rect.x.baseVal.value, 100);
|
||||
}
|
||||
|
||||
function sample3() {
|
||||
// Check just before-end conditions
|
||||
assert_approx_equals(rect.x.animVal.value, 0, epsilon);
|
||||
assert_equals(rect.x.baseVal.value, 100);
|
||||
}
|
||||
|
||||
smil_async_test((t) => {
|
||||
const expectedValues = [
|
||||
// [animationId, time, sampleCallback]
|
||||
["animation", 0.0, sample1],
|
||||
["animation", 2.0, sample2],
|
||||
["animation", 3.999, sample3],
|
||||
["animation", 4.001, sample1]
|
||||
];
|
||||
|
||||
runAnimationTest(t, expectedValues);
|
||||
});
|
||||
|
||||
window.clickX = 150;
|
||||
|
||||
</script>
|
||||
|
|
@ -0,0 +1,70 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<meta charset="utf-8">
|
||||
<title>Test calcMode spline with values animation. You should see a green 100x100 rect and only PASS messages</title>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/SVGAnimationTestCase-testharness.js"></script>
|
||||
|
||||
<svg>
|
||||
</svg>
|
||||
|
||||
<script>
|
||||
var rootSVGElement = document.querySelector("svg");
|
||||
var epsilon = 1.0;
|
||||
|
||||
// Setup test document
|
||||
var rect = createSVGElement("rect");
|
||||
rect.setAttribute("id", "rect");
|
||||
rect.setAttribute("x", "100");
|
||||
rect.setAttribute("width", "100");
|
||||
rect.setAttribute("height", "100");
|
||||
rect.setAttribute("fill", "green");
|
||||
rect.setAttribute("onclick", "executeTest()");
|
||||
|
||||
var animate = createSVGElement("animate");
|
||||
animate.setAttribute("id", "animation");
|
||||
animate.setAttribute("attributeName", "x");
|
||||
animate.setAttribute("values", "100;0");
|
||||
animate.setAttribute("begin", "0s");
|
||||
animate.setAttribute("dur", "4s");
|
||||
animate.setAttribute("keyTimes", "0;1");
|
||||
animate.setAttribute("keySplines", "0.25 .5 .25 0.85");
|
||||
animate.setAttribute("calcMode", "spline");
|
||||
rect.appendChild(animate);
|
||||
rootSVGElement.appendChild(rect);
|
||||
|
||||
// Setup animation test
|
||||
function sample1() {
|
||||
// Check initial/end conditions
|
||||
assert_approx_equals(rect.x.animVal.value, 100, epsilon);
|
||||
assert_equals(rect.x.baseVal.value, 100);
|
||||
}
|
||||
|
||||
function sample2() {
|
||||
// Check half-time conditions
|
||||
assert_approx_equals(rect.x.animVal.value, 18.8, epsilon);
|
||||
assert_equals(rect.x.baseVal.value, 100);
|
||||
}
|
||||
|
||||
function sample3() {
|
||||
// Check just before-end conditions
|
||||
assert_approx_equals(rect.x.animVal.value, 0, epsilon);
|
||||
assert_equals(rect.x.baseVal.value, 100);
|
||||
}
|
||||
|
||||
smil_async_test((t) => {
|
||||
const expectedValues = [
|
||||
// [animationId, time, sampleCallback]
|
||||
["animation", 0.0, sample1],
|
||||
["animation", 2.0, sample2],
|
||||
["animation", 3.999, sample3],
|
||||
["animation", 4.001, sample1]
|
||||
];
|
||||
|
||||
runAnimationTest(t, expectedValues);
|
||||
});
|
||||
|
||||
window.clickX = 150;
|
||||
|
||||
</script>
|
||||
|
|
@ -0,0 +1,63 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<meta charset="utf-8">
|
||||
<title>Test calcMode discrete with from-to animation on colors. You should see a green 100x100 rect and only PASS messages</title>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/SVGAnimationTestCase-testharness.js"></script>
|
||||
|
||||
<svg>
|
||||
</svg>
|
||||
|
||||
<script>
|
||||
var rootSVGElement = document.querySelector("svg");
|
||||
var epsilon = 1.0;
|
||||
|
||||
// Setup test document
|
||||
var rect = createSVGElement("rect");
|
||||
rect.setAttribute("id", "rect");
|
||||
rect.setAttribute("width", "100");
|
||||
rect.setAttribute("height", "100");
|
||||
rect.setAttribute("color", "rgb(128,255,255)");
|
||||
rect.setAttribute("fill", "currentColor");
|
||||
rect.setAttribute("onclick", "executeTest()");
|
||||
|
||||
var animate = createSVGElement("animate");
|
||||
animate.setAttribute("id", "animation");
|
||||
animate.setAttribute("attributeName", "color");
|
||||
animate.setAttribute("from", "rgb(255,0,0)");
|
||||
animate.setAttribute("to", "rgb(0,255,255)");
|
||||
animate.setAttribute("begin", "0s");
|
||||
animate.setAttribute("dur", "4s");
|
||||
animate.setAttribute("calcMode", "discrete");
|
||||
rect.appendChild(animate);
|
||||
rootSVGElement.appendChild(rect);
|
||||
|
||||
// Setup animation test
|
||||
function sample1() {
|
||||
expectFillColor(rect, 128, 255, 255);
|
||||
}
|
||||
|
||||
function sample2() {
|
||||
expectFillColor(rect, 255, 0, 0);
|
||||
}
|
||||
|
||||
function sample3() {
|
||||
expectFillColor(rect, 0, 255, 255);
|
||||
}
|
||||
|
||||
smil_async_test((t) => {
|
||||
const expectedValues = [
|
||||
// [animationId, time, sampleCallback]
|
||||
["animation", 0.0, sample1],
|
||||
["animation", 0.001, sample2],
|
||||
["animation", 1.999, sample2],
|
||||
["animation", 2.001, sample3],
|
||||
["animation", 3.999, sample3],
|
||||
["animation", 4.001, sample1]
|
||||
];
|
||||
|
||||
runAnimationTest(t, expectedValues);
|
||||
});
|
||||
|
||||
</script>
|
||||
|
|
@ -0,0 +1,63 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<meta charset="utf-8">
|
||||
<title>Tests animation on 'currentColor'.</title>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/SVGAnimationTestCase-testharness.js"></script>
|
||||
|
||||
<svg>
|
||||
</svg>
|
||||
|
||||
<script>
|
||||
var rootSVGElement = document.querySelector("svg");
|
||||
var epsilon = 1.0;
|
||||
|
||||
// Setup test document
|
||||
var rect = createSVGElement("rect");
|
||||
rect.setAttribute("id", "rect");
|
||||
rect.setAttribute("width", "100px");
|
||||
rect.setAttribute("height", "100px");
|
||||
rect.setAttribute("fill", "currentColor");
|
||||
rect.setAttribute("color", "red");
|
||||
rect.setAttribute("onclick", "executeTest()");
|
||||
|
||||
var animateColor = createSVGElement("animate");
|
||||
animateColor.setAttribute("id", "animateColor");
|
||||
animateColor.setAttribute("attributeName", "color");
|
||||
animateColor.setAttribute("from", "red");
|
||||
animateColor.setAttribute("to", "green");
|
||||
animateColor.setAttribute("dur", "3s");
|
||||
animateColor.setAttribute("begin", "0s");
|
||||
animateColor.setAttribute("fill", "freeze");
|
||||
rect.appendChild(animateColor);
|
||||
rootSVGElement.appendChild(rect);
|
||||
|
||||
// Setup animation test
|
||||
function sample1() {
|
||||
|
||||
expectFillColor(rect, 255, 0, 0);
|
||||
}
|
||||
|
||||
function sample2() {
|
||||
|
||||
expectFillColor(rect, 128, 64, 0);
|
||||
}
|
||||
|
||||
function sample3() {
|
||||
|
||||
expectFillColor(rect, 0, 128, 0);
|
||||
}
|
||||
|
||||
smil_async_test((t) => {
|
||||
const expectedValues = [
|
||||
// [animationId, time, sampleCallback]
|
||||
["animateColor", 0.0, sample1],
|
||||
["animateColor", 1.5, sample2],
|
||||
["animateColor", 3.0, sample3]
|
||||
];
|
||||
|
||||
runAnimationTest(t, expectedValues);
|
||||
});
|
||||
|
||||
</script>
|
||||
|
|
@ -0,0 +1,63 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<meta charset="utf-8">
|
||||
<title>Tests animation on 'currentColor'.</title>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/SVGAnimationTestCase-testharness.js"></script>
|
||||
|
||||
<svg>
|
||||
</svg>
|
||||
|
||||
<script>
|
||||
var rootSVGElement = document.querySelector("svg");
|
||||
var epsilon = 1.0;
|
||||
|
||||
// Setup test document
|
||||
var rect = createSVGElement("rect");
|
||||
rect.setAttribute("id", "rect");
|
||||
rect.setAttribute("width", "100px");
|
||||
rect.setAttribute("height", "100px");
|
||||
rect.setAttribute("fill", "currentColor");
|
||||
rect.setAttribute("color", "#d00000");
|
||||
rect.setAttribute("onclick", "executeTest()");
|
||||
|
||||
var animateColor = createSVGElement("animate");
|
||||
animateColor.setAttribute("id", "animateColor");
|
||||
animateColor.setAttribute("attributeName", "color");
|
||||
animateColor.setAttribute("from", "#d00000");
|
||||
animateColor.setAttribute("by", "#0000d0");
|
||||
animateColor.setAttribute("dur", "3s");
|
||||
animateColor.setAttribute("begin", "0s");
|
||||
animateColor.setAttribute("fill", "freeze");
|
||||
rect.appendChild(animateColor);
|
||||
rootSVGElement.appendChild(rect);
|
||||
|
||||
// Setup animation test
|
||||
function sample1() {
|
||||
|
||||
expectFillColor(rect, 208, 0, 0);
|
||||
}
|
||||
|
||||
function sample2() {
|
||||
|
||||
expectFillColor(rect, 208, 0, 104);
|
||||
}
|
||||
|
||||
function sample3() {
|
||||
|
||||
expectFillColor(rect, 208, 0, 208);
|
||||
}
|
||||
|
||||
smil_async_test((t) => {
|
||||
const expectedValues = [
|
||||
// [animationId, time, sampleCallback]
|
||||
["animateColor", 0.0, sample1],
|
||||
["animateColor", 1.5, sample2],
|
||||
["animateColor", 3.0, sample3]
|
||||
];
|
||||
|
||||
runAnimationTest(t, expectedValues);
|
||||
});
|
||||
|
||||
</script>
|
||||
|
|
@ -0,0 +1,53 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<meta charset="utf-8">
|
||||
<title>Tests that 'transparent' is treated as a valid color.</title>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/SVGAnimationTestCase-testharness.js"></script>
|
||||
|
||||
<svg>
|
||||
</svg>
|
||||
|
||||
<script>
|
||||
var rootSVGElement = document.querySelector("svg");
|
||||
var epsilon = 1.0;
|
||||
|
||||
// Setup test document
|
||||
var rect = createSVGElement("rect");
|
||||
rect.setAttribute("id", "test");
|
||||
rect.setAttribute("width", "100px");
|
||||
rect.setAttribute("height", "100px");
|
||||
rect.setAttribute("fill", "#00FF00");
|
||||
rect.setAttribute("onclick", "executeTest()");
|
||||
|
||||
var animate = createSVGElement("animate");
|
||||
animate.setAttribute("id", "animation");
|
||||
animate.setAttribute("attributeName", "fill");
|
||||
animate.setAttribute("from", "transparent");
|
||||
animate.setAttribute("by", "red");
|
||||
animate.setAttribute("dur", "3s");
|
||||
animate.setAttribute("begin", "0s");
|
||||
rect.appendChild(animate);
|
||||
rootSVGElement.appendChild(rect);
|
||||
|
||||
// Setup animation test
|
||||
function expectTransparent() {
|
||||
expectFillColor(rect, 0, 255, 0);
|
||||
}
|
||||
|
||||
function expectOtherColor() {
|
||||
expectFillColor(rect, 127, 0, 0);
|
||||
}
|
||||
|
||||
smil_async_test((t) => {
|
||||
const expectedValues = [
|
||||
// [animationId, time, sampleCallback]
|
||||
["animation", 0.0, expectTransparent],
|
||||
["animation", 1.5, expectOtherColor]
|
||||
];
|
||||
|
||||
runAnimationTest(t, expectedValues);
|
||||
});
|
||||
|
||||
</script>
|
||||
|
|
@ -0,0 +1,88 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<meta charset="utf-8">
|
||||
<title>Tests that XML and CSS attributeTypes can be switched between.</title>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/SVGAnimationTestCase-testharness.js"></script>
|
||||
|
||||
<svg>
|
||||
</svg>
|
||||
|
||||
<script>
|
||||
var rootSVGElement = document.querySelector("svg");
|
||||
var epsilon = 1.0;
|
||||
|
||||
// Setup test document
|
||||
var polygon = createSVGElement("polygon");
|
||||
polygon.setAttribute("id", "polygon");
|
||||
polygon.setAttribute("points", "100 0 200 0 200 100 100 100");
|
||||
polygon.setAttribute("fill", "green");
|
||||
polygon.setAttribute("onclick", "executeTest()");
|
||||
|
||||
var set = createSVGElement("set");
|
||||
set.setAttribute("id", "set");
|
||||
set.setAttribute("attributeName", "points");
|
||||
set.setAttribute("attributeType", "XML");
|
||||
set.setAttribute("to", "300 0 400 0 400 100 300 100");
|
||||
set.setAttribute("begin", "0s");
|
||||
polygon.appendChild(set);
|
||||
rootSVGElement.appendChild(polygon);
|
||||
|
||||
// Setup animation test
|
||||
function sample1() {
|
||||
assert_approx_equals(polygon.animatedPoints.getItem(0).x, 100, epsilon);
|
||||
assert_equals(polygon.points.getItem(0).x, 100);
|
||||
}
|
||||
|
||||
function sample2() {
|
||||
assert_approx_equals(polygon.animatedPoints.getItem(0).x, 300, epsilon);
|
||||
// change the animationType to CSS which is invalid.
|
||||
set.setAttribute("attributeType", "CSS");
|
||||
}
|
||||
|
||||
function sample3() {
|
||||
// verify that the animation resets.
|
||||
assert_approx_equals(polygon.animatedPoints.getItem(0).x, 100, epsilon);
|
||||
// change the animation to a CSS animatable value.
|
||||
set.setAttribute("attributeName", "opacity");
|
||||
set.setAttribute("to", "0.8");
|
||||
}
|
||||
|
||||
function sample4() {
|
||||
assert_approx_equals(parseFloat(getComputedStyle(polygon).opacity), 0.8, epsilon);
|
||||
// change the animation to a non-CSS animatable value.
|
||||
set.setAttribute("attributeName", "points");
|
||||
set.setAttribute("to", "200 0 300 0 300 100 200 100");
|
||||
}
|
||||
|
||||
function sample5() {
|
||||
// verify that the animation does not run.
|
||||
assert_approx_equals(polygon.animatedPoints.getItem(0).x, 100, epsilon);
|
||||
assert_approx_equals(parseFloat(getComputedStyle(polygon).opacity), 1.0, epsilon);
|
||||
// change the animationType to XML which is valid.
|
||||
set.setAttribute("attributeType", "XML");
|
||||
}
|
||||
|
||||
function sample6() {
|
||||
assert_approx_equals(polygon.animatedPoints.getItem(0).x, 200, epsilon);
|
||||
assert_equals(polygon.points.getItem(0).x, 100);
|
||||
}
|
||||
|
||||
smil_async_test((t) => {
|
||||
const expectedValues = [
|
||||
// [animationId, time, sampleCallback]
|
||||
["set", 0.0, sample1],
|
||||
["set", 0.5, sample2],
|
||||
["set", 1.0, sample3],
|
||||
["set", 1.5, sample4],
|
||||
["set", 2.0, sample5],
|
||||
["set", 2.5, sample6]
|
||||
];
|
||||
|
||||
runAnimationTest(t, expectedValues);
|
||||
});
|
||||
|
||||
window.clickX = 150;
|
||||
|
||||
</script>
|
||||
|
|
@ -0,0 +1,63 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<meta charset="utf-8">
|
||||
<title>Tests animation on 'currentColor'.</title>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/SVGAnimationTestCase-testharness.js"></script>
|
||||
|
||||
<svg>
|
||||
</svg>
|
||||
|
||||
<script>
|
||||
var rootSVGElement = document.querySelector("svg");
|
||||
var epsilon = 1.0;
|
||||
|
||||
// Setup test document
|
||||
var rect = createSVGElement("rect");
|
||||
rect.setAttribute("id", "rect");
|
||||
rect.setAttribute("width", "100px");
|
||||
rect.setAttribute("height", "100px");
|
||||
rect.setAttribute("fill", "red");
|
||||
rect.setAttribute("color", "green");
|
||||
rect.setAttribute("onclick", "executeTest()");
|
||||
|
||||
var animateCurrentColor = createSVGElement("animate");
|
||||
animateCurrentColor.setAttribute("id", "animateCurrentColor");
|
||||
animateCurrentColor.setAttribute("attributeName", "fill");
|
||||
animateCurrentColor.setAttribute("from", "red");
|
||||
animateCurrentColor.setAttribute("to", "currentColor");
|
||||
animateCurrentColor.setAttribute("dur", "3s");
|
||||
animateCurrentColor.setAttribute("begin", "0s");
|
||||
animateCurrentColor.setAttribute("fill", "freeze");
|
||||
rect.appendChild(animateCurrentColor);
|
||||
rootSVGElement.appendChild(rect);
|
||||
|
||||
// Setup animation test
|
||||
function sample1() {
|
||||
// Check initial conditions
|
||||
expectFillColor(rect, 255, 0, 0);
|
||||
}
|
||||
|
||||
function sample2() {
|
||||
// Check half-time conditions
|
||||
expectFillColor(rect, 128, 64, 0);
|
||||
}
|
||||
|
||||
function sample3() {
|
||||
// Check end condition
|
||||
expectFillColor(rect, 0, 128, 0);
|
||||
}
|
||||
|
||||
smil_async_test((t) => {
|
||||
const expectedValues = [
|
||||
// [animationId, time, sampleCallback]
|
||||
["animateCurrentColor", 0.0, sample1],
|
||||
["animateCurrentColor", 1.5, sample2],
|
||||
["animateCurrentColor", 3.0, sample3]
|
||||
];
|
||||
|
||||
runAnimationTest(t, expectedValues);
|
||||
});
|
||||
|
||||
</script>
|
||||
|
|
@ -0,0 +1,71 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<meta charset="utf-8">
|
||||
<title>Test behavior on dynamic-update of attributeName</title>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/SVGAnimationTestCase-testharness.js"></script>
|
||||
|
||||
<svg>
|
||||
</svg>
|
||||
|
||||
<script>
|
||||
var rootSVGElement = document.querySelector("svg");
|
||||
var epsilon = 1.0;
|
||||
|
||||
// Setup test document
|
||||
var rect = createSVGElement("rect");
|
||||
rect.setAttribute("id", "rect");
|
||||
rect.setAttribute("width", "200");
|
||||
rect.setAttribute("height", "200");
|
||||
rect.setAttribute("fill", "red");
|
||||
rect.setAttribute("color", "red");
|
||||
rect.setAttribute("onclick", "executeTest()");
|
||||
|
||||
var animate = createSVGElement("animate");
|
||||
animate.setAttribute("id", "animation");
|
||||
animate.setAttribute("attributeName", "color");
|
||||
animate.setAttribute("from", "green");
|
||||
animate.setAttribute("to", "green");
|
||||
animate.setAttribute("begin", "0s");
|
||||
animate.setAttribute("dur", "3s");
|
||||
animate.setAttribute("fill", "freeze");
|
||||
animate.setAttribute("calcMode", "discrete");
|
||||
rect.appendChild(animate);
|
||||
rootSVGElement.appendChild(rect);
|
||||
|
||||
// Setup animation test
|
||||
function sample1() {
|
||||
expectColor(rect, 255, 0, 0);
|
||||
assert_equals(rect.style.color, "");
|
||||
}
|
||||
|
||||
function sample2() {
|
||||
expectColor(rect, 0, 128, 0);
|
||||
assert_equals(rect.style.color, "");
|
||||
}
|
||||
|
||||
function sample3() {
|
||||
// Set 'attributeName' from 'color' to 'fill'
|
||||
animate.setAttribute("attributeName", "fill");
|
||||
}
|
||||
|
||||
function sample4() {
|
||||
expectFillColor(rect, 0, 128, 0);
|
||||
assert_equals(rect.style.color, "");
|
||||
assert_equals(rect.style.fill, "");
|
||||
}
|
||||
|
||||
smil_async_test((t) => {
|
||||
const expectedValues = [
|
||||
// [animationId, time, sampleCallback]
|
||||
["animation", 0.0, sample1],
|
||||
["animation", 0.001, sample2],
|
||||
["animation", 1.5, sample3],
|
||||
["animation", 3.0, sample4],
|
||||
];
|
||||
|
||||
runAnimationTest(t, expectedValues);
|
||||
});
|
||||
|
||||
</script>
|
||||
|
|
@ -0,0 +1,183 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<meta charset="utf-8">
|
||||
<title>A copy of the corresponding W3C-SVG-1.1 test, which dumps the animation at certain times</title>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/SVGAnimationTestCase-testharness.js"></script>
|
||||
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Tiny//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-tiny.dtd">
|
||||
<!--======================================================================-->
|
||||
<!--= Copyright 2000 World Wide Web Consortium, (Massachusetts =-->
|
||||
<!--= Institute of Technology, Institut National de Recherche en =-->
|
||||
<!--= Informatique et en Automatique, Keio University). All Rights =-->
|
||||
<!--= Reserved. See http://www.w3.org/Consortium/Legal/. =-->
|
||||
<!--======================================================================-->
|
||||
<!-- =====================================================================-->
|
||||
<!-- -->
|
||||
<!-- animation-add-BE-09.svg -->
|
||||
<!-- renamed for 1.1 suite to animate-elem-02-t.svg -->
|
||||
<!-- -->
|
||||
<!-- Test 'additive' and 'accumulate' attributes. -->
|
||||
<!-- -->
|
||||
<!-- Author : Jon Ferraiolo 11-Aug-2000 -->
|
||||
<!-- Revised for 1.1 : Rick Graham Feb/05/2002 -->
|
||||
<!-- -->
|
||||
<!-- History: -->
|
||||
<!-- 11-Aug-2000, JF: Serial#1 created. -->
|
||||
<!-- -->
|
||||
<!-- =====================================================================-->
|
||||
<!--======================================================================-->
|
||||
<!--= Note. After October 2000, revision history is kept as CVS 'commit' =-->
|
||||
<!--= log messages, and therefore is no longer in the preceding preamble.=-->
|
||||
<!--======================================================================-->
|
||||
<svg version="1.1" baseProfile="tiny" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="svg-root"
|
||||
width="100%" height="100%" viewBox="0 0 480 360">
|
||||
<SVGTestCase xmlns="http://www.w3.org/2000/02/svg/testsuite/description/">
|
||||
<!--nav data here-->
|
||||
<OperatorScript version="$Revision: 1.8 $" testname="animate-elem-02-t.svg">
|
||||
<Paragraph>
|
||||
Test 'additive' and 'accumulate' attributes.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
The four pictures show the effect with the four possible combinations of
|
||||
'additive' (either 'replace' or 'sum') and 'accumulate' (either 'none' or 'sum').
|
||||
Because two animations are animating the height, the effects of 'additive' and
|
||||
'accumulate' are sometimes different than when there is only a single animation.
|
||||
</Paragraph>
|
||||
</OperatorScript>
|
||||
</SVGTestCase>
|
||||
<title id="test-title">animate-elem-02-t</title>
|
||||
<desc id="test-desc">Test 'additive' and 'accumulate' attributes.</desc>
|
||||
<!--======================================================================-->
|
||||
<!--Content of Test Case follows... =====================-->
|
||||
<!--======================================================================-->
|
||||
<g id="test-body-content" font-family="Arial" font-size="30">
|
||||
|
||||
<g transform="translate(0, 0)">
|
||||
<rect x="60" y="20" width="50" height="200" fill="#dfdfdf" stroke="#dfdfdf" stroke-width="4"/>
|
||||
<line x1="40" x2="100" y1="220" y2="220" fill="none" stroke="#880000" stroke-width="4"/>
|
||||
<line x1="40" x2="100" y1="120" y2="120" fill="none" stroke="#880000" stroke-width="4"/>
|
||||
<rect x="60" y="20" width="50" height="20" fill="#0f5" stroke="#085" stroke-width="4">
|
||||
<animate id="an5" attributeName="height" calcMode="discrete" additive="replace" accumulate="none"
|
||||
repeatCount="2" from="200" to="20" begin="0s" dur="4s" fill="freeze"/>
|
||||
</rect>
|
||||
<text x="30" y="285" fill="navy">anim.5</text>
|
||||
</g>
|
||||
<g transform="translate(110, 0)">
|
||||
<rect x="60" y="20" width="50" height="200" fill="#dfdfdf" stroke="#dfdfdf" stroke-width="4"/>
|
||||
<line x1="40" x2="100" y1="220" y2="220" fill="none" stroke="#880000" stroke-width="4"/>
|
||||
<line x1="40" x2="100" y1="120" y2="120" fill="none" stroke="#880000" stroke-width="4"/>
|
||||
<rect x="60" y="20" width="50" height="20" fill="#0f5" stroke="#085" stroke-width="4">
|
||||
<animate id="an6" attributeName="height" calcMode="discrete" additive="sum" accumulate="none"
|
||||
repeatCount="2" from="200" to="20" begin="0s" dur="4s" fill="freeze"/>
|
||||
</rect>
|
||||
<text x="30" y="285" fill="navy">anim.6</text>
|
||||
</g>
|
||||
<g transform="translate(220, 0)">
|
||||
<rect x="60" y="20" width="50" height="200" fill="#dfdfdf" stroke="#dfdfdf" stroke-width="4"/>
|
||||
<line x1="40" x2="100" y1="220" y2="220" fill="none" stroke="#880000" stroke-width="4"/>
|
||||
<line x1="40" x2="100" y1="120" y2="120" fill="none" stroke="#880000" stroke-width="4"/>
|
||||
<rect x="60" y="20" width="50" height="20" fill="#0f5" stroke="#085" stroke-width="4">
|
||||
<animate id="an7" attributeName="height" calcMode="discrete" additive="replace" accumulate="sum"
|
||||
repeatCount="2" from="200" to="20" begin="0s" dur="4s" fill="freeze"/>
|
||||
</rect>
|
||||
<text x="30" y="285" fill="navy">anim.7</text>
|
||||
</g>
|
||||
<g transform="translate(330, 0)">
|
||||
<rect x="60" y="20" width="50" height="200" fill="#dfdfdf" stroke="#dfdfdf" stroke-width="4"/>
|
||||
<line x1="40" x2="100" y1="220" y2="220" fill="none" stroke="#880000" stroke-width="4"/>
|
||||
<line x1="40" x2="100" y1="120" y2="120" fill="none" stroke="#880000" stroke-width="4"/>
|
||||
<rect x="60" y="20" width="50" height="20" fill="#0f5" stroke="#085" stroke-width="4">
|
||||
<animate id="an8" attributeName="height" calcMode="discrete" additive="sum" accumulate="sum"
|
||||
repeatCount="2" from="200" to="20" begin="0s" dur="4s" fill="freeze"/>
|
||||
</rect>
|
||||
<text x="30" y="285" fill="navy">anim.8</text>
|
||||
</g>
|
||||
<text id="revision" x="10" y="340" font-size="40" stroke="none" fill="black">$Revision: 1.8 $</text>
|
||||
<rect id="test-frame" x="1" y="1" width="478" height="358" fill="none" stroke="#000000"/>
|
||||
</g>
|
||||
<script>
|
||||
// Pause the animation at t=0.
|
||||
document.querySelector("svg").pauseAnimations();
|
||||
</script>
|
||||
</svg>
|
||||
|
||||
<script>
|
||||
var rootSVGElement = document.querySelector("svg");
|
||||
var epsilon = 1.0;
|
||||
|
||||
// Setup animation test
|
||||
function sampleAfterBegin() {
|
||||
assert_equals(rect1.height.animVal.value, 200);
|
||||
assert_equals(rect1.height.baseVal.value, 20);
|
||||
|
||||
assert_equals(rect2.height.animVal.value, 220);
|
||||
assert_equals(rect2.height.baseVal.value, 20);
|
||||
|
||||
assert_equals(rect3.height.animVal.value, 200);
|
||||
assert_equals(rect3.height.baseVal.value, 20);
|
||||
}
|
||||
|
||||
function sampleAfterMid() {
|
||||
assert_equals(rect1.height.animVal.value, 20);
|
||||
assert_equals(rect1.height.baseVal.value, 20);
|
||||
|
||||
assert_equals(rect2.height.animVal.value, 40);
|
||||
assert_equals(rect2.height.baseVal.value, 20);
|
||||
|
||||
assert_equals(rect3.height.animVal.value, 20);
|
||||
assert_equals(rect3.height.baseVal.value, 20);
|
||||
}
|
||||
|
||||
function sampleAfterBeginOfFirstRepetition() {
|
||||
assert_equals(rect1.height.animVal.value, 200);
|
||||
assert_equals(rect1.height.baseVal.value, 20);
|
||||
|
||||
assert_equals(rect2.height.animVal.value, 220);
|
||||
assert_equals(rect2.height.baseVal.value, 20);
|
||||
|
||||
assert_equals(rect3.height.animVal.value, 220);
|
||||
assert_equals(rect3.height.baseVal.value, 20);
|
||||
}
|
||||
|
||||
function sampleAfterMidOfFirstRepetition() {
|
||||
assert_equals(rect1.height.animVal.value, 20);
|
||||
assert_equals(rect1.height.baseVal.value, 20);
|
||||
|
||||
assert_equals(rect2.height.animVal.value, 40);
|
||||
assert_equals(rect2.height.baseVal.value, 20);
|
||||
|
||||
assert_equals(rect3.height.animVal.value, 40);
|
||||
assert_equals(rect3.height.baseVal.value, 20);
|
||||
}
|
||||
|
||||
smil_async_test((t) => {
|
||||
rects = rootSVGElement.ownerDocument.getElementsByTagName("rect");
|
||||
rect1 = rects[1];
|
||||
rect2 = rects[3];
|
||||
rect3 = rects[5];
|
||||
rect4 = rects[7];
|
||||
|
||||
// All animations in the test file use the same duration, so it's not needed to list all sample points individually for an5/an6/an7/an8.
|
||||
const expectedValues = [
|
||||
// [animationId, time, sampleCallback]
|
||||
["an5", 0.0, sampleAfterBegin],
|
||||
["an5", 1.999, sampleAfterBegin],
|
||||
["an5", 2.0, sampleAfterMid],
|
||||
["an5", 3.999, sampleAfterMid],
|
||||
["an5", 4.0, sampleAfterBeginOfFirstRepetition],
|
||||
["an5", 5.999, sampleAfterBeginOfFirstRepetition],
|
||||
["an5", 6.001, sampleAfterMidOfFirstRepetition],
|
||||
["an5", 7.999, sampleAfterMidOfFirstRepetition],
|
||||
["an5", 8.001, sampleAfterMidOfFirstRepetition],
|
||||
["an5", 60.0, sampleAfterMidOfFirstRepetition]
|
||||
];
|
||||
|
||||
runAnimationTest(t, expectedValues);
|
||||
});
|
||||
|
||||
window.animationStartsImmediately = true;
|
||||
|
||||
</script>
|
||||
|
|
@ -0,0 +1,140 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<meta charset="utf-8">
|
||||
<title>A copy of the corresponding W3C-SVG-1.1 test, which dumps the animation at certain times</title>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/SVGAnimationTestCase-testharness.js"></script>
|
||||
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Tiny//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-tiny.dtd">
|
||||
|
||||
<!--======================================================================-->
|
||||
<!--= Copyright 2000 World Wide Web Consortium, (Massachusetts =-->
|
||||
<!--= Institute of Technology, Institut National de Recherche en =-->
|
||||
<!--= Informatique et en Automatique, Keio University). All Rights =-->
|
||||
<!--= Reserved. See http://www.w3.org/Consortium/Legal/. =-->
|
||||
<!--======================================================================-->
|
||||
<!-- =====================================================================-->
|
||||
<!-- -->
|
||||
<!-- animation-add-BE-08.svg -->
|
||||
<!-- renamed for 1.1 suite to animate-elem-14-t.svg -->
|
||||
<!-- renamed and split for svgt/b to animate-elem-07-t-a.svg -->
|
||||
<!-- -->
|
||||
<!-- Test possible values for 'keyTimes' -->
|
||||
<!-- -->
|
||||
<!-- Author : Jon Ferraiolo 11-Aug-2000 -->
|
||||
<!-- Revised for 1.1 : Mathias Larsson Carlander Feb/12/2002 -->
|
||||
<!-- Revised for svgt/b: Ola Andersson Jun/26/2002 -->
|
||||
<!-- -->
|
||||
<!-- History: -->
|
||||
<!-- 11-Aug-2000, JF: Serial#1 created. -->
|
||||
<!-- -->
|
||||
<!-- =====================================================================-->
|
||||
<!--======================================================================-->
|
||||
<!--= Note. After October 2000, revision history is kept as CVS 'commit' =-->
|
||||
<!--= log messages, and therefore is no longer in the preceding preamble.=-->
|
||||
<!--======================================================================-->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="svg-root" width="100%" height="100%" viewBox="0 0 480 360" version="1.1" baseProfile="tiny">
|
||||
<SVGTestCase xmlns="http://www.w3.org/2000/02/svg/testsuite/description/">
|
||||
<OperatorScript version="$Revision: 1.6 $" testname="animate-elem-14-t.svg">
|
||||
<Paragraph>
|
||||
Test 'calcMode'=discrete
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
One animation has been defined to animate the height of a rectangle. Ruler lines and text are provided
|
||||
to help show what the correct behavior is. The red text shows the values for the 'calcMode' and 'keyTimes' attributes. The
|
||||
black text and ruler lines help show the size and movement of the rectangle over time.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
This test shows an animation with calcMode="discrete" (i.e., a jumping animation).
|
||||
</Paragraph>
|
||||
</OperatorScript>
|
||||
</SVGTestCase>
|
||||
<title id="test-title">animate-elem-14-t</title>
|
||||
<desc id="test-desc">Test possible values for 'keyTimes'</desc>
|
||||
<!--======================================================================-->
|
||||
<!--Content of Test Case follows... =====================-->
|
||||
<!--======================================================================-->
|
||||
<g id="test-body-content">
|
||||
<text font-family="Arial" fill="red" font-size="40" x="3" y="45">calcMode="discrete"</text>
|
||||
<text font-family="Arial" fill="red" font-size="40" x="3" y="100">keyTimes="0;.2;.4;.6"</text>
|
||||
<g xml:space="preserve" font-family="Arial" font-size="13.5" stroke-width="3" >
|
||||
<g transform="translate(150,140)">
|
||||
<text font-size="36" x="-140" y="140">Time (s):</text>
|
||||
<text font-size="36" x="290" y="140">0</text>
|
||||
<line x1="300" y1="0" x2="300" y2="100" fill="none" stroke="#880000" />
|
||||
<text font-size="36" x="245" y="140">2</text>
|
||||
<line x1="255" y1="0" x2="255" y2="100" fill="none" stroke="#880000" />
|
||||
<text font-size="36" x="170" y="140">4</text>
|
||||
<line x1="180" y1="0" x2="180" y2="100" fill="none" stroke="#880000" />
|
||||
<text font-size="36" x="20" y="140">6</text>
|
||||
<line x1="30" y1="0" x2="30" y2="100" fill="none" stroke="#880000" />
|
||||
<rect x="0" y="0" width="300" height="80" fill="#44AAFF" stroke="#880088" stroke-width="4" >
|
||||
<animate id="an1" attributeName="width" calcMode="discrete" values="300;255;180;30" keyTimes="0;.2;.4;.6" begin="0s" dur="10s" fill="freeze"/>
|
||||
</rect>
|
||||
|
||||
</g>
|
||||
|
||||
</g>
|
||||
</g>
|
||||
<text id="revision" x="10" y="340" font-size="40" stroke="none" fill="black">$Revision: 1.6 $</text>
|
||||
<rect id="test-frame" x="1" y="1" width="478" height="358" fill="none" stroke="#000000"/>
|
||||
<script>
|
||||
// Pause the animation at t=0.
|
||||
document.querySelector("svg").pauseAnimations();
|
||||
</script>
|
||||
</svg>
|
||||
|
||||
<script>
|
||||
var rootSVGElement = document.querySelector("svg");
|
||||
var epsilon = 1.0;
|
||||
|
||||
// Setup animation test
|
||||
function sample1() { // From 0s to 2s
|
||||
assert_approx_equals(rect.width.animVal.value, 300, epsilon);
|
||||
assert_equals(rect.width.baseVal.value, 300);
|
||||
}
|
||||
|
||||
function sample2() { // From 2s to 4s
|
||||
assert_approx_equals(rect.width.animVal.value, 255, epsilon);
|
||||
assert_equals(rect.width.baseVal.value, 300);
|
||||
}
|
||||
|
||||
function sample3() { // From 4s to 6s
|
||||
assert_approx_equals(rect.width.animVal.value, 180, epsilon);
|
||||
assert_equals(rect.width.baseVal.value, 300);
|
||||
}
|
||||
|
||||
function sample4() { // From 6s to 10s
|
||||
assert_approx_equals(rect.width.animVal.value, 30, epsilon);
|
||||
assert_equals(rect.width.baseVal.value, 300);
|
||||
}
|
||||
|
||||
smil_async_test((t) => {
|
||||
rect = rootSVGElement.ownerDocument.getElementsByTagName("rect")[0];
|
||||
|
||||
// Sampling according to: keyTimes="0;.2;.4;.6" begin="0s" dur="10s"
|
||||
const expectedValues = [
|
||||
// [animationId, time, sampleCallback]
|
||||
["an1", 0.0, sample1],
|
||||
["an1", 1.999, sample1],
|
||||
["an1", 2.001, sample2],
|
||||
["an1", 3.999, sample2],
|
||||
["an1", 4.001, sample3],
|
||||
["an1", 5.999, sample3],
|
||||
["an1", 6.001, sample4],
|
||||
["an1", 7.001, sample4],
|
||||
["an1", 8.001, sample4],
|
||||
["an1", 9.001, sample4],
|
||||
["an1", 9.999, sample4],
|
||||
["an1", 10.001, sample4],
|
||||
["an1", 60.0, sample4]
|
||||
];
|
||||
|
||||
runAnimationTest(t, expectedValues);
|
||||
});
|
||||
|
||||
window.animationStartsImmediately = true;
|
||||
|
||||
</script>
|
||||
|
|
@ -0,0 +1,136 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<meta charset="utf-8">
|
||||
<title>A copy of the corresponding W3C-SVG-1.1 test, which dumps the animation at certain times</title>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/SVGAnimationTestCase-testharness.js"></script>
|
||||
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Tiny//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-tiny.dtd">
|
||||
|
||||
<!--======================================================================-->
|
||||
<!--= Copyright 2000 World Wide Web Consortium, (Massachusetts =-->
|
||||
<!--= Institute of Technology, Institut National de Recherche en =-->
|
||||
<!--= Informatique et en Automatique, Keio University). All Rights =-->
|
||||
<!--= Reserved. See http://www.w3.org/Consortium/Legal/. =-->
|
||||
<!--======================================================================-->
|
||||
<!-- =====================================================================-->
|
||||
<!-- -->
|
||||
<!-- animation-add-BE-08.svg -->
|
||||
<!-- renamed for 1.1 suite to animate-elem-07-f.svg -->
|
||||
<!-- renamed and split for svgt/b to animate-elem-15-t.svg -->
|
||||
<!-- -->
|
||||
<!-- Test possible values for 'keyTimes' -->
|
||||
<!-- -->
|
||||
<!-- Author : Jon Ferraiolo 11-Aug-2000 -->
|
||||
<!-- Revised for 1.1 : Mathias Larsson Carlander Feb/12/2002 -->
|
||||
<!-- Revised for svgt/b: Ola Andersson Jun/26/2002 -->
|
||||
<!-- -->
|
||||
<!-- History: -->
|
||||
<!-- 11-Aug-2000, JF: Serial#1 created. -->
|
||||
<!-- -->
|
||||
<!-- =====================================================================-->
|
||||
<!--======================================================================-->
|
||||
<!--= Note. After October 2000, revision history is kept as CVS 'commit' =-->
|
||||
<!--= log messages, and therefore is no longer in the preceding preamble.=-->
|
||||
<!--======================================================================-->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="svg-root" width="100%" height="100%" viewBox="0 0 480 360" version="1.1" baseProfile="tiny">
|
||||
<SVGTestCase xmlns="http://www.w3.org/2000/02/svg/testsuite/description/">
|
||||
<OperatorScript version="$Revision: 1.5 $" testname="animate-elem-15-t.svg">
|
||||
<Paragraph>
|
||||
Test 'calcMode'=paced
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
One animation has been defined to animate the height of a rectangle. Ruler lines and text are provided
|
||||
to help show what the correct behavior is. The red text shows the values for the 'calcMode' and 'keyTimes' attributes. The
|
||||
black text and ruler lines help show the size and movement of the rectangle over time.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
This test shows calcMode="paced" for an animation that has constant velocity, thus showing how 'values'
|
||||
and 'keyTimes' are ignored.
|
||||
</Paragraph>
|
||||
</OperatorScript>
|
||||
</SVGTestCase>
|
||||
<title id="test-title">animate-elem-15-t</title>
|
||||
<desc id="test-desc">Test possible values for 'keyTimes'</desc>
|
||||
<!--======================================================================-->
|
||||
<!--Content of Test Case follows... =====================-->
|
||||
<!--======================================================================-->
|
||||
<g id="test-body-content">
|
||||
<text font-family="Arial" fill="red" font-size="40" x="3" y="45">calcMode="paced"</text>
|
||||
<text font-family="Arial" fill="red" font-size="40" x="3" y="100">keyTimes="0;.25;.5;1"</text>
|
||||
<g xml:space="preserve" font-family="Arial" font-size="13.5" stroke-width="3" >
|
||||
<g transform="translate(150,140)">
|
||||
<text font-size="36" x="-140" y="140">Time (s):</text>
|
||||
<text font-size="36" x="290" y="140">0</text>
|
||||
<line x1="300" y1="0" x2="300" y2="100" fill="none" stroke="#880000" />
|
||||
<text font-size="36" x="230" y="140">1.5</text>
|
||||
<line x1="255" y1="0" x2="255" y2="100" fill="none" stroke="#880000" />
|
||||
<text font-size="36" x="170" y="140">4</text>
|
||||
<line x1="180" y1="0" x2="180" y2="100" fill="none" stroke="#880000" />
|
||||
<text font-size="36" x="20" y="140">9</text>
|
||||
<line x1="30" y1="0" x2="30" y2="100" fill="none" stroke="#880000" />
|
||||
<rect x="0" y="0" width="300" height="80" fill="#44AAFF" stroke="#880088" stroke-width="4" >
|
||||
<animate id="an1" attributeName="width" calcMode="paced" values="300;255;180;30" keyTimes="0;.25;.5;1" begin="0s" dur="9s" fill="freeze"/>
|
||||
</rect>
|
||||
|
||||
</g>
|
||||
|
||||
</g>
|
||||
</g>
|
||||
<text id="revision" x="10" y="340" font-size="40" stroke="none" fill="black">$Revision: 1.5 $</text>
|
||||
<rect id="test-frame" x="1" y="1" width="478" height="358" fill="none" stroke="#000000"/>
|
||||
<script>
|
||||
// Pause the animation at t=0.
|
||||
document.querySelector("svg").pauseAnimations();
|
||||
</script>
|
||||
</svg>
|
||||
|
||||
<script>
|
||||
var rootSVGElement = document.querySelector("svg");
|
||||
var epsilon = 1.0;
|
||||
|
||||
// Setup animation test
|
||||
function sample1() { // From 0s to 2.25s
|
||||
assert_approx_equals(rect.width.animVal.value, 300, epsilon);
|
||||
assert_equals(rect.width.baseVal.value, 300);
|
||||
}
|
||||
|
||||
function sample2() { // From 2.25s to 4.5s
|
||||
assert_approx_equals(rect.width.animVal.value, 232.5, epsilon);
|
||||
assert_equals(rect.width.baseVal.value, 300);
|
||||
}
|
||||
|
||||
function sample3() { // From 4.5s to 9s
|
||||
assert_approx_equals(rect.width.animVal.value, 165, epsilon);
|
||||
assert_equals(rect.width.baseVal.value, 300);
|
||||
}
|
||||
|
||||
function sample4() { // From 9s to 9s
|
||||
assert_approx_equals(rect.width.animVal.value, 30, epsilon);
|
||||
assert_equals(rect.width.baseVal.value, 300);
|
||||
}
|
||||
|
||||
smil_async_test((t) => {
|
||||
rect = rootSVGElement.ownerDocument.getElementsByTagName("rect")[0];
|
||||
|
||||
// Sampling according to: keyTimes="0;.25;.5;1" begin="0s" dur="9s"
|
||||
const expectedValues = [
|
||||
// [animationId, time, sampleCallback]
|
||||
["an1", 0.0, sample1],
|
||||
["an1", 2.249, sample2],
|
||||
["an1", 2.251, sample2],
|
||||
["an1", 4.499, sample3],
|
||||
["an1", 4.501, sample3],
|
||||
["an1", 8.999, sample4],
|
||||
["an1", 9.001, sample4],
|
||||
["an1", 60.0, sample4]
|
||||
];
|
||||
|
||||
runAnimationTest(t, expectedValues);
|
||||
});
|
||||
|
||||
window.animationStartsImmediately = true;
|
||||
|
||||
</script>
|
||||
|
|
@ -0,0 +1,136 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<meta charset="utf-8">
|
||||
<title>A copy of the corresponding W3C-SVG-1.1 test, which dumps the animation at certain times</title>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/SVGAnimationTestCase-testharness.js"></script>
|
||||
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Tiny//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-tiny.dtd">
|
||||
|
||||
<!--======================================================================-->
|
||||
<!--= Copyright 2000 World Wide Web Consortium, (Massachusetts =-->
|
||||
<!--= Institute of Technology, Institut National de Recherche en =-->
|
||||
<!--= Informatique et en Automatique, Keio University). All Rights =-->
|
||||
<!--= Reserved. See http://www.w3.org/Consortium/Legal/. =-->
|
||||
<!--======================================================================-->
|
||||
<!-- =====================================================================-->
|
||||
<!-- -->
|
||||
<!-- animation-add-BE-08.svg -->
|
||||
<!-- renamed for 1.1 suite to animate-elem-07-f.svg -->
|
||||
<!-- renamed and split for svgt/b to animate-elem-16-t.svg -->
|
||||
<!-- -->
|
||||
<!-- Test possible values for 'keyTimes' -->
|
||||
<!-- -->
|
||||
<!-- Author : Jon Ferraiolo 11-Aug-2000 -->
|
||||
<!-- Revised for 1.1 : Mathias Larsson Carlander Feb/12/2002 -->
|
||||
<!-- Revised for svgt/b: Ola Andersson Jun/26/2002 -->
|
||||
<!-- -->
|
||||
<!-- History: -->
|
||||
<!-- 11-Aug-2000, JF: Serial#1 created. -->
|
||||
<!-- -->
|
||||
<!-- =====================================================================-->
|
||||
<!--======================================================================-->
|
||||
<!--= Note. After October 2000, revision history is kept as CVS 'commit' =-->
|
||||
<!--= log messages, and therefore is no longer in the preceding preamble.=-->
|
||||
<!--======================================================================-->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="svg-root" width="100%" height="100%" viewBox="0 0 480 360" version="1.1" baseProfile="tiny">
|
||||
<SVGTestCase xmlns="http://www.w3.org/2000/02/svg/testsuite/description/">
|
||||
<OperatorScript version="$Revision: 1.1 $" testname="animate-elem-07-t-c.svg">
|
||||
<Paragraph>
|
||||
Test 'calcMode'=linear
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
One animation has been defined to animate the height of a rectangle. Ruler lines and text are provided
|
||||
to help show what the correct behavior is. The red text shows the values for the 'calcMode' and 'keyTimes' attributes. The
|
||||
black text and ruler lines help show the size and movement of the rectangle over time.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
This test shows an animation with calcMode="linear".
|
||||
</Paragraph>
|
||||
</OperatorScript>
|
||||
</SVGTestCase>
|
||||
<title id="test-title">animate-elem-16-t</title>
|
||||
<desc id="test-desc">Test possible values for 'keyTimes'</desc>
|
||||
<!--======================================================================-->
|
||||
<!--Content of Test Case follows... =====================-->
|
||||
<!--======================================================================-->
|
||||
<g id="test-body-content">
|
||||
<text font-family="Arial" fill="red" font-size="40" x="3" y="45">calcMode="linear"</text>
|
||||
<text font-family="Arial" fill="red" font-size="40" x="3" y="100">keyTimes="0;.25;.5;1"</text>
|
||||
<g xml:space="preserve" font-family="Arial" font-size="13.5" stroke-width="3" >
|
||||
<g transform="translate(150,140)">
|
||||
<text font-size="36" x="-140" y="140">Time (s):</text>
|
||||
<text font-size="36" x="290" y="140">0</text>
|
||||
<line x1="300" y1="0" x2="300" y2="100" fill="none" stroke="#880000" />
|
||||
<text font-size="36" x="245" y="140">2</text>
|
||||
<line x1="255" y1="0" x2="255" y2="100" fill="none" stroke="#880000" />
|
||||
<text font-size="36" x="170" y="140">4</text>
|
||||
<line x1="180" y1="0" x2="180" y2="100" fill="none" stroke="#880000" />
|
||||
<text font-size="36" x="20" y="140">8</text>
|
||||
<line x1="30" y1="0" x2="30" y2="100" fill="none" stroke="#880000" />
|
||||
<rect x="0" y="0" width="300" height="80" fill="#44AAFF" stroke="#880088" stroke-width="4" >
|
||||
<animate id="an1" attributeName="width" calcMode="linear" values="300;255;180;30" keyTimes="0;.25;.5;1" begin="0s" dur="8s" fill="freeze"/>
|
||||
</rect>
|
||||
|
||||
</g>
|
||||
|
||||
</g>
|
||||
|
||||
</g>
|
||||
<text id="revision" x="10" y="340" font-size="40" stroke="none" fill="black">$Revision: 1.1 $</text>
|
||||
<rect id="test-frame" x="1" y="1" width="478" height="358" fill="none" stroke="#000000"/>
|
||||
<script>
|
||||
// Pause the animation at t=0.
|
||||
document.querySelector("svg").pauseAnimations();
|
||||
</script>
|
||||
</svg>
|
||||
|
||||
<script>
|
||||
var rootSVGElement = document.querySelector("svg");
|
||||
var epsilon = 1.0;
|
||||
|
||||
// Setup animation test
|
||||
function sample1() { // From 0s to 2s
|
||||
assert_approx_equals(rect.width.animVal.value, 300, epsilon);
|
||||
assert_equals(rect.width.baseVal.value, 300);
|
||||
}
|
||||
|
||||
function sample2() { // From 2s to 4s
|
||||
assert_approx_equals(rect.width.animVal.value, 255, epsilon);
|
||||
assert_equals(rect.width.baseVal.value, 300);
|
||||
}
|
||||
|
||||
function sample3() { // From 4s to 8s
|
||||
assert_approx_equals(rect.width.animVal.value, 180, epsilon);
|
||||
assert_equals(rect.width.baseVal.value, 300);
|
||||
}
|
||||
|
||||
function sample4() { // From 8s to 8s
|
||||
assert_approx_equals(rect.width.animVal.value, 30, epsilon);
|
||||
assert_equals(rect.width.baseVal.value, 300);
|
||||
}
|
||||
|
||||
smil_async_test((t) => {
|
||||
rect = rootSVGElement.ownerDocument.getElementsByTagName("rect")[0];
|
||||
|
||||
// Sampling according to: keyTimes="0;.25;.5;1" begin="0s" dur="8s"
|
||||
const expectedValues = [
|
||||
// [animationId, time, sampleCallback]
|
||||
["an1", 0.0, sample1],
|
||||
["an1", 1.999, sample2],
|
||||
["an1", 2.001, sample2],
|
||||
["an1", 3.999, sample3],
|
||||
["an1", 4.001, sample3],
|
||||
["an1", 7.999, sample4],
|
||||
["an1", 8.001, sample4],
|
||||
["an1", 60.0, sample4]
|
||||
];
|
||||
|
||||
runAnimationTest(t, expectedValues);
|
||||
});
|
||||
|
||||
window.animationStartsImmediately = true;
|
||||
|
||||
</script>
|
||||
|
|
@ -0,0 +1,136 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<meta charset="utf-8">
|
||||
<title>A copy of the corresponding W3C-SVG-1.1 test, which dumps the animation at certain times</title>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/SVGAnimationTestCase-testharness.js"></script>
|
||||
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Tiny//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-tiny.dtd">
|
||||
|
||||
<!--======================================================================-->
|
||||
<!--= Copyright 2000 World Wide Web Consortium, (Massachusetts =-->
|
||||
<!--= Institute of Technology, Institut National de Recherche en =-->
|
||||
<!--= Informatique et en Automatique, Keio University). All Rights =-->
|
||||
<!--= Reserved. See http://www.w3.org/Consortium/Legal/. =-->
|
||||
<!--======================================================================-->
|
||||
<!-- =====================================================================-->
|
||||
<!-- -->
|
||||
<!-- animation-add-BE-08.svg -->
|
||||
<!-- renamed for 1.1 suite to animate-elem-07-f.svg -->
|
||||
<!-- renamed and split for svgt/b to animate-elem-17-t.svg -->
|
||||
<!-- -->
|
||||
<!-- Test possible values for 'keyTimes' -->
|
||||
<!-- -->
|
||||
<!-- Author : Jon Ferraiolo 11-Aug-2000 -->
|
||||
<!-- Revised for 1.1 : Mathias Larsson Carlander Feb/12/2002 -->
|
||||
<!-- Revised for svgt/b: Ola Andersson Jun/26/2002 -->
|
||||
<!-- -->
|
||||
<!-- History: -->
|
||||
<!-- 11-Aug-2000, JF: Serial#1 created. -->
|
||||
<!-- -->
|
||||
<!-- =====================================================================-->
|
||||
<!--======================================================================-->
|
||||
<!--= Note. After October 2000, revision history is kept as CVS 'commit' =-->
|
||||
<!--= log messages, and therefore is no longer in the preceding preamble.=-->
|
||||
<!--======================================================================-->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="svg-root" width="100%" height="100%" viewBox="0 0 480 360" version="1.1" baseProfile="tiny">
|
||||
<SVGTestCase xmlns="http://www.w3.org/2000/02/svg/testsuite/description/">
|
||||
<OperatorScript version="$Revision: 1.6 $" testname="animate-elem-17-t.svg">
|
||||
<Paragraph>
|
||||
Test 'calcMode'=spline
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
One animation has been defined to animate the height of a rectangle. Ruler lines and text are provided
|
||||
to help show what the correct behavior is. The red text shows the values for the 'calcMode' and 'keyTimes' attributes. The
|
||||
black text and ruler lines help show the size and movement of the rectangle over time.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
This animation shows calcMode="spline". Between time 4 seconds and 8 seconds, the animation displays an ease-in/ease-out approach
|
||||
instead of a constant linear approach which would have been the case if calcMode had been linear instead.
|
||||
</Paragraph>
|
||||
</OperatorScript>
|
||||
</SVGTestCase>
|
||||
<title id="test-title">animate-elem-17-t</title>
|
||||
<desc id="test-desc">Test possible values for 'keyTimes'</desc>
|
||||
<!--======================================================================-->
|
||||
<!--Content of Test Case follows... =====================-->
|
||||
<!--======================================================================-->
|
||||
<g id="test-body-content">
|
||||
<text font-family="Arial" fill="red" font-size="40" x="3" y="45">calcMode="spline"</text>
|
||||
<text font-family="Arial" fill="red" font-size="40" x="3" y="100">keyTimes="0;.25;.5;1"</text>
|
||||
<g xml:space="preserve" font-family="Arial" font-size="13.5" stroke-width="3" >
|
||||
<g transform="translate(150,140)">
|
||||
<text font-size="36" x="-140" y="140">Time (s):</text>
|
||||
<text font-size="36" x="290" y="140">0</text>
|
||||
<line x1="300" y1="0" x2="300" y2="100" fill="none" stroke="#880000" />
|
||||
<text font-size="36" x="245" y="140">2</text>
|
||||
<line x1="255" y1="0" x2="255" y2="100" fill="none" stroke="#880000" />
|
||||
<text font-size="36" x="170" y="140">4</text>
|
||||
<line x1="180" y1="0" x2="180" y2="100" fill="none" stroke="#880000" />
|
||||
<text font-size="36" x="20" y="140">8</text>
|
||||
<line x1="30" y1="0" x2="30" y2="100" fill="none" stroke="#880000" />
|
||||
<rect x="0" y="0" width="300" height="80" fill="#44AAFF" stroke="#880088" stroke-width="4" >
|
||||
<animate id="an1" attributeName="width" calcMode="spline" values="300;255;180;30" keyTimes="0;.25;.5;1" keySplines="0,0,1,1;0,0,1,1;1,0,0,1" begin="0s" dur="8s" fill="freeze"/>
|
||||
</rect>
|
||||
|
||||
</g>
|
||||
|
||||
</g>
|
||||
</g>
|
||||
<text id="revision" x="10" y="340" font-size="40" stroke="none" fill="black">$Revision: 1.6 $</text>
|
||||
<rect id="test-frame" x="1" y="1" width="478" height="358" fill="none" stroke="#000000"/>
|
||||
<script>
|
||||
// Pause the animation at t=0.
|
||||
document.querySelector("svg").pauseAnimations();
|
||||
</script>
|
||||
</svg>
|
||||
|
||||
<script>
|
||||
var rootSVGElement = document.querySelector("svg");
|
||||
var epsilon = 1.0;
|
||||
|
||||
// Setup animation test
|
||||
function sample1() { // From 0s to 2s
|
||||
assert_approx_equals(rect.width.animVal.value, 300, epsilon);
|
||||
assert_equals(rect.width.baseVal.value, 300);
|
||||
}
|
||||
|
||||
function sample2() { // From 2s to 4s
|
||||
assert_approx_equals(rect.width.animVal.value, 255, epsilon);
|
||||
assert_equals(rect.width.baseVal.value, 300);
|
||||
}
|
||||
|
||||
function sample3() { // From 4s to 8s
|
||||
assert_approx_equals(rect.width.animVal.value, 180, epsilon);
|
||||
assert_equals(rect.width.baseVal.value, 300);
|
||||
}
|
||||
|
||||
function sample4() { // From 8s to 8s
|
||||
assert_approx_equals(rect.width.animVal.value, 30, epsilon);
|
||||
assert_equals(rect.width.baseVal.value, 300);
|
||||
}
|
||||
|
||||
smil_async_test((t) => {
|
||||
rect = rootSVGElement.ownerDocument.getElementsByTagName("rect")[0];
|
||||
|
||||
// Sampling according to: keyTimes="0;.25;.5;1" keySplines="0,0,1,1;0,0,1,1;1,0,0,1" begin="0s" dur="8s"
|
||||
const expectedValues = [
|
||||
// [animationId, time, sampleCallback]
|
||||
["an1", 0.0, sample1],
|
||||
["an1", 1.999, sample2],
|
||||
["an1", 2.001, sample2],
|
||||
["an1", 3.999, sample3],
|
||||
["an1", 4.001, sample3],
|
||||
["an1", 7.999, sample4],
|
||||
["an1", 8.001, sample4],
|
||||
["an1", 60.0, sample4]
|
||||
];
|
||||
|
||||
runAnimationTest(t, expectedValues);
|
||||
});
|
||||
|
||||
window.animationStartsImmediately = true;
|
||||
|
||||
</script>
|
||||
|
|
@ -0,0 +1,137 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<meta charset="utf-8">
|
||||
<title>A copy of the corresponding W3C-SVG-1.1 test, which dumps the animation at certain times</title>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/SVGAnimationTestCase-testharness.js"></script>
|
||||
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Tiny//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-tiny.dtd">
|
||||
|
||||
<!--======================================================================-->
|
||||
<!--= Copyright 2000 World Wide Web Consortium, (Massachusetts =-->
|
||||
<!--= Institute of Technology, Institut National de Recherche en =-->
|
||||
<!--= Informatique et en Automatique, Keio University). All Rights =-->
|
||||
<!--= Reserved. See http://www.w3.org/Consortium/Legal/. =-->
|
||||
<!--======================================================================-->
|
||||
<!-- =====================================================================-->
|
||||
<!-- -->
|
||||
<!-- animation-add-BE-08.svg -->
|
||||
<!-- renamed for 1.1 suite to animate-elem-07-f.svg -->
|
||||
<!-- renamed and split for svgt/b to animate-elem-18-t.svg -->
|
||||
<!-- -->
|
||||
<!-- Test possible values for 'keyTimes' -->
|
||||
<!-- -->
|
||||
<!-- Author : Jon Ferraiolo 11-Aug-2000 -->
|
||||
<!-- Revised for 1.1 : Mathias Larsson Carlander Feb/12/2002 -->
|
||||
<!-- Revised for svgt/b: Ola Andersson Jun/26/2002 -->
|
||||
<!-- -->
|
||||
<!-- History: -->
|
||||
<!-- 11-Aug-2000, JF: Serial#1 created. -->
|
||||
<!-- -->
|
||||
<!-- =====================================================================-->
|
||||
<!--======================================================================-->
|
||||
<!--= Note. After October 2000, revision history is kept as CVS 'commit' =-->
|
||||
<!--= log messages, and therefore is no longer in the preceding preamble.=-->
|
||||
<!--======================================================================-->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="svg-root" width="100%" height="100%" viewBox="0 0 480 360" version="1.1" baseProfile="tiny">
|
||||
<SVGTestCase xmlns="http://www.w3.org/2000/02/svg/testsuite/description/">
|
||||
<OperatorScript version="$Revision: 1.1 $" testname="animate-elem-07-t-e.svg">
|
||||
<Paragraph>
|
||||
Test 'calcMode'=discrete
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
One animation has been defined to animate the height of a rectangle. Ruler lines and text are provided
|
||||
to help show what the correct behavior is. The red text shows the values for the 'calcMode' and 'keyTimes' attributes. The
|
||||
black text and ruler lines help show the size and movement of the rectangle over time.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
This test shows an animation with calcMode="discrete" (i.e., a jumping animation).
|
||||
</Paragraph>
|
||||
</OperatorScript>
|
||||
</SVGTestCase>
|
||||
<title id="test-title">animate-elem-18-t</title>
|
||||
<desc id="test-desc">Test possible values for 'keyTimes'</desc>
|
||||
<!--======================================================================-->
|
||||
<!--Content of Test Case follows... =====================-->
|
||||
<!--======================================================================-->
|
||||
<g id="test-body-content">
|
||||
<text font-family="Arial" fill="red" font-size="40" x="3" y="45">calcMode="discrete"</text>
|
||||
<text font-family="Arial" fill="red" font-size="40" x="3" y="100">keyTimes="0;.2;.6;.8"</text>
|
||||
<g xml:space="preserve" font-family="Arial" font-size="13.5" stroke-width="3" >
|
||||
<g transform="translate(150,140)">
|
||||
<text font-size="36" x="-140" y="140">Time (s):</text>
|
||||
<text font-size="36" x="290" y="140">0</text>
|
||||
<line x1="300" y1="0" x2="300" y2="100" fill="none" stroke="#880000" />
|
||||
<text font-size="36" x="245" y="140">2</text>
|
||||
<line x1="255" y1="0" x2="255" y2="100" fill="none" stroke="#880000" />
|
||||
<text font-size="36" x="170" y="140">6</text>
|
||||
<line x1="180" y1="0" x2="180" y2="100" fill="none" stroke="#880000" />
|
||||
<text font-size="36" x="20" y="140">8</text>
|
||||
<line x1="30" y1="0" x2="30" y2="100" fill="none" stroke="#880000" />
|
||||
<rect x="0" y="0" width="300" height="80" fill="#44AAFF" stroke="#880088" stroke-width="4" >
|
||||
<animate id="an1" attributeName="width" calcMode="discrete" values="300;255;180;30" keyTimes="0;.2;.6;.8" begin="0s" dur="10s" fill="freeze"/>
|
||||
</rect>
|
||||
|
||||
</g>
|
||||
|
||||
</g>
|
||||
</g>
|
||||
<text id="revision" x="10" y="340" font-size="40" stroke="none" fill="black">$Revision: 1.1 $</text>
|
||||
<rect id="test-frame" x="1" y="1" width="478" height="358" fill="none" stroke="#000000"/>
|
||||
<script>
|
||||
// Pause the animation at t=0.
|
||||
document.querySelector("svg").pauseAnimations();
|
||||
</script>
|
||||
</svg>
|
||||
|
||||
<script>
|
||||
var rootSVGElement = document.querySelector("svg");
|
||||
var epsilon = 1.0;
|
||||
|
||||
// Setup animation test
|
||||
function sample1() { // From 0s to 2s
|
||||
assert_approx_equals(rect.width.animVal.value, 300, epsilon);
|
||||
assert_equals(rect.width.baseVal.value, 300);
|
||||
}
|
||||
|
||||
function sample2() { // From 2s to 6s
|
||||
assert_approx_equals(rect.width.animVal.value, 255, epsilon);
|
||||
assert_equals(rect.width.baseVal.value, 300);
|
||||
}
|
||||
|
||||
function sample3() { // From 6s to 8s
|
||||
assert_approx_equals(rect.width.animVal.value, 180, epsilon);
|
||||
assert_equals(rect.width.baseVal.value, 300);
|
||||
}
|
||||
|
||||
function sample4() { // From 8s to 10s
|
||||
assert_approx_equals(rect.width.animVal.value, 30, epsilon);
|
||||
assert_equals(rect.width.baseVal.value, 300);
|
||||
}
|
||||
|
||||
smil_async_test((t) => {
|
||||
rect = rootSVGElement.ownerDocument.getElementsByTagName("rect")[0];
|
||||
|
||||
// Sampling according to: keyTimes="0;.2;.6;.8" begin="0s" dur="10s"
|
||||
const expectedValues = [
|
||||
// [animationId, time, sampleCallback]
|
||||
["an1", 0.0, sample1],
|
||||
["an1", 1.999, sample1],
|
||||
["an1", 2.001, sample2],
|
||||
["an1", 5.999, sample2],
|
||||
["an1", 6.001, sample3],
|
||||
["an1", 7.999, sample3],
|
||||
["an1", 8.001, sample4],
|
||||
["an1", 9.999, sample4],
|
||||
["an1", 10.001, sample4],
|
||||
["an1", 60.0, sample4]
|
||||
];
|
||||
|
||||
runAnimationTest(t, expectedValues);
|
||||
});
|
||||
|
||||
window.animationStartsImmediately = true;
|
||||
|
||||
</script>
|
||||
|
|
@ -0,0 +1,136 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<meta charset="utf-8">
|
||||
<title>A copy of the corresponding W3C-SVG-1.1 test, which dumps the animation at certain times</title>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/SVGAnimationTestCase-testharness.js"></script>
|
||||
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Tiny//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-tiny.dtd">
|
||||
|
||||
<!--======================================================================-->
|
||||
<!--= Copyright 2000 World Wide Web Consortium, (Massachusetts =-->
|
||||
<!--= Institute of Technology, Institut National de Recherche en =-->
|
||||
<!--= Informatique et en Automatique, Keio University). All Rights =-->
|
||||
<!--= Reserved. See http://www.w3.org/Consortium/Legal/. =-->
|
||||
<!--======================================================================-->
|
||||
<!-- =====================================================================-->
|
||||
<!-- -->
|
||||
<!-- animation-add-BE-08.svg -->
|
||||
<!-- renamed for 1.1 suite to animate-elem-07-f.svg -->
|
||||
<!-- renamed and split for svgt/b to animate-elem-19-t.svg -->
|
||||
<!-- -->
|
||||
<!-- Test possible values for 'keyTimes' -->
|
||||
<!-- -->
|
||||
<!-- Author : Jon Ferraiolo 11-Aug-2000 -->
|
||||
<!-- Revised for 1.1 : Mathias Larsson Carlander Feb/12/2002 -->
|
||||
<!-- Revised for svgt/b: Ola Andersson Jun/26/2002 -->
|
||||
<!-- -->
|
||||
<!-- History: -->
|
||||
<!-- 11-Aug-2000, JF: Serial#1 created. -->
|
||||
<!-- -->
|
||||
<!-- =====================================================================-->
|
||||
<!--======================================================================-->
|
||||
<!--= Note. After October 2000, revision history is kept as CVS 'commit' =-->
|
||||
<!--= log messages, and therefore is no longer in the preceding preamble.=-->
|
||||
<!--======================================================================-->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="svg-root" width="100%" height="100%" viewBox="0 0 480 360" version="1.1" baseProfile="tiny">
|
||||
<SVGTestCase xmlns="http://www.w3.org/2000/02/svg/testsuite/description/">
|
||||
<OperatorScript version="$Revision: 1.6 $" testname="animate-elem-19-t.svg">
|
||||
<Paragraph>
|
||||
Test 'calcMode'=linear
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
One animation has been defined to animate the width of a rectangle. Ruler lines and text are provided
|
||||
to help show what the correct behavior is. The red text shows the values for the 'calcMode' and 'keyTimes' attributes. The
|
||||
black text and ruler lines help show the size and movement of the rectangle over time.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
This test shows an animation with calcMode="linear".
|
||||
</Paragraph>
|
||||
</OperatorScript>
|
||||
</SVGTestCase>
|
||||
<title id="test-title">animate-elem-19-t</title>
|
||||
<desc id="test-desc">Test possible values for 'keyTimes'</desc>
|
||||
<!--======================================================================-->
|
||||
<!--Content of Test Case follows... =====================-->
|
||||
<!--======================================================================-->
|
||||
<g id="test-body-content">
|
||||
<text font-family="Arial" fill="red" font-size="40" x="3" y="45">calcMode="linear"</text>
|
||||
<text font-family="Arial" fill="red" font-size="40" x="3" y="100">keyTimes="0;.5;.75;1"</text>
|
||||
<g xml:space="preserve" font-family="Arial" font-size="13.5" stroke-width="3" >
|
||||
<g transform="translate(150,140)">
|
||||
<text font-size="36" x="-140" y="140">Time (s):</text>
|
||||
<text font-size="36" x="290" y="140">0</text>
|
||||
<line x1="300" y1="0" x2="300" y2="100" fill="none" stroke="#880000" />
|
||||
<text font-size="36" x="245" y="140">4</text>
|
||||
<line x1="255" y1="0" x2="255" y2="100" fill="none" stroke="#880000" />
|
||||
<text font-size="36" x="170" y="140">6</text>
|
||||
<line x1="180" y1="0" x2="180" y2="100" fill="none" stroke="#880000" />
|
||||
<text font-size="36" x="20" y="140">8</text>
|
||||
<line x1="30" y1="0" x2="30" y2="100" fill="none" stroke="#880000" />
|
||||
<rect x="0" y="0" width="300" height="80" fill="#44AAFF" stroke="#880088" stroke-width="4" >
|
||||
<animate id="an1" attributeName="width" calcMode="linear" values="300;255;180;30" keyTimes="0;.5;.75;1" begin="0s" dur="8s" fill="freeze"/>
|
||||
</rect>
|
||||
|
||||
</g>
|
||||
|
||||
</g>
|
||||
|
||||
</g>
|
||||
<text id="revision" x="10" y="340" font-size="40" stroke="none" fill="black">$Revision: 1.6 $</text>
|
||||
<rect id="test-frame" x="1" y="1" width="478" height="358" fill="none" stroke="#000000"/>
|
||||
<script>
|
||||
// Pause the animation at t=0.
|
||||
document.querySelector("svg").pauseAnimations();
|
||||
</script>
|
||||
</svg>
|
||||
|
||||
<script>
|
||||
var rootSVGElement = document.querySelector("svg");
|
||||
var epsilon = 1.0;
|
||||
|
||||
// Setup animation test
|
||||
function sample1() { // From 0s to 4s
|
||||
assert_approx_equals(rect.width.animVal.value, 300, epsilon);
|
||||
assert_equals(rect.width.baseVal.value, 300);
|
||||
}
|
||||
|
||||
function sample2() { // From 4s to 6s
|
||||
assert_approx_equals(rect.width.animVal.value, 255, epsilon);
|
||||
assert_equals(rect.width.baseVal.value, 300);
|
||||
}
|
||||
|
||||
function sample3() { // From 6s to 8s
|
||||
assert_approx_equals(rect.width.animVal.value, 180, epsilon);
|
||||
assert_equals(rect.width.baseVal.value, 300);
|
||||
}
|
||||
|
||||
function sample4() { // From 8s to 8s
|
||||
assert_approx_equals(rect.width.animVal.value, 30, epsilon);
|
||||
assert_equals(rect.width.baseVal.value, 300);
|
||||
}
|
||||
|
||||
smil_async_test((t) => {
|
||||
rect = rootSVGElement.ownerDocument.getElementsByTagName("rect")[0];
|
||||
|
||||
// Sampling according to: values="300;255;180;30" keyTimes="0;.5;.75;1" begin="0s" dur="8s"
|
||||
const expectedValues = [
|
||||
// [animationId, time, sampleCallback]
|
||||
["an1", 0.0, sample1],
|
||||
["an1", 3.999, sample2],
|
||||
["an1", 4.001, sample2],
|
||||
["an1", 5.999, sample3],
|
||||
["an1", 6.001, sample3],
|
||||
["an1", 7.999, sample4],
|
||||
["an1", 8.001, sample4],
|
||||
["an1", 60.0, sample4]
|
||||
];
|
||||
|
||||
runAnimationTest(t, expectedValues);
|
||||
});
|
||||
|
||||
window.animationStartsImmediately = true;
|
||||
|
||||
</script>
|
||||
|
|
@ -0,0 +1,57 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<meta charset="utf-8">
|
||||
<title>Tests end conditions are respected properly near the limits of float numeric precision</title>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/SVGAnimationTestCase-testharness.js"></script>
|
||||
|
||||
<svg>
|
||||
</svg>
|
||||
|
||||
<script>
|
||||
var rootSVGElement = document.querySelector("svg");
|
||||
var epsilon = 1.0;
|
||||
|
||||
// Setup test document
|
||||
var rect = createSVGElement("rect");
|
||||
rect.setAttribute("id", "rect");
|
||||
rect.setAttribute("x", "100");
|
||||
rect.setAttribute("width", "100");
|
||||
rect.setAttribute("height", "100");
|
||||
rect.setAttribute("fill", "green");
|
||||
|
||||
var animate = createSVGElement("animate");
|
||||
animate.setAttribute("id", "animation");
|
||||
animate.setAttribute("attributeName", "x");
|
||||
animate.setAttribute("values", "0;300");
|
||||
animate.setAttribute("begin", "0.333333333333333s");
|
||||
animate.setAttribute("dur", "0.4256483205159505s");
|
||||
animate.setAttribute("fill", "freeze");
|
||||
rect.appendChild(animate);
|
||||
rootSVGElement.appendChild(rect);
|
||||
|
||||
// Setup animation test
|
||||
function sample1() {
|
||||
assert_approx_equals(rect.x.animVal.value, 100, epsilon);
|
||||
assert_equals(rect.x.baseVal.value, 100);
|
||||
}
|
||||
|
||||
function sample2() {
|
||||
assert_approx_equals(rect.x.animVal.value, 300, epsilon);
|
||||
assert_equals(rect.x.baseVal.value, 100);
|
||||
}
|
||||
|
||||
smil_async_test((t) => {
|
||||
const expectedValues = [
|
||||
// [animationId, time, sampleCallback]
|
||||
["animation", 0.0, sample1],
|
||||
["animation", 1.0, sample2]
|
||||
];
|
||||
|
||||
runAnimationTest(t, expectedValues);
|
||||
});
|
||||
|
||||
var animationStartsImmediately = true;
|
||||
|
||||
</script>
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<meta charset="utf-8">
|
||||
<title>Test for animation freeze when repeatDur is not a multiple of dur</title>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/SVGAnimationTestCase-testharness.js"></script>
|
||||
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Tiny//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-tiny.dtd">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<rect x='0' y='0' width='50' height='50' fill='green'>
|
||||
<animate id="anim" attributeName='x' from='0' to='100' dur='4s' begin='0s' repeatDur="6s" accumulate="sum" fill='freeze'/>
|
||||
</rect>
|
||||
</svg>
|
||||
|
||||
<script>
|
||||
var rootSVGElement = document.querySelector("svg");
|
||||
var epsilon = 1.0;
|
||||
|
||||
// Setup animation test
|
||||
function sample1() {
|
||||
assert_approx_equals(rect1.x.animVal.value, 0, epsilon);
|
||||
assert_equals(rect1.x.baseVal.value, 0);
|
||||
}
|
||||
|
||||
function sample2() {
|
||||
assert_approx_equals(rect1.x.animVal.value, 150, epsilon);
|
||||
assert_equals(rect1.x.baseVal.value, 0);
|
||||
}
|
||||
|
||||
smil_async_test((t) => {
|
||||
var rects = rootSVGElement.ownerDocument.getElementsByTagName("rect");
|
||||
rect1 = rects[0];
|
||||
|
||||
const expectedValues = [
|
||||
// [animationId, time, sampleCallback]
|
||||
["anim", 0.0, sample1],
|
||||
["anim", 6.0, sample2]
|
||||
];
|
||||
|
||||
runAnimationTest(t, expectedValues);
|
||||
});
|
||||
|
||||
window.animationStartsImmediately = true;
|
||||
|
||||
</script>
|
||||
|
|
@ -0,0 +1,60 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<meta charset="utf-8">
|
||||
<title>Tests discrete from-to-keyTimes animations</title>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/SVGAnimationTestCase-testharness.js"></script>
|
||||
|
||||
<svg>
|
||||
</svg>
|
||||
|
||||
<script>
|
||||
var rootSVGElement = document.querySelector("svg");
|
||||
var epsilon = 1.0;
|
||||
|
||||
// Setup test document
|
||||
var rect = createSVGElement("rect");
|
||||
rect.setAttribute("id", "rect");
|
||||
rect.setAttribute("x", "100");
|
||||
rect.setAttribute("width", "100");
|
||||
rect.setAttribute("height", "100");
|
||||
rect.setAttribute("fill", "green");
|
||||
rect.setAttribute("onclick", "executeTest()");
|
||||
|
||||
var animate = createSVGElement("animate");
|
||||
animate.setAttribute("id", "animation");
|
||||
animate.setAttribute("attributeName", "x");
|
||||
animate.setAttribute("to", "200");
|
||||
animate.setAttribute("dur", "4s");
|
||||
animate.setAttribute("keyTimes", "0;0.25");
|
||||
animate.setAttribute("calcMode", "discrete");
|
||||
animate.setAttribute("fill", "freeze");
|
||||
rect.appendChild(animate);
|
||||
rootSVGElement.appendChild(rect);
|
||||
|
||||
// Setup animation test
|
||||
function sample1() {
|
||||
assert_equals(rect.x.animVal.value, 100);
|
||||
assert_equals(rect.x.baseVal.value, 100);
|
||||
}
|
||||
|
||||
function sample2() {
|
||||
assert_equals(rect.x.animVal.value, 200);
|
||||
assert_equals(rect.x.baseVal.value, 100);
|
||||
}
|
||||
|
||||
smil_async_test((t) => {
|
||||
const expectedValues = [
|
||||
// [animationId, time, sampleCallback]
|
||||
["animation", 0.5, sample1],
|
||||
["animation", 1.5, sample2],
|
||||
["animation", 2.5, sample2]
|
||||
];
|
||||
|
||||
runAnimationTest(t, expectedValues);
|
||||
});
|
||||
|
||||
window.clickX = 150;
|
||||
|
||||
</script>
|
||||
|
|
@ -0,0 +1,103 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<meta charset="utf-8">
|
||||
<title>Tests if gradientTransform of a gradient is animateable.</title>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/SVGAnimationTestCase-testharness.js"></script>
|
||||
|
||||
<svg>
|
||||
</svg>
|
||||
|
||||
<script>
|
||||
var rootSVGElement = document.querySelector("svg");
|
||||
var epsilon = 1.0;
|
||||
|
||||
// Setup test document
|
||||
var gradient = createSVGElement("linearGradient");
|
||||
gradient.setAttribute("id", "gradient");
|
||||
gradient.setAttribute("gradientUnits", "userSpaceOnUse");
|
||||
gradient.setAttribute("x1", "0");
|
||||
gradient.setAttribute("x2", "200");
|
||||
gradient.setAttribute("gradientTransform", "translate(0)");
|
||||
|
||||
var stop1 = createSVGElement("stop");
|
||||
stop1.setAttribute("offset", "0");
|
||||
stop1.setAttribute("stop-color", "green");
|
||||
|
||||
var stop2 = createSVGElement("stop");
|
||||
stop2.setAttribute("offset", "1");
|
||||
stop2.setAttribute("stop-color", "red");
|
||||
|
||||
var animate = createSVGElement("animateTransform");
|
||||
animate.setAttribute("id", "animation");
|
||||
animate.setAttribute("attributeName", "gradientTransform");
|
||||
animate.setAttribute("type", "translate");
|
||||
animate.setAttribute("from", "0");
|
||||
animate.setAttribute("to", "200");
|
||||
animate.setAttribute("begin", "0s");
|
||||
animate.setAttribute("dur", "4s");
|
||||
animate.setAttribute("fill", "freeze");
|
||||
|
||||
var rect = createSVGElement("rect");
|
||||
rect.setAttribute("id", "rect");
|
||||
rect.setAttribute("fill", "url(#gradient)");
|
||||
rect.setAttribute("width", "200");
|
||||
rect.setAttribute("height", "200");
|
||||
rect.setAttribute("onclick", "executeTest()");
|
||||
|
||||
gradient.appendChild(stop1);
|
||||
gradient.appendChild(stop2);
|
||||
gradient.appendChild(animate);
|
||||
|
||||
rootSVGElement.appendChild(gradient);
|
||||
rootSVGElement.appendChild(rect);
|
||||
|
||||
// Setup animation test
|
||||
function sample1() {
|
||||
// Check initial conditions
|
||||
shouldThrow("gradient.gradientTransform.animVal.consolidate()");
|
||||
assert_equals(gradient.gradientTransform.animVal.numberOfItems, 1);
|
||||
assert_approx_equals(gradient.gradientTransform.animVal.getItem(0).matrix.e, 0, epsilon);
|
||||
assert_equals(gradient.gradientTransform.animVal.getItem(0).type, SVGTransform.SVG_TRANSFORM_TRANSLATE);
|
||||
|
||||
assert_equals(gradient.gradientTransform.baseVal.numberOfItems, 1);
|
||||
assert_equals(gradient.gradientTransform.baseVal.getItem(0).type, SVGTransform.SVG_TRANSFORM_TRANSLATE);
|
||||
assert_equals(gradient.gradientTransform.baseVal.getItem(0).matrix.e, 0);
|
||||
}
|
||||
|
||||
function sample2() {
|
||||
// Check half-time conditions
|
||||
assert_equals(gradient.gradientTransform.animVal.numberOfItems, 1);
|
||||
assert_equals(gradient.gradientTransform.animVal.getItem(0).type, SVGTransform.SVG_TRANSFORM_TRANSLATE);
|
||||
assert_approx_equals(gradient.gradientTransform.animVal.getItem(0).matrix.e, 100, epsilon);
|
||||
|
||||
assert_equals(gradient.gradientTransform.baseVal.numberOfItems, 1);
|
||||
assert_equals(gradient.gradientTransform.baseVal.getItem(0).type, SVGTransform.SVG_TRANSFORM_TRANSLATE);
|
||||
assert_equals(gradient.gradientTransform.baseVal.getItem(0).matrix.e, 0);
|
||||
}
|
||||
|
||||
function sample3() {
|
||||
// Check end conditions
|
||||
assert_equals(gradient.gradientTransform.animVal.numberOfItems, 1);
|
||||
assert_equals(gradient.gradientTransform.animVal.getItem(0).type, SVGTransform.SVG_TRANSFORM_TRANSLATE);
|
||||
assert_approx_equals(gradient.gradientTransform.animVal.getItem(0).matrix.e, 200, epsilon);
|
||||
|
||||
assert_equals(gradient.gradientTransform.baseVal.numberOfItems, 1);
|
||||
assert_equals(gradient.gradientTransform.baseVal.getItem(0).type, SVGTransform.SVG_TRANSFORM_TRANSLATE);
|
||||
assert_equals(gradient.gradientTransform.baseVal.getItem(0).matrix.e, 0);
|
||||
}
|
||||
|
||||
smil_async_test((t) => {
|
||||
const expectedValues = [
|
||||
// [animationId, time, sampleCallback]
|
||||
["animation", 0.0, sample1],
|
||||
["animation", 2.0, sample2],
|
||||
["animation", 3.999, sample3],
|
||||
["animation", 4.001, sample3]
|
||||
];
|
||||
|
||||
runAnimationTest(t, expectedValues);
|
||||
});
|
||||
|
||||
</script>
|
||||
|
|
@ -0,0 +1,69 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<meta charset="utf-8">
|
||||
<title>Tests animation with 'inherit'.</title>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/SVGAnimationTestCase-testharness.js"></script>
|
||||
|
||||
<svg>
|
||||
</svg>
|
||||
|
||||
<script>
|
||||
var rootSVGElement = document.querySelector("svg");
|
||||
var epsilon = 1.0;
|
||||
|
||||
// Setup test document
|
||||
var g = createSVGElement("g");
|
||||
g.setAttribute("fill", "green");
|
||||
|
||||
var rect = createSVGElement("rect");
|
||||
rect.setAttribute("id", "rect");
|
||||
rect.setAttribute("width", "100px");
|
||||
rect.setAttribute("height", "100px");
|
||||
rect.setAttribute("fill", "red");
|
||||
rect.setAttribute("onclick", "executeTest()");
|
||||
g.appendChild(rect);
|
||||
|
||||
var animateInherit = createSVGElement("animate");
|
||||
animateInherit.setAttribute("id", "animateInherit");
|
||||
animateInherit.setAttribute("attributeName", "fill");
|
||||
animateInherit.setAttribute("from", "red");
|
||||
animateInherit.setAttribute("to", "inherit");
|
||||
animateInherit.setAttribute("dur", "3s");
|
||||
animateInherit.setAttribute("begin", "0s");
|
||||
animateInherit.setAttribute("fill", "freeze");
|
||||
rect.appendChild(animateInherit);
|
||||
rootSVGElement.appendChild(g);
|
||||
|
||||
// Setup animation test
|
||||
function sample1() {
|
||||
// Check initial conditions
|
||||
expectFillColor(rect, 255, 0, 0);
|
||||
assert_equals(rect.style.fill, "");
|
||||
}
|
||||
|
||||
function sample2() {
|
||||
// Check half-time conditions
|
||||
expectFillColor(rect, 128, 64, 0);
|
||||
assert_equals(rect.style.fill, "");
|
||||
}
|
||||
|
||||
function sample3() {
|
||||
// Check end conditions
|
||||
expectFillColor(rect, 0, 128, 0);
|
||||
assert_equals(rect.style.fill, "");
|
||||
}
|
||||
|
||||
smil_async_test((t) => {
|
||||
const expectedValues = [
|
||||
// [animationId, time, sampleCallback]
|
||||
["animateInherit", 0.0, sample1],
|
||||
["animateInherit", 1.5, sample2],
|
||||
["animateInherit", 3.0, sample3]
|
||||
];
|
||||
|
||||
runAnimationTest(t, expectedValues);
|
||||
});
|
||||
|
||||
</script>
|
||||
|
|
@ -0,0 +1,59 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<meta charset="utf-8">
|
||||
<title>Test behavior of dynamically inserting animate with begin attribute</title>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/SVGAnimationTestCase-testharness.js"></script>
|
||||
|
||||
<svg>
|
||||
</svg>
|
||||
|
||||
<script>
|
||||
var rootSVGElement = document.querySelector("svg");
|
||||
var epsilon = 1.0;
|
||||
|
||||
// Setup test document
|
||||
var rect = createSVGElement("rect");
|
||||
rect.setAttribute("id", "rect");
|
||||
rect.setAttribute("x", "0");
|
||||
rect.setAttribute("y", "45");
|
||||
rect.setAttribute("width", "10");
|
||||
rect.setAttribute("height", "10");
|
||||
rect.setAttribute("fill", "green");
|
||||
|
||||
var animate = createSVGElement("animate");
|
||||
animate.setAttribute("id", "animation");
|
||||
animate.setAttribute("attributeName", "x");
|
||||
animate.setAttribute("begin", "0");
|
||||
animate.setAttribute("from", "0");
|
||||
animate.setAttribute("to", "90");
|
||||
animate.setAttribute("dur", "3s");
|
||||
animate.setAttribute("fill", "freeze");
|
||||
rect.appendChild(animate);
|
||||
rootSVGElement.appendChild(rect);
|
||||
|
||||
// Setup animation test
|
||||
function sample1() {
|
||||
assert_approx_equals(rect.x.animVal.value, 0, epsilon);
|
||||
assert_equals(rect.x.baseVal.value, 0);
|
||||
}
|
||||
|
||||
function sample2() {
|
||||
assert_approx_equals(rect.x.animVal.value, 90, epsilon);
|
||||
assert_equals(rect.x.baseVal.value, 0);
|
||||
}
|
||||
|
||||
smil_async_test((t) => {
|
||||
const expectedValues = [
|
||||
// [animationId, time, sampleCallback]
|
||||
["animation", 0.0, sample1],
|
||||
["animation", 3.0, sample2],
|
||||
];
|
||||
|
||||
runAnimationTest(t, expectedValues);
|
||||
});
|
||||
|
||||
window.animationStartsImmediately = true;
|
||||
|
||||
</script>
|
||||
|
|
@ -0,0 +1,58 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<meta charset="utf-8">
|
||||
<title>Test behavior of dynamically inserting animate without begin attribute</title>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/SVGAnimationTestCase-testharness.js"></script>
|
||||
|
||||
<svg>
|
||||
</svg>
|
||||
|
||||
<script>
|
||||
var rootSVGElement = document.querySelector("svg");
|
||||
var epsilon = 1.0;
|
||||
|
||||
// Setup test document
|
||||
var rect = createSVGElement("rect");
|
||||
rect.setAttribute("id", "rect");
|
||||
rect.setAttribute("x", "0");
|
||||
rect.setAttribute("y", "45");
|
||||
rect.setAttribute("width", "100");
|
||||
rect.setAttribute("height", "100");
|
||||
rect.setAttribute("fill", "green");
|
||||
|
||||
var animate = createSVGElement("animate");
|
||||
animate.setAttribute("id", "animation");
|
||||
animate.setAttribute("attributeName", "x");
|
||||
animate.setAttribute("from", "0");
|
||||
animate.setAttribute("to", "90");
|
||||
animate.setAttribute("dur", "3s");
|
||||
animate.setAttribute("fill", "freeze");
|
||||
rect.appendChild(animate);
|
||||
rootSVGElement.appendChild(rect);
|
||||
|
||||
// Setup animation test
|
||||
function sample1() {
|
||||
assert_approx_equals(rect.x.animVal.value, 0, epsilon);
|
||||
assert_equals(rect.x.baseVal.value, 0);
|
||||
}
|
||||
|
||||
function sample2() {
|
||||
assert_approx_equals(rect.x.animVal.value, 90, epsilon);
|
||||
assert_equals(rect.x.baseVal.value, 0);
|
||||
}
|
||||
|
||||
smil_async_test((t) => {
|
||||
const expectedValues = [
|
||||
// [animationId, time, sampleCallback]
|
||||
["animation", 0.0, sample1],
|
||||
["animation", 3.0, sample2]
|
||||
];
|
||||
|
||||
runAnimationTest(t, expectedValues);
|
||||
});
|
||||
|
||||
window.animationStartsImmediately = true;
|
||||
|
||||
</script>
|
||||
|
|
@ -0,0 +1,75 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<meta charset="utf-8">
|
||||
<title>Testing correct parsing of keySplines.</title>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/SVGAnimationTestCase-testharness.js"></script>
|
||||
|
||||
<svg>
|
||||
</svg>
|
||||
|
||||
<script>
|
||||
var rootSVGElement = document.querySelector("svg");
|
||||
var epsilon = 1.0;
|
||||
|
||||
// Setup test document
|
||||
var rect = createSVGElement("rect");
|
||||
rect.setAttribute("id", "rect");
|
||||
rect.setAttribute("fill", "green");
|
||||
rect.setAttribute("x", "0");
|
||||
rect.setAttribute("y", "0");
|
||||
rect.setAttribute("width", "100");
|
||||
rect.setAttribute("height", "100");
|
||||
rect.setAttribute("onclick", "executeTest()");
|
||||
|
||||
var animate = createSVGElement("animate");
|
||||
animate.setAttribute("id", "animation");
|
||||
animate.setAttribute("attributeName", "height");
|
||||
animate.setAttribute("calcMode", "spline");
|
||||
animate.setAttribute("keyTimes", " 0 ; 0.3333333 ; 0.666666; 1 ");
|
||||
animate.setAttribute("keySplines", " 0 ,0 1 , 1 ; 0 0 , 1 , 1 ; .75 , 0 , 0 , .75 ; ");
|
||||
animate.setAttribute("values", "200;167;111;0");
|
||||
animate.setAttribute("begin", "0s");
|
||||
animate.setAttribute("dur", "9s");
|
||||
rect.appendChild(animate);
|
||||
rootSVGElement.appendChild(rect);
|
||||
|
||||
// Setup animation test
|
||||
function sample1() {
|
||||
// Check initial/end conditions
|
||||
assert_approx_equals(rect.height.animVal.value, 167, epsilon);
|
||||
assert_equals(rect.height.baseVal.value, 100);
|
||||
}
|
||||
|
||||
function sample2() {
|
||||
// Check half-time conditions
|
||||
assert_approx_equals(rect.height.animVal.value, 111, epsilon);
|
||||
assert_equals(rect.height.baseVal.value, 100);
|
||||
}
|
||||
|
||||
function sample3() {
|
||||
// Check just before-end conditions
|
||||
assert_approx_equals(rect.height.animVal.value, 0, epsilon);
|
||||
assert_equals(rect.height.baseVal.value, 100);
|
||||
}
|
||||
|
||||
function sample4() {
|
||||
// Check end conditions
|
||||
assert_approx_equals(rect.height.animVal.value, 100, epsilon);
|
||||
assert_equals(rect.height.baseVal.value, 100);
|
||||
}
|
||||
|
||||
smil_async_test((t) => {
|
||||
const expectedValues = [
|
||||
// [animationId, time, sampleCallback]
|
||||
["animation", 3.0, sample1],
|
||||
["animation", 6.0, sample2],
|
||||
["animation", 8.999, sample3],
|
||||
["animation", 9.001, sample4]
|
||||
];
|
||||
|
||||
runAnimationTest(t, expectedValues);
|
||||
});
|
||||
|
||||
</script>
|
||||
|
|
@ -0,0 +1,104 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<meta charset="utf-8">
|
||||
<title>Animate SVGMarkerElement orientAttr from an angle to an angle</title>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/SVGAnimationTestCase-testharness.js"></script>
|
||||
|
||||
<svg>
|
||||
</svg>
|
||||
|
||||
<script>
|
||||
var rootSVGElement = document.querySelector("svg");
|
||||
var epsilon = 1.0;
|
||||
|
||||
// Setup test document
|
||||
|
||||
var marker = createSVGElement("marker");
|
||||
marker.setAttribute("id", "marker");
|
||||
marker.setAttribute("viewBox", "0 0 10 10");
|
||||
marker.setAttribute("markerWidth", "2");
|
||||
marker.setAttribute("markerHeight", "2");
|
||||
marker.setAttribute("refX", "5");
|
||||
marker.setAttribute("refY", "5");
|
||||
marker.setAttribute("markerUnits", "strokeWidth");
|
||||
|
||||
var markerPath = createSVGElement("path");
|
||||
markerPath.setAttribute("fill", "blue");
|
||||
markerPath.setAttribute("d", "M 5 0 L 10 10 L 0 10 Z");
|
||||
marker.appendChild(markerPath);
|
||||
|
||||
var defsElement = createSVGElement("defs");
|
||||
defsElement.appendChild(marker);
|
||||
rootSVGElement.appendChild(defsElement);
|
||||
|
||||
var path = createSVGElement("path");
|
||||
path.setAttribute("id", "path");
|
||||
path.setAttribute("onclick", "executeTest()");
|
||||
path.setAttribute("fill", "none");
|
||||
path.setAttribute("stroke", "green");
|
||||
path.setAttribute("stroke-width", "10");
|
||||
path.setAttribute("marker-start", "url(#marker)");
|
||||
path.setAttribute("marker-end", "url(#marker)");
|
||||
path.setAttribute("d", "M 130 135 L 180 135 L 180 185");
|
||||
path.setAttribute("transform", "translate(-130, -120)");
|
||||
rootSVGElement.appendChild(path);
|
||||
|
||||
var animate1 = createSVGElement("animate");
|
||||
animate1.setAttribute("id", "animation");
|
||||
animate1.setAttribute("attributeName", "orient");
|
||||
animate1.setAttribute("begin", "0s");
|
||||
animate1.setAttribute("dur", "4s");
|
||||
animate1.setAttribute("from", "90deg");
|
||||
animate1.setAttribute("to", "180deg");
|
||||
animate1.setAttribute("fill", "freeze");
|
||||
marker.appendChild(animate1);
|
||||
|
||||
// Setup animation test
|
||||
function sample1() {
|
||||
assert_approx_equals(marker.orientAngle.animVal.value, 0, epsilon);
|
||||
assert_equals(marker.orientAngle.baseVal.value, 0);
|
||||
|
||||
assert_equals(marker.orientType.animVal, SVGMarkerElement.SVG_MARKER_ORIENT_ANGLE);
|
||||
assert_equals(marker.orientType.baseVal, SVGMarkerElement.SVG_MARKER_ORIENT_ANGLE);
|
||||
}
|
||||
|
||||
function sample2() {
|
||||
assert_approx_equals(marker.orientAngle.animVal.value, 90, epsilon);
|
||||
assert_equals(marker.orientAngle.baseVal.value, 0);
|
||||
|
||||
assert_equals(marker.orientType.animVal, SVGMarkerElement.SVG_MARKER_ORIENT_ANGLE);
|
||||
assert_equals(marker.orientType.baseVal, SVGMarkerElement.SVG_MARKER_ORIENT_ANGLE);
|
||||
}
|
||||
|
||||
function sample3() {
|
||||
assert_approx_equals(marker.orientAngle.animVal.value, 135, epsilon);
|
||||
assert_equals(marker.orientAngle.baseVal.value, 0);
|
||||
|
||||
assert_equals(marker.orientType.animVal, SVGMarkerElement.SVG_MARKER_ORIENT_ANGLE);
|
||||
assert_equals(marker.orientType.baseVal, SVGMarkerElement.SVG_MARKER_ORIENT_ANGLE);
|
||||
}
|
||||
|
||||
function sample4() {
|
||||
assert_approx_equals(marker.orientAngle.animVal.value, 180, epsilon);
|
||||
assert_equals(marker.orientAngle.baseVal.value, 0);
|
||||
|
||||
assert_equals(marker.orientType.animVal, SVGMarkerElement.SVG_MARKER_ORIENT_ANGLE);
|
||||
assert_equals(marker.orientType.baseVal, SVGMarkerElement.SVG_MARKER_ORIENT_ANGLE);
|
||||
}
|
||||
|
||||
smil_async_test((t) => {
|
||||
const expectedValues = [
|
||||
// [animationId, time, sampleCallback]
|
||||
["animation", 0.0, sample1],
|
||||
["animation", 0.001, sample2],
|
||||
["animation", 2.0, sample3],
|
||||
["animation", 3.999, sample4],
|
||||
["animation", 4.001, sample4]
|
||||
];
|
||||
|
||||
runAnimationTest(t, expectedValues);
|
||||
});
|
||||
|
||||
</script>
|
||||
Загрузка…
Ссылка в новой задаче