Commit b31497b2 authored by Edvard Thörnros's avatar Edvard Thörnros Committed by Commit Bot

Translate svg/animation tests to WPT (Commit 6)

This is the sixth 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: I43342eb1f4ee50aa5c14ec6035b4a45fee82d5f0
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1755902
Commit-Queue: Edvard Thörnros <edvardt@opera.com>
Auto-Submit: Edvard Thörnros <edvardt@opera.com>
Reviewed-by: default avatarStephen Chenney <schenney@chromium.org>
Cr-Commit-Position: refs/heads/master@{#687594}
parent 9fd05cd9
description("This tests values animation and accumulate='sum'");
embedSVGTestCase("resources/accumulate-values-width-animation.svg");
<!doctype html>
<html>
<meta charset="utf-8">
<title>This tests values animation and accumulate='sum'</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">
<!-- an1: Change width to 100 in 10s with a wobbling animation -->
<rect width="20" height="100" fill="green">
<animate id="an1" attributeName="width" dur="2s" values="0; 30; 20" accumulate="sum" repeatCount="5" fill="freeze"/>
</rect>
</svg>
<script>
var rootSVGElement = document.querySelector("svg");
var epsilon = 1.0;
// Setup animation test
function sample1() {
shouldBeCloseEnough("rect.width.animVal.value", "0");
shouldBe("rect.width.baseVal.value", "20");
assert_approx_equals(rect.width.animVal.value, 0, epsilon);
assert_equals(rect.width.baseVal.value, 20);
}
function sample2() {
shouldBeCloseEnough("rect.width.animVal.value", "30");
shouldBe("rect.width.baseVal.value", "20");
assert_approx_equals(rect.width.animVal.value, 30, epsilon);
assert_equals(rect.width.baseVal.value, 20);
}
function sample3() {
shouldBeCloseEnough("rect.width.animVal.value", "20");
shouldBe("rect.width.baseVal.value", "20");
assert_approx_equals(rect.width.animVal.value, 20, epsilon);
assert_equals(rect.width.baseVal.value, 20);
}
function sample4() {
shouldBeCloseEnough("rect.width.animVal.value", "50");
shouldBe("rect.width.baseVal.value", "20");
assert_approx_equals(rect.width.animVal.value, 50, epsilon);
assert_equals(rect.width.baseVal.value, 20);
}
function sample5() {
shouldBeCloseEnough("rect.width.animVal.value", "40");
shouldBe("rect.width.baseVal.value", "20");
assert_approx_equals(rect.width.animVal.value, 40, epsilon);
assert_equals(rect.width.baseVal.value, 20);
}
function sample6() {
shouldBeCloseEnough("rect.width.animVal.value", "70");
shouldBe("rect.width.baseVal.value", "20");
assert_approx_equals(rect.width.animVal.value, 70, epsilon);
assert_equals(rect.width.baseVal.value, 20);
}
function sample7() {
shouldBeCloseEnough("rect.width.animVal.value", "60");
shouldBe("rect.width.baseVal.value", "20");
assert_approx_equals(rect.width.animVal.value, 60, epsilon);
assert_equals(rect.width.baseVal.value, 20);
}
function sample8() {
shouldBeCloseEnough("rect.width.animVal.value", "90");
shouldBe("rect.width.baseVal.value", "20");
assert_approx_equals(rect.width.animVal.value, 90, epsilon);
assert_equals(rect.width.baseVal.value, 20);
}
function sample9() {
shouldBeCloseEnough("rect.width.animVal.value", "80");
shouldBe("rect.width.baseVal.value", "20");
assert_approx_equals(rect.width.animVal.value, 80, epsilon);
assert_equals(rect.width.baseVal.value, 20);
}
function sample10() {
shouldBeCloseEnough("rect.width.animVal.value", "110");
shouldBe("rect.width.baseVal.value", "20");
assert_approx_equals(rect.width.animVal.value, 110, epsilon);
assert_equals(rect.width.baseVal.value, 20);
}
function sample11() {
shouldBeCloseEnough("rect.width.animVal.value", "100");
shouldBe("rect.width.baseVal.value", "20");
assert_approx_equals(rect.width.animVal.value, 100, epsilon);
assert_equals(rect.width.baseVal.value, 20);
}
function executeTest() {
smil_async_test((t) => {
rect = rootSVGElement.ownerDocument.getElementsByTagName("rect")[0];
const expectedValues = [
......@@ -82,8 +102,9 @@ function executeTest() {
["an1", 60.0, sample11]
];
runAnimationTest(expectedValues);
}
runAnimationTest(t, expectedValues);
});
window.animationStartsImmediately = true;
var successfullyParsed = true;
</script>
\ No newline at end of file
<!doctype html>
<html>
<meta charset="utf-8">
<title>This tests multiple additive='sum' animations running at the same time</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">
......@@ -12,3 +20,42 @@
</rect>
</svg>
<script>
var rootSVGElement = document.querySelector("svg");
var epsilon = 1.0;
// Setup animation test
function sample1() {
assert_approx_equals(rect.width.animVal.value, 20, epsilon);
assert_equals(rect.width.baseVal.value, 10);
}
function sample2() {
assert_approx_equals(rect.width.animVal.value, 60, epsilon);
assert_equals(rect.width.baseVal.value, 10);
}
function sample3() {
assert_approx_equals(rect.width.animVal.value, 100, epsilon);
assert_equals(rect.width.baseVal.value, 10);
}
smil_async_test((t) => {
rect = rootSVGElement.ownerDocument.getElementsByTagName("rect")[0];
// 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]
["an1", 0.0, sample1],
["an1", 2.0, sample2],
["an1", 4.0, sample3],
["an1", 60.0, sample3]
];
runAnimationTest(t, expectedValues);
});
window.animationStartsImmediately = true;
</script>
\ No newline at end of file
<!doctype html>
<html>
<meta charset="utf-8">
<title>This by animation for all XML property types</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 id="svg" viewBox="0 0 300 300" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- All additive types except AnimatedPath are tested here -->
<defs>
<marker id="marker" viewBox="0 0 10 10" markerWidth="4" markerHeight="3" refX="1" refY="5" orient="-45deg">
<polyline id="polyline" points="0,0 10,5 0,10 1,5" fill="green"/>
</marker>
<filter id="filter">
<feConvolveMatrix id="feConvolveMatrix" kernelUnitLength="20 30" kernelMatrix="0 1 0 0 1 0 0 1 0" divisor="37.5" order="6 6" targetX="5" preserveAlpha="false"/>
</filter>
</defs>
<!-- Non-additive types AnimatedBoolean, AnimatedEnumeration, AnimatedPreserveAspectRatio, AnimatedString are tested in non-additive-type-by-animation.svg -->
<path id="path" d="M45,50 L55,50" transform="rotate(45)" stroke-width="10" stroke="green" marker-end="url(#marker)"/>
<rect id="rect" y="0" width="100" height="100" fill="black" filter="url(#filter)"/>
<text id="text" x="50" y="50" dy="5 -10 10 -10">ABCD</text>
<!-- AnimatedAngle -->
<animate id="an1" xlink:href="#marker" attributeName="orient" begin="0s" dur="4s" by="45deg" fill="freeze"/>
<!-- AnimatedColor -->
<animate xlink:href="#rect" attributeName="fill" begin="0s" dur="4s" by="green" fill="freeze"/>
<!-- AnimatedLength -->
<animate xlink:href="#rect" attributeName="y" begin="0s" dur="4s" by="100" fill="freeze"/>
<!-- AnimatedLengthList -->
<animate xlink:href="#text" attributeName="dy" begin="0s" dur="4s" by="-10 20 -20 20" fill="freeze"/>
<!-- AnimatedNumberOptionalNumber -->
<animate xlink:href="#feConvolveMatrix" attributeName="kernelUnitLength" begin="0s" dur="4s" by="-10 -20" fill="freeze"/>
<!-- AnimatedNumber -->
<animate xlink:href="#feConvolveMatrix" attributeName="divisor" begin="0s" dur="4s" by="-17.5" fill="freeze"/>
<!-- AnimatedNumberList -->
<animate xlink:href="#feConvolveMatrix" attributeName="kernelMatrix" begin="0s" dur="4s" by="2 1 3 2 1 3 2 1 3" fill="freeze"/>
<!-- AnimatedIntegerOptionalInteger -->
<animate xlink:href="#feConvolveMatrix" attributeName="order" begin="0s" dur="4s" by="-3 -3" fill="freeze"/>
<!-- AnimatedInteger -->
<animate xlink:href="#feConvolveMatrix" attributeName="targetX" begin="0s" dur="4s" by="-4" fill="freeze"/>
<!-- AnimatedPoints -->
<animate xlink:href="#polyline" attributeName="points" begin="0s" dur="4s" by="0,0 10,5 0,10 1,5" fill="freeze"/>
<!-- AnimatedRect -->
<animate xlink:href="#svg" attributeName="viewBox" begin="0s" dur="4s" by="0 0 -100 -100" fill="freeze"/>
<!-- AnimatedTransformList -->
<animateTransform xlink:href="#path" attributeName="transform" type="rotate" begin="0s" dur="4s" by="-45" fill="freeze"/>
</svg>
<script>
var rootSVGElement = document.querySelector("svg");
var epsilon = 1.0;
// Setup animation test
function checkBaseVal() {
assert_equals(marker.orientAngle.baseVal.value, -45);
assert_equals(feConvolveMatrix.divisor.baseVal, 37.5);
assert_equals(feConvolveMatrix.orderX.baseVal, 6);
assert_equals(feConvolveMatrix.orderY.baseVal, 6);
assert_equals(feConvolveMatrix.targetX.baseVal, 5);
assert_equals(feConvolveMatrix.kernelUnitLengthX.baseVal, 20);
assert_equals(feConvolveMatrix.kernelUnitLengthY.baseVal, 30);
assert_equals(feConvolveMatrix.kernelMatrix.baseVal.numberOfItems, 9);
assert_equals(feConvolveMatrix.kernelMatrix.baseVal.getItem(0).value, 0);
assert_equals(feConvolveMatrix.kernelMatrix.baseVal.getItem(1).value, 1);
assert_equals(feConvolveMatrix.kernelMatrix.baseVal.getItem(2).value, 0);
assert_equals(feConvolveMatrix.kernelMatrix.baseVal.getItem(3).value, 0);
assert_equals(feConvolveMatrix.kernelMatrix.baseVal.getItem(4).value, 1);
assert_equals(feConvolveMatrix.kernelMatrix.baseVal.getItem(5).value, 0);
assert_equals(feConvolveMatrix.kernelMatrix.baseVal.getItem(6).value, 0);
assert_equals(feConvolveMatrix.kernelMatrix.baseVal.getItem(7).value, 1);
assert_equals(feConvolveMatrix.kernelMatrix.baseVal.getItem(8).value, 0);
assert_equals(rect.y.baseVal.value, 0);
assert_equals(text.dy.baseVal.numberOfItems, 4);
assert_equals(text.dy.baseVal.getItem(0).value, 5);
assert_equals(text.dy.baseVal.getItem(1).value, -10);
assert_equals(text.dy.baseVal.getItem(2).value, 10);
assert_equals(text.dy.baseVal.getItem(3).value, -10);
assert_equals(svg.viewBox.baseVal.x, 0);
assert_equals(svg.viewBox.baseVal.y, 0);
assert_equals(svg.viewBox.baseVal.width, 300);
assert_equals(svg.viewBox.baseVal.height, 300);
assert_equals(polyline.points.numberOfItems, 4);
assert_equals(polyline.points.getItem(0).x, 0);
assert_equals(polyline.points.getItem(0).y, 0);
assert_equals(polyline.points.getItem(1).x, 10);
assert_equals(polyline.points.getItem(1).y, 5);
assert_equals(polyline.points.getItem(1).x, 10);
assert_equals(polyline.points.getItem(1).y, 5);
assert_equals(polyline.points.getItem(2).x, 0);
assert_equals(polyline.points.getItem(2).y, 10);
assert_equals(path.transform.baseVal.numberOfItems, 1);
assert_equals(path.transform.baseVal.getItem(0).type, SVGTransform.SVG_TRANSFORM_ROTATE);
assert_equals(path.transform.baseVal.getItem(0).angle, 45);
}
function sample1() {
assert_approx_equals(marker.orientAngle.animVal.value, -45, epsilon);
assert_approx_equals(feConvolveMatrix.divisor.animVal, 37.5, epsilon);
assert_approx_equals(feConvolveMatrix.orderX.animVal, 6, epsilon);
assert_approx_equals(feConvolveMatrix.orderY.animVal, 6, epsilon);
assert_approx_equals(feConvolveMatrix.targetX.animVal, 5, epsilon);
assert_approx_equals(feConvolveMatrix.kernelUnitLengthX.animVal, 20, epsilon);
assert_approx_equals(feConvolveMatrix.kernelUnitLengthY.animVal, 30, epsilon);
assert_equals(feConvolveMatrix.kernelMatrix.animVal.numberOfItems, 9);
assert_approx_equals(feConvolveMatrix.kernelMatrix.animVal.getItem(0).value, 0, epsilon);
assert_approx_equals(feConvolveMatrix.kernelMatrix.animVal.getItem(1).value, 1, epsilon);
assert_approx_equals(feConvolveMatrix.kernelMatrix.animVal.getItem(2).value, 0, epsilon);
assert_approx_equals(feConvolveMatrix.kernelMatrix.animVal.getItem(3).value, 0, epsilon);
assert_approx_equals(feConvolveMatrix.kernelMatrix.animVal.getItem(4).value, 1, epsilon);
assert_approx_equals(feConvolveMatrix.kernelMatrix.animVal.getItem(5).value, 0, epsilon);
assert_approx_equals(feConvolveMatrix.kernelMatrix.animVal.getItem(6).value, 0, epsilon);
assert_approx_equals(feConvolveMatrix.kernelMatrix.animVal.getItem(7).value, 1, epsilon);
assert_approx_equals(feConvolveMatrix.kernelMatrix.animVal.getItem(8).value, 0, epsilon);
assert_approx_equals(rect.y.animVal.value, 0, epsilon);
assert_equals(text.dy.animVal.numberOfItems, 4);
assert_approx_equals(text.dy.animVal.getItem(0).value, 5, epsilon);
assert_approx_equals(text.dy.animVal.getItem(1).value, -10, epsilon);
assert_approx_equals(text.dy.animVal.getItem(2).value, 10, epsilon);
assert_approx_equals(text.dy.animVal.getItem(3).value, -10, epsilon);
assert_approx_equals(svg.viewBox.animVal.x, 0, epsilon);
assert_approx_equals(svg.viewBox.animVal.y, 0, epsilon);
assert_approx_equals(svg.viewBox.animVal.width, 300, epsilon);
assert_approx_equals(svg.viewBox.animVal.height, 300, epsilon);
assert_equals(polyline.animatedPoints.numberOfItems, 4);
assert_approx_equals(polyline.animatedPoints.getItem(0).x, 0, epsilon);
assert_approx_equals(polyline.animatedPoints.getItem(0).y, 0, epsilon);
assert_approx_equals(polyline.animatedPoints.getItem(1).x, 10, epsilon);
assert_approx_equals(polyline.animatedPoints.getItem(1).y, 5, epsilon);
assert_approx_equals(polyline.animatedPoints.getItem(1).x, 10, epsilon);
assert_approx_equals(polyline.animatedPoints.getItem(1).y, 5, epsilon);
assert_approx_equals(polyline.animatedPoints.getItem(2).x, 0, epsilon);
assert_approx_equals(polyline.animatedPoints.getItem(2).y, 10, epsilon);
assert_equals(path.transform.animVal.numberOfItems, 2);
assert_equals(path.transform.animVal.getItem(0).type, SVGTransform.SVG_TRANSFORM_ROTATE);
assert_equals(path.transform.animVal.getItem(0).angle, 45);
assert_equals(path.transform.animVal.getItem(1).type, SVGTransform.SVG_TRANSFORM_ROTATE);
assert_approx_equals(path.transform.animVal.getItem(1).angle, 0, epsilon);
expectFillColor(rect, 0, 0, 0);
checkBaseVal();
}
function sample2() {
assert_approx_equals(marker.orientAngle.animVal.value, -22.5, epsilon);
assert_approx_equals(feConvolveMatrix.divisor.animVal, 28.75, epsilon);
assert_approx_equals(feConvolveMatrix.orderX.animVal, 5, epsilon);
assert_approx_equals(feConvolveMatrix.orderY.animVal, 5, epsilon);
assert_approx_equals(feConvolveMatrix.targetX.animVal, 3, epsilon);
assert_approx_equals(feConvolveMatrix.kernelUnitLengthX.animVal, 15, epsilon);
assert_approx_equals(feConvolveMatrix.kernelUnitLengthY.animVal, 20, epsilon);
assert_equals(feConvolveMatrix.kernelMatrix.animVal.numberOfItems, 9);
assert_approx_equals(feConvolveMatrix.kernelMatrix.animVal.getItem(0).value, 1, epsilon);
assert_approx_equals(feConvolveMatrix.kernelMatrix.animVal.getItem(1).value, 1.5, epsilon);
assert_approx_equals(feConvolveMatrix.kernelMatrix.animVal.getItem(2).value, 1.5, epsilon);
assert_approx_equals(feConvolveMatrix.kernelMatrix.animVal.getItem(3).value, 1, epsilon);
assert_approx_equals(feConvolveMatrix.kernelMatrix.animVal.getItem(4).value, 1.5, epsilon);
assert_approx_equals(feConvolveMatrix.kernelMatrix.animVal.getItem(5).value, 1.5, epsilon);
assert_approx_equals(feConvolveMatrix.kernelMatrix.animVal.getItem(6).value, 1, epsilon);
assert_approx_equals(feConvolveMatrix.kernelMatrix.animVal.getItem(7).value, 1.5, epsilon);
assert_approx_equals(feConvolveMatrix.kernelMatrix.animVal.getItem(8).value, 1.5, epsilon);
assert_approx_equals(rect.y.animVal.value, 50, epsilon);
assert_equals(text.dy.animVal.numberOfItems, 4);
assert_approx_equals(text.dy.animVal.getItem(0).value, 0, epsilon);
assert_approx_equals(text.dy.animVal.getItem(1).value, 0, epsilon);
assert_approx_equals(text.dy.animVal.getItem(2).value, 0, epsilon);
assert_approx_equals(text.dy.animVal.getItem(3).value, 0, epsilon);
assert_approx_equals(svg.viewBox.animVal.x, 0, epsilon);
assert_approx_equals(svg.viewBox.animVal.y, 0, epsilon);
assert_approx_equals(svg.viewBox.animVal.width, 250, epsilon);
assert_approx_equals(svg.viewBox.animVal.height, 250, epsilon);
assert_equals(polyline.animatedPoints.numberOfItems, 4);
assert_approx_equals(polyline.animatedPoints.getItem(0).x, 0, epsilon);
assert_approx_equals(polyline.animatedPoints.getItem(0).y, 0, epsilon);
assert_approx_equals(polyline.animatedPoints.getItem(1).x, 15, epsilon);
assert_approx_equals(polyline.animatedPoints.getItem(1).y, 7.5, epsilon);
assert_approx_equals(polyline.animatedPoints.getItem(1).x, 15, epsilon);
assert_approx_equals(polyline.animatedPoints.getItem(1).y, 7.5, epsilon);
assert_approx_equals(polyline.animatedPoints.getItem(2).x, 0, epsilon);
assert_approx_equals(polyline.animatedPoints.getItem(2).y, 15, epsilon);
assert_equals(path.transform.animVal.numberOfItems, 2);
assert_equals(path.transform.animVal.getItem(0).type, SVGTransform.SVG_TRANSFORM_ROTATE);
assert_equals(path.transform.animVal.getItem(0).angle, 45);
assert_equals(path.transform.animVal.getItem(1).type, SVGTransform.SVG_TRANSFORM_ROTATE);
assert_approx_equals(path.transform.animVal.getItem(1).angle, -22.5, epsilon);
expectFillColor(rect, 0, 63, 0);
checkBaseVal();
}
function sample3() {
assert_approx_equals(marker.orientAngle.animVal.value, 0, epsilon);
assert_approx_equals(feConvolveMatrix.divisor.animVal, 20, epsilon);
assert_approx_equals(feConvolveMatrix.orderX.animVal, 3, epsilon);
assert_approx_equals(feConvolveMatrix.orderY.animVal, 3, epsilon);
assert_approx_equals(feConvolveMatrix.targetX.animVal, 1, epsilon);
assert_approx_equals(feConvolveMatrix.kernelUnitLengthX.animVal, 10, epsilon);
assert_approx_equals(feConvolveMatrix.kernelUnitLengthY.animVal, 10, epsilon);
assert_equals(feConvolveMatrix.kernelMatrix.animVal.numberOfItems, 9);
assert_approx_equals(feConvolveMatrix.kernelMatrix.animVal.getItem(0).value, 2, epsilon);
assert_approx_equals(feConvolveMatrix.kernelMatrix.animVal.getItem(1).value, 2, epsilon);
assert_approx_equals(feConvolveMatrix.kernelMatrix.animVal.getItem(2).value, 3, epsilon);
assert_approx_equals(feConvolveMatrix.kernelMatrix.animVal.getItem(3).value, 2, epsilon);
assert_approx_equals(feConvolveMatrix.kernelMatrix.animVal.getItem(4).value, 2, epsilon);
assert_approx_equals(feConvolveMatrix.kernelMatrix.animVal.getItem(5).value, 3, epsilon);
assert_approx_equals(feConvolveMatrix.kernelMatrix.animVal.getItem(6).value, 2, epsilon);
assert_approx_equals(feConvolveMatrix.kernelMatrix.animVal.getItem(7).value, 2, epsilon);
assert_approx_equals(feConvolveMatrix.kernelMatrix.animVal.getItem(8).value, 3, epsilon);
assert_approx_equals(rect.y.animVal.value, 100, epsilon);
assert_equals(text.dy.animVal.numberOfItems, 4);
assert_approx_equals(text.dy.animVal.getItem(0).value, -5, epsilon);
assert_approx_equals(text.dy.animVal.getItem(1).value, 10, epsilon);
assert_approx_equals(text.dy.animVal.getItem(2).value, -10, epsilon);
assert_approx_equals(text.dy.animVal.getItem(3).value, 10, epsilon);
assert_approx_equals(svg.viewBox.animVal.x, 0, epsilon);
assert_approx_equals(svg.viewBox.animVal.y, 0, epsilon);
assert_approx_equals(svg.viewBox.animVal.width, 200, epsilon);
assert_approx_equals(svg.viewBox.animVal.height, 200, epsilon);
assert_equals(polyline.animatedPoints.numberOfItems, 4);
assert_approx_equals(polyline.animatedPoints.getItem(0).x, 0, epsilon);
assert_approx_equals(polyline.animatedPoints.getItem(0).y, 0, epsilon);
assert_approx_equals(polyline.animatedPoints.getItem(1).x, 20, epsilon);
assert_approx_equals(polyline.animatedPoints.getItem(1).y, 10, epsilon);
assert_approx_equals(polyline.animatedPoints.getItem(1).x, 20, epsilon);
assert_approx_equals(polyline.animatedPoints.getItem(1).y, 10, epsilon);
assert_approx_equals(polyline.animatedPoints.getItem(2).x, 0, epsilon);
assert_approx_equals(polyline.animatedPoints.getItem(2).y, 20, epsilon);
assert_equals(path.transform.animVal.numberOfItems, 2);
assert_equals(path.transform.animVal.getItem(0).type, SVGTransform.SVG_TRANSFORM_ROTATE);
assert_equals(path.transform.animVal.getItem(0).angle, 45);
assert_equals(path.transform.animVal.getItem(1).type, SVGTransform.SVG_TRANSFORM_ROTATE);
assert_approx_equals(path.transform.animVal.getItem(1).angle, -45, epsilon);
expectFillColor(rect, 0, 128, 0);
checkBaseVal();
}
smil_async_test((t) => {
marker = rootSVGElement.ownerDocument.getElementsByTagName("marker")[0];
filter = rootSVGElement.ownerDocument.getElementsByTagName("filter")[0];
feConvolveMatrix = rootSVGElement.ownerDocument.getElementsByTagName("feConvolveMatrix")[0];
rect = rootSVGElement.ownerDocument.getElementsByTagName("rect")[0];
svg = rootSVGElement.ownerDocument.getElementsByTagName("svg")[0];
path = rootSVGElement.ownerDocument.getElementsByTagName("path")[0];
polyline = rootSVGElement.ownerDocument.getElementsByTagName("polyline")[0];
text = rootSVGElement.ownerDocument.getElementsByTagName("text")[0];
const expectedValues = [
// [animationId, time, sampleCallback]
["an1", 0.0, sample1],
["an1", 2.0, sample2],
["an1", 4.001, sample3]
];
runAnimationTest(t, expectedValues);
});
window.animationStartsImmediately = true;
</script>
\ No newline at end of file
<!doctype html>
<html>
<meta charset="utf-8">
<title>This tests values animation and additive='sum'</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">
......@@ -16,3 +24,60 @@
</rect>
</svg>
<script>
var rootSVGElement = document.querySelector("svg");
var epsilon = 1.0;
// Setup animation test
function sample1() {
assert_approx_equals(rect.width.animVal.value, 10, epsilon);
assert_equals(rect.width.baseVal.value, 10);
}
function sample2() {
assert_approx_equals(rect.width.animVal.value, 60, epsilon);
assert_equals(rect.width.baseVal.value, 10);
}
function sample3() {
assert_approx_equals(rect.width.animVal.value, 93.3, epsilon);
assert_equals(rect.width.baseVal.value, 10);
}
function changeBaseVal() {
// At 5s, only change the baseVal.
rect.width.baseVal.value = 60;
}
function sample4() {
assert_approx_equals(rect.width.animVal.value, 143.33, epsilon);
assert_equals(rect.width.baseVal.value, 60);
}
function sample5() {
assert_approx_equals(rect.width.animVal.value, 160, epsilon);
assert_equals(rect.width.baseVal.value, 60);
}
smil_async_test((t) => {
rect = rootSVGElement.ownerDocument.getElementsByTagName("rect")[0];
// 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]
["an1", 0.0, sample1],
["an1", 3.0, sample2],
["an1", 4.999, sample3],
["an1", 5.0, changeBaseVal],
["an1", 5.001, sample4],
["an1", 6.001, sample5],
["an1", 60.0, sample5]
];
runAnimationTest(t, expectedValues);
});
window.animationStartsImmediately = true;
</script>
\ No newline at end of file
description("Test calcMode spline with by animation. You should see a green 100x100 rect and only PASS messages");
createSVGTestCase();
<!doctype html>
<html>
<meta charset="utf-8">
<title>Test calcMode spline with by 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");
......@@ -14,7 +26,7 @@ var animate = createSVGElement("animate");
animate.setAttribute("id", "animation");
animate.setAttribute("attributeName", "x");
animate.setAttribute("by", "-100");
animate.setAttribute("begin", "click");
animate.setAttribute("begin", "0s");
animate.setAttribute("dur", "4s");
animate.setAttribute("keyTimes", "0;1");
animate.setAttribute("keySplines", "0.25 .5 .25 0.85");
......@@ -25,23 +37,23 @@ rootSVGElement.appendChild(rect);
// Setup animation test
function sample1() {
// Check initial/end conditions
shouldBeCloseEnough("rect.x.animVal.value", "100");
shouldBe("rect.x.baseVal.value", "100");
assert_approx_equals(rect.x.animVal.value, 100, epsilon);
assert_equals(rect.x.baseVal.value, 100);
}
function sample2() {
// Check half-time conditions
shouldBeCloseEnough("rect.x.animVal.value", "18.8");
shouldBe("rect.x.baseVal.value", "100");
assert_approx_equals(rect.x.animVal.value, 18.8, epsilon);
assert_equals(rect.x.baseVal.value, 100);
}
function sample3() {
// Check just before-end conditions
shouldBeCloseEnough("rect.x.animVal.value", "0");
shouldBe("rect.x.baseVal.value", "100");
assert_approx_equals(rect.x.animVal.value, 0, epsilon);
assert_equals(rect.x.baseVal.value, 100);
}
function executeTest() {
smil_async_test((t) => {
const expectedValues = [
// [animationId, time, sampleCallback]
["animation", 0.0, sample1],
......@@ -50,8 +62,9 @@ function executeTest() {
["animation", 4.001, sample1]
];
runAnimationTest(expectedValues);
}
runAnimationTest(t, expectedValues);
});
window.clickX = 150;
var successfullyParsed = true;
</script>
\ No newline at end of file
description("Test calcMode spline with from-by animation. You should see a green 100x100 rect and only PASS messages");
createSVGTestCase();
<!doctype html>
<html>
<meta charset="utf-8">
<title>Test calcMode spline with from-by 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");
......@@ -15,7 +27,7 @@ animate.setAttribute("id", "animation");
animate.setAttribute("attributeName", "x");
animate.setAttribute("from", "100");
animate.setAttribute("by", "-100");
animate.setAttribute("begin", "click");
animate.setAttribute("begin", "0s");
animate.setAttribute("dur", "4s");
animate.setAttribute("keyTimes", "0;1");
animate.setAttribute("keySplines", "0.25 .5 .25 0.85");
......@@ -26,23 +38,23 @@ rootSVGElement.appendChild(rect);
// Setup animation test
function sample1() {
// Check initial/end conditions
shouldBeCloseEnough("rect.x.animVal.value", "100");
shouldBe("rect.x.baseVal.value", "100");
assert_approx_equals(rect.x.animVal.value, 100, epsilon);
assert_equals(rect.x.baseVal.value, 100);
}
function sample2() {
// Check half-time conditions
shouldBeCloseEnough("rect.x.animVal.value", "18.8");
shouldBe("rect.x.baseVal.value", "100");
assert_approx_equals(rect.x.animVal.value, 18.8, epsilon);
assert_equals(rect.x.baseVal.value, 100);
}
function sample3() {
// Check just before-end conditions
shouldBeCloseEnough("rect.x.animVal.value", "0");
shouldBe("rect.x.baseVal.value", "100");
assert_approx_equals(rect.x.animVal.value, 0, epsilon);
assert_equals(rect.x.baseVal.value, 100);
}
function executeTest() {
smil_async_test((t) => {
const expectedValues = [
// [animationId, time, sampleCallback]
["animation", 0.0, sample1],
......@@ -51,8 +63,9 @@ function executeTest() {
["animation", 4.001, sample1]
];
runAnimationTest(expectedValues);
}
runAnimationTest(t, expectedValues);
});
window.clickX = 150;
var successfullyParsed = true;
</script>
\ No newline at end of file
description("Test calcMode spline with from-to animation. You should see a green 100x100 rect and only PASS messages");
createSVGTestCase();
<!doctype html>
<html>
<meta charset="utf-8">
<title>Test calcMode spline with from-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");
......@@ -15,7 +27,7 @@ animate.setAttribute("id", "animation");
animate.setAttribute("attributeName", "x");
animate.setAttribute("from", "100");
animate.setAttribute("to", "0");
animate.setAttribute("begin", "click");
animate.setAttribute("begin", "0s");
animate.setAttribute("dur", "4s");
animate.setAttribute("keyTimes", "0;1");
animate.setAttribute("keySplines", "0.25 .5 .25 0.85");
......@@ -26,23 +38,23 @@ rootSVGElement.appendChild(rect);
// Setup animation test
function sample1() {
// Check initial/end conditions
shouldBeCloseEnough("rect.x.animVal.value", "100");
shouldBe("rect.x.baseVal.value", "100");
assert_approx_equals(rect.x.animVal.value, 100, epsilon);
assert_equals(rect.x.baseVal.value, 100);
}
function sample2() {
// Check half-time conditions
shouldBeCloseEnough("rect.x.animVal.value", "18.8");
shouldBe("rect.x.baseVal.value", "100");
assert_approx_equals(rect.x.animVal.value, 18.8, epsilon);
assert_equals(rect.x.baseVal.value, 100);
}
function sample3() {
// Check just before-end conditions
shouldBeCloseEnough("rect.x.animVal.value", "0");
shouldBe("rect.x.baseVal.value", "100");
assert_approx_equals(rect.x.animVal.value, 0, epsilon);
assert_equals(rect.x.baseVal.value, 100);
}
function executeTest() {
smil_async_test((t) => {
const expectedValues = [
// [animationId, time, sampleCallback]
["animation", 0.0, sample1],
......@@ -51,8 +63,9 @@ function executeTest() {
["animation", 4.001, sample1]
];
runAnimationTest(expectedValues);
}
runAnimationTest(t, expectedValues);
});
window.clickX = 150;
var successfullyParsed = true;
</script>
\ No newline at end of file
SVG 1.1 dynamic animation tests
This tests values animation and accumulate='sum'
On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
PASS rect.width.animVal.value is 0
PASS rect.width.baseVal.value is 20
PASS rect.width.animVal.value is 30
PASS rect.width.baseVal.value is 20
PASS rect.width.animVal.value is 20
PASS rect.width.baseVal.value is 20
PASS rect.width.animVal.value is 20
PASS rect.width.baseVal.value is 20
PASS rect.width.animVal.value is 50
PASS rect.width.baseVal.value is 20
PASS rect.width.animVal.value is 40
PASS rect.width.baseVal.value is 20
PASS rect.width.animVal.value is 40
PASS rect.width.baseVal.value is 20
PASS rect.width.animVal.value is 70
PASS rect.width.baseVal.value is 20
PASS rect.width.animVal.value is 60
PASS rect.width.baseVal.value is 20
PASS rect.width.animVal.value is 60
PASS rect.width.baseVal.value is 20
PASS rect.width.animVal.value is 90
PASS rect.width.baseVal.value is 20
PASS rect.width.animVal.value is 80
PASS rect.width.baseVal.value is 20
PASS rect.width.animVal.value is 80
PASS rect.width.baseVal.value is 20
PASS rect.width.animVal.value is 110
PASS rect.width.baseVal.value is 20
PASS rect.width.animVal.value is 100
PASS rect.width.baseVal.value is 20
PASS rect.width.animVal.value is 100
PASS rect.width.baseVal.value is 20
PASS rect.width.animVal.value is 100
PASS rect.width.baseVal.value is 20
PASS rect.width.animVal.value is 100
PASS rect.width.baseVal.value is 20
PASS successfullyParsed is true
TEST COMPLETE
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<html>
<head>
<script src="../../resources/js-test.js"></script>
<script src="resources/SVGTestCase.js"></script>
<script src="resources/SVGAnimationTestCase.js"></script>
</head>
<body onload="runSMILTest()">
<h1>SVG 1.1 dynamic animation tests</h1>
<p id="description"></p>
<div id="console"></div>
<script src="script-tests/accumulate-values-width-animation.js"></script>
</body>
</html>
SVG 1.1 dynamic animation tests
This tests multiple additive='sum' animations running at the same time
On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
PASS rect.width.animVal.value is 20
PASS rect.width.baseVal.value is 10
PASS rect.width.animVal.value is 60
PASS rect.width.baseVal.value is 10
PASS rect.width.animVal.value is 100
PASS rect.width.baseVal.value is 10
PASS rect.width.animVal.value is 100
PASS rect.width.baseVal.value is 10
PASS successfullyParsed is true
TEST COMPLETE
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<html>
<head>
<script src="../../resources/js-test.js"></script>
<script src="resources/SVGTestCase.js"></script>
<script src="resources/SVGAnimationTestCase.js"></script>
</head>
<body onload="runSMILTest()">
<h1>SVG 1.1 dynamic animation tests</h1>
<p id="description"></p>
<div id="console"></div>
<script src="script-tests/additive-from-to-width-animation.js"></script>
</body>
</html>
SVG 1.1 dynamic animation tests
This by animation for all XML property types
On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
PASS marker.orientAngle.animVal.value is -45
PASS feConvolveMatrix.divisor.animVal is 37.5
PASS feConvolveMatrix.orderX.animVal is 6
PASS feConvolveMatrix.orderY.animVal is 6
PASS feConvolveMatrix.targetX.animVal is 5
PASS feConvolveMatrix.kernelUnitLengthX.animVal is 20
PASS feConvolveMatrix.kernelUnitLengthY.animVal is 30
PASS feConvolveMatrix.kernelMatrix.animVal.numberOfItems is 9
PASS feConvolveMatrix.kernelMatrix.animVal.getItem(0).value is 0
PASS feConvolveMatrix.kernelMatrix.animVal.getItem(1).value is 1
PASS feConvolveMatrix.kernelMatrix.animVal.getItem(2).value is 0
PASS feConvolveMatrix.kernelMatrix.animVal.getItem(3).value is 0
PASS feConvolveMatrix.kernelMatrix.animVal.getItem(4).value is 1
PASS feConvolveMatrix.kernelMatrix.animVal.getItem(5).value is 0
PASS feConvolveMatrix.kernelMatrix.animVal.getItem(6).value is 0
PASS feConvolveMatrix.kernelMatrix.animVal.getItem(7).value is 1
PASS feConvolveMatrix.kernelMatrix.animVal.getItem(8).value is 0
PASS rect.y.animVal.value is 0
PASS text.dy.animVal.numberOfItems is 4
PASS text.dy.animVal.getItem(0).value is 5
PASS text.dy.animVal.getItem(1).value is -10
PASS text.dy.animVal.getItem(2).value is 10
PASS text.dy.animVal.getItem(3).value is -10
PASS svg.viewBox.animVal.x is 0
PASS svg.viewBox.animVal.y is 0
PASS svg.viewBox.animVal.width is 300
PASS svg.viewBox.animVal.height is 300
PASS polyline.animatedPoints.numberOfItems is 4
PASS polyline.animatedPoints.getItem(0).x is 0
PASS polyline.animatedPoints.getItem(0).y is 0
PASS polyline.animatedPoints.getItem(1).x is 10
PASS polyline.animatedPoints.getItem(1).y is 5
PASS polyline.animatedPoints.getItem(1).x is 10
PASS polyline.animatedPoints.getItem(1).y is 5
PASS polyline.animatedPoints.getItem(2).x is 0
PASS polyline.animatedPoints.getItem(2).y is 10
PASS path.transform.animVal.numberOfItems is 2
PASS path.transform.animVal.getItem(0).type is SVGTransform.SVG_TRANSFORM_ROTATE
PASS path.transform.animVal.getItem(0).angle is 45
PASS path.transform.animVal.getItem(1).type is SVGTransform.SVG_TRANSFORM_ROTATE
PASS path.transform.animVal.getItem(1).angle is 0
PASS colorComponents[1] is 0
PASS colorComponents[2] is 0
PASS colorComponents[3] is 0
PASS marker.orientAngle.baseVal.value is -45
PASS feConvolveMatrix.divisor.baseVal is 37.5
PASS feConvolveMatrix.orderX.baseVal is 6
PASS feConvolveMatrix.orderY.baseVal is 6
PASS feConvolveMatrix.targetX.baseVal is 5
PASS feConvolveMatrix.kernelUnitLengthX.baseVal is 20
PASS feConvolveMatrix.kernelUnitLengthY.baseVal is 30
PASS feConvolveMatrix.kernelMatrix.baseVal.numberOfItems is 9
PASS feConvolveMatrix.kernelMatrix.baseVal.getItem(0).value is 0
PASS feConvolveMatrix.kernelMatrix.baseVal.getItem(1).value is 1
PASS feConvolveMatrix.kernelMatrix.baseVal.getItem(2).value is 0
PASS feConvolveMatrix.kernelMatrix.baseVal.getItem(3).value is 0
PASS feConvolveMatrix.kernelMatrix.baseVal.getItem(4).value is 1
PASS feConvolveMatrix.kernelMatrix.baseVal.getItem(5).value is 0
PASS feConvolveMatrix.kernelMatrix.baseVal.getItem(6).value is 0
PASS feConvolveMatrix.kernelMatrix.baseVal.getItem(7).value is 1
PASS feConvolveMatrix.kernelMatrix.baseVal.getItem(8).value is 0
PASS rect.y.baseVal.value is 0
PASS text.dy.baseVal.numberOfItems is 4
PASS text.dy.baseVal.getItem(0).value is 5
PASS text.dy.baseVal.getItem(1).value is -10
PASS text.dy.baseVal.getItem(2).value is 10
PASS text.dy.baseVal.getItem(3).value is -10
PASS svg.viewBox.baseVal.x is 0
PASS svg.viewBox.baseVal.y is 0
PASS svg.viewBox.baseVal.width is 300
PASS svg.viewBox.baseVal.height is 300
PASS polyline.points.numberOfItems is 4
PASS polyline.points.getItem(0).x is 0
PASS polyline.points.getItem(0).y is 0
PASS polyline.points.getItem(1).x is 10
PASS polyline.points.getItem(1).y is 5
PASS polyline.points.getItem(1).x is 10
PASS polyline.points.getItem(1).y is 5
PASS polyline.points.getItem(2).x is 0
PASS polyline.points.getItem(2).y is 10
PASS path.transform.baseVal.numberOfItems is 1
PASS path.transform.baseVal.getItem(0).type is SVGTransform.SVG_TRANSFORM_ROTATE
PASS path.transform.baseVal.getItem(0).angle is 45
PASS marker.orientAngle.animVal.value is -22.5
PASS feConvolveMatrix.divisor.animVal is 28.75
PASS feConvolveMatrix.orderX.animVal is 5
PASS feConvolveMatrix.orderY.animVal is 5
PASS feConvolveMatrix.targetX.animVal is 3
PASS feConvolveMatrix.kernelUnitLengthX.animVal is 15
PASS feConvolveMatrix.kernelUnitLengthY.animVal is 20
PASS feConvolveMatrix.kernelMatrix.animVal.numberOfItems is 9
PASS feConvolveMatrix.kernelMatrix.animVal.getItem(0).value is 1
PASS feConvolveMatrix.kernelMatrix.animVal.getItem(1).value is 1.5
PASS feConvolveMatrix.kernelMatrix.animVal.getItem(2).value is 1.5
PASS feConvolveMatrix.kernelMatrix.animVal.getItem(3).value is 1
PASS feConvolveMatrix.kernelMatrix.animVal.getItem(4).value is 1.5
PASS feConvolveMatrix.kernelMatrix.animVal.getItem(5).value is 1.5
PASS feConvolveMatrix.kernelMatrix.animVal.getItem(6).value is 1
PASS feConvolveMatrix.kernelMatrix.animVal.getItem(7).value is 1.5
PASS feConvolveMatrix.kernelMatrix.animVal.getItem(8).value is 1.5
PASS rect.y.animVal.value is 50
PASS text.dy.animVal.numberOfItems is 4
PASS text.dy.animVal.getItem(0).value is 0
PASS text.dy.animVal.getItem(1).value is 0
PASS text.dy.animVal.getItem(2).value is 0
PASS text.dy.animVal.getItem(3).value is 0
PASS svg.viewBox.animVal.x is 0
PASS svg.viewBox.animVal.y is 0
PASS svg.viewBox.animVal.width is 250
PASS svg.viewBox.animVal.height is 250
PASS polyline.animatedPoints.numberOfItems is 4
PASS polyline.animatedPoints.getItem(0).x is 0
PASS polyline.animatedPoints.getItem(0).y is 0
PASS polyline.animatedPoints.getItem(1).x is 15
PASS polyline.animatedPoints.getItem(1).y is 7.5
PASS polyline.animatedPoints.getItem(1).x is 15
PASS polyline.animatedPoints.getItem(1).y is 7.5
PASS polyline.animatedPoints.getItem(2).x is 0
PASS polyline.animatedPoints.getItem(2).y is 15
PASS path.transform.animVal.numberOfItems is 2
PASS path.transform.animVal.getItem(0).type is SVGTransform.SVG_TRANSFORM_ROTATE
PASS path.transform.animVal.getItem(0).angle is 45
PASS path.transform.animVal.getItem(1).type is SVGTransform.SVG_TRANSFORM_ROTATE
PASS path.transform.animVal.getItem(1).angle is -22.5
PASS colorComponents[1] is 0
PASS colorComponents[2] is 63
PASS colorComponents[3] is 0
PASS marker.orientAngle.baseVal.value is -45
PASS feConvolveMatrix.divisor.baseVal is 37.5
PASS feConvolveMatrix.orderX.baseVal is 6
PASS feConvolveMatrix.orderY.baseVal is 6
PASS feConvolveMatrix.targetX.baseVal is 5
PASS feConvolveMatrix.kernelUnitLengthX.baseVal is 20
PASS feConvolveMatrix.kernelUnitLengthY.baseVal is 30
PASS feConvolveMatrix.kernelMatrix.baseVal.numberOfItems is 9
PASS feConvolveMatrix.kernelMatrix.baseVal.getItem(0).value is 0
PASS feConvolveMatrix.kernelMatrix.baseVal.getItem(1).value is 1
PASS feConvolveMatrix.kernelMatrix.baseVal.getItem(2).value is 0
PASS feConvolveMatrix.kernelMatrix.baseVal.getItem(3).value is 0
PASS feConvolveMatrix.kernelMatrix.baseVal.getItem(4).value is 1
PASS feConvolveMatrix.kernelMatrix.baseVal.getItem(5).value is 0
PASS feConvolveMatrix.kernelMatrix.baseVal.getItem(6).value is 0
PASS feConvolveMatrix.kernelMatrix.baseVal.getItem(7).value is 1
PASS feConvolveMatrix.kernelMatrix.baseVal.getItem(8).value is 0
PASS rect.y.baseVal.value is 0
PASS text.dy.baseVal.numberOfItems is 4
PASS text.dy.baseVal.getItem(0).value is 5
PASS text.dy.baseVal.getItem(1).value is -10
PASS text.dy.baseVal.getItem(2).value is 10
PASS text.dy.baseVal.getItem(3).value is -10
PASS svg.viewBox.baseVal.x is 0
PASS svg.viewBox.baseVal.y is 0
PASS svg.viewBox.baseVal.width is 300
PASS svg.viewBox.baseVal.height is 300
PASS polyline.points.numberOfItems is 4
PASS polyline.points.getItem(0).x is 0
PASS polyline.points.getItem(0).y is 0
PASS polyline.points.getItem(1).x is 10
PASS polyline.points.getItem(1).y is 5
PASS polyline.points.getItem(1).x is 10
PASS polyline.points.getItem(1).y is 5
PASS polyline.points.getItem(2).x is 0
PASS polyline.points.getItem(2).y is 10
PASS path.transform.baseVal.numberOfItems is 1
PASS path.transform.baseVal.getItem(0).type is SVGTransform.SVG_TRANSFORM_ROTATE
PASS path.transform.baseVal.getItem(0).angle is 45
PASS marker.orientAngle.animVal.value is 0
PASS feConvolveMatrix.divisor.animVal is 20
PASS feConvolveMatrix.orderX.animVal is 3
PASS feConvolveMatrix.orderY.animVal is 3
PASS feConvolveMatrix.targetX.animVal is 1
PASS feConvolveMatrix.kernelUnitLengthX.animVal is 10
PASS feConvolveMatrix.kernelUnitLengthY.animVal is 10
PASS feConvolveMatrix.kernelMatrix.animVal.numberOfItems is 9
PASS feConvolveMatrix.kernelMatrix.animVal.getItem(0).value is 2
PASS feConvolveMatrix.kernelMatrix.animVal.getItem(1).value is 2
PASS feConvolveMatrix.kernelMatrix.animVal.getItem(2).value is 3
PASS feConvolveMatrix.kernelMatrix.animVal.getItem(3).value is 2
PASS feConvolveMatrix.kernelMatrix.animVal.getItem(4).value is 2
PASS feConvolveMatrix.kernelMatrix.animVal.getItem(5).value is 3
PASS feConvolveMatrix.kernelMatrix.animVal.getItem(6).value is 2
PASS feConvolveMatrix.kernelMatrix.animVal.getItem(7).value is 2
PASS feConvolveMatrix.kernelMatrix.animVal.getItem(8).value is 3
PASS rect.y.animVal.value is 100
PASS text.dy.animVal.numberOfItems is 4
PASS text.dy.animVal.getItem(0).value is -5
PASS text.dy.animVal.getItem(1).value is 10
PASS text.dy.animVal.getItem(2).value is -10
PASS text.dy.animVal.getItem(3).value is 10
PASS svg.viewBox.animVal.x is 0
PASS svg.viewBox.animVal.y is 0
PASS svg.viewBox.animVal.width is 200
PASS svg.viewBox.animVal.height is 200
PASS polyline.animatedPoints.numberOfItems is 4
PASS polyline.animatedPoints.getItem(0).x is 0
PASS polyline.animatedPoints.getItem(0).y is 0
PASS polyline.animatedPoints.getItem(1).x is 20
PASS polyline.animatedPoints.getItem(1).y is 10
PASS polyline.animatedPoints.getItem(1).x is 20
PASS polyline.animatedPoints.getItem(1).y is 10
PASS polyline.animatedPoints.getItem(2).x is 0
PASS polyline.animatedPoints.getItem(2).y is 20
PASS path.transform.animVal.numberOfItems is 2
PASS path.transform.animVal.getItem(0).type is SVGTransform.SVG_TRANSFORM_ROTATE
PASS path.transform.animVal.getItem(0).angle is 45
PASS path.transform.animVal.getItem(1).type is SVGTransform.SVG_TRANSFORM_ROTATE
PASS path.transform.animVal.getItem(1).angle is -45
PASS colorComponents[1] is 0
PASS colorComponents[2] is 128
PASS colorComponents[3] is 0
PASS marker.orientAngle.baseVal.value is -45
PASS feConvolveMatrix.divisor.baseVal is 37.5
PASS feConvolveMatrix.orderX.baseVal is 6
PASS feConvolveMatrix.orderY.baseVal is 6
PASS feConvolveMatrix.targetX.baseVal is 5
PASS feConvolveMatrix.kernelUnitLengthX.baseVal is 20
PASS feConvolveMatrix.kernelUnitLengthY.baseVal is 30
PASS feConvolveMatrix.kernelMatrix.baseVal.numberOfItems is 9
PASS feConvolveMatrix.kernelMatrix.baseVal.getItem(0).value is 0
PASS feConvolveMatrix.kernelMatrix.baseVal.getItem(1).value is 1
PASS feConvolveMatrix.kernelMatrix.baseVal.getItem(2).value is 0
PASS feConvolveMatrix.kernelMatrix.baseVal.getItem(3).value is 0
PASS feConvolveMatrix.kernelMatrix.baseVal.getItem(4).value is 1
PASS feConvolveMatrix.kernelMatrix.baseVal.getItem(5).value is 0
PASS feConvolveMatrix.kernelMatrix.baseVal.getItem(6).value is 0
PASS feConvolveMatrix.kernelMatrix.baseVal.getItem(7).value is 1
PASS feConvolveMatrix.kernelMatrix.baseVal.getItem(8).value is 0
PASS rect.y.baseVal.value is 0
PASS text.dy.baseVal.numberOfItems is 4
PASS text.dy.baseVal.getItem(0).value is 5
PASS text.dy.baseVal.getItem(1).value is -10
PASS text.dy.baseVal.getItem(2).value is 10
PASS text.dy.baseVal.getItem(3).value is -10
PASS svg.viewBox.baseVal.x is 0
PASS svg.viewBox.baseVal.y is 0
PASS svg.viewBox.baseVal.width is 300
PASS svg.viewBox.baseVal.height is 300
PASS polyline.points.numberOfItems is 4
PASS polyline.points.getItem(0).x is 0
PASS polyline.points.getItem(0).y is 0
PASS polyline.points.getItem(1).x is 10
PASS polyline.points.getItem(1).y is 5
PASS polyline.points.getItem(1).x is 10
PASS polyline.points.getItem(1).y is 5
PASS polyline.points.getItem(2).x is 0
PASS polyline.points.getItem(2).y is 10
PASS path.transform.baseVal.numberOfItems is 1
PASS path.transform.baseVal.getItem(0).type is SVGTransform.SVG_TRANSFORM_ROTATE
PASS path.transform.baseVal.getItem(0).angle is 45
PASS successfullyParsed is true
TEST COMPLETE
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<html>
<head>
<script src="../../resources/js-test.js"></script>
<script src="resources/SVGTestCase.js"></script>
<script src="resources/SVGAnimationTestCase.js"></script>
</head>
<body onload="runSMILTest()">
<h1>SVG 1.1 dynamic animation tests</h1>
<p id="description"></p>
<div id="console"></div>
<script src="script-tests/additive-type-by-animation.js"></script>
</body>
</html>
SVG 1.1 dynamic animation tests
This tests values animation and additive='sum'
On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
PASS rect.width.animVal.value is 10
PASS rect.width.baseVal.value is 10
PASS rect.width.animVal.value is 60
PASS rect.width.baseVal.value is 10
PASS rect.width.animVal.value is 93.3
PASS rect.width.baseVal.value is 10
PASS rect.width.animVal.value is 143.33
PASS rect.width.baseVal.value is 60
PASS rect.width.animVal.value is 160
PASS rect.width.baseVal.value is 60
PASS rect.width.animVal.value is 160
PASS rect.width.baseVal.value is 60
PASS successfullyParsed is true
TEST COMPLETE
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<html>
<head>
<script src="../../resources/js-test.js"></script>
<script src="resources/SVGTestCase.js"></script>
<script src="resources/SVGAnimationTestCase.js"></script>
</head>
<body onload="runSMILTest()">
<h1>SVG 1.1 dynamic animation tests</h1>
<p id="description"></p>
<div id="console"></div>
<script src="script-tests/additive-values-width-animation.js"></script>
</body>
</html>
SVG 1.1 dynamic animation tests
Test calcMode spline with by animation. You should see a green 100x100 rect and only PASS messages
On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
PASS rect.x.animVal.value is 100
PASS rect.x.baseVal.value is 100
PASS rect.x.animVal.value is 18.8
PASS rect.x.baseVal.value is 100
PASS rect.x.animVal.value is 0
PASS rect.x.baseVal.value is 100
PASS rect.x.animVal.value is 100
PASS rect.x.baseVal.value is 100
PASS successfullyParsed is true
TEST COMPLETE
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<html>
<head>
<script src="../../resources/js-test.js"></script>
<script src="resources/SVGTestCase.js"></script>
<script src="resources/SVGAnimationTestCase.js"></script>
</head>
<body onload="runSMILTest()">
<h1>SVG 1.1 dynamic animation tests</h1>
<p id="description"></p>
<div id="console"></div>
<script src="script-tests/animate-calcMode-spline-by.js"></script>
</body>
</html>
SVG 1.1 dynamic animation tests
Test calcMode spline with from-by animation. You should see a green 100x100 rect and only PASS messages
On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
PASS rect.x.animVal.value is 100
PASS rect.x.baseVal.value is 100
PASS rect.x.animVal.value is 18.8
PASS rect.x.baseVal.value is 100
PASS rect.x.animVal.value is 0
PASS rect.x.baseVal.value is 100
PASS rect.x.animVal.value is 100
PASS rect.x.baseVal.value is 100
PASS successfullyParsed is true
TEST COMPLETE
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<html>
<head>
<script src="../../resources/js-test.js"></script>
<script src="resources/SVGTestCase.js"></script>
<script src="resources/SVGAnimationTestCase.js"></script>
</head>
<body onload="runSMILTest()">
<h1>SVG 1.1 dynamic animation tests</h1>
<p id="description"></p>
<div id="console"></div>
<script src="script-tests/animate-calcMode-spline-from-by.js"></script>
</body>
</html>
SVG 1.1 dynamic animation tests
Test calcMode spline with from-to animation. You should see a green 100x100 rect and only PASS messages
On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
PASS rect.x.animVal.value is 100
PASS rect.x.baseVal.value is 100
PASS rect.x.animVal.value is 18.8
PASS rect.x.baseVal.value is 100
PASS rect.x.animVal.value is 0
PASS rect.x.baseVal.value is 100
PASS rect.x.animVal.value is 100
PASS rect.x.baseVal.value is 100
PASS successfullyParsed is true
TEST COMPLETE
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<html>
<head>
<script src="../../resources/js-test.js"></script>
<script src="resources/SVGTestCase.js"></script>
<script src="resources/SVGAnimationTestCase.js"></script>
</head>
<body onload="runSMILTest()">
<h1>SVG 1.1 dynamic animation tests</h1>
<p id="description"></p>
<div id="console"></div>
<script src="script-tests/animate-calcMode-spline-from-to.js"></script>
</body>
</html>
<?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">
<!-- an1: Change width to 100 in 10s with a wobbling animation -->
<rect width="20" height="100" fill="green">
<animate id="an1" attributeName="width" dur="2s" values="0; 30; 20" accumulate="sum" repeatCount="5" fill="freeze"/>
</rect>
</svg>
<?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 id="svg" viewBox="0 0 300 300" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- All additive types except AnimatedPath are tested here -->
<defs>
<marker id="marker" viewBox="0 0 10 10" markerWidth="4" markerHeight="3" refX="1" refY="5" orient="-45deg">
<polyline id="polyline" points="0,0 10,5 0,10 1,5" fill="green"/>
</marker>
<filter id="filter">
<feConvolveMatrix id="feConvolveMatrix" kernelUnitLength="20 30" kernelMatrix="0 1 0 0 1 0 0 1 0" divisor="37.5" order="6 6" targetX="5" preserveAlpha="false"/>
</filter>
</defs>
<!-- Non-additive types AnimatedBoolean, AnimatedEnumeration, AnimatedPreserveAspectRatio, AnimatedString are tested in non-additive-type-by-animation.svg -->
<path id="path" d="M45,50 L55,50" transform="rotate(45)" stroke-width="10" stroke="green" marker-end="url(#marker)"/>
<rect id="rect" y="0" width="100" height="100" fill="black" filter="url(#filter)"/>
<text id="text" x="50" y="50" dy="5 -10 10 -10">ABCD</text>
<!-- AnimatedAngle -->
<animate id="an1" xlink:href="#marker" attributeName="orient" begin="0s" dur="4s" by="45deg" fill="freeze"/>
<!-- AnimatedColor -->
<animate xlink:href="#rect" attributeName="fill" begin="0s" dur="4s" by="green" fill="freeze"/>
<!-- AnimatedLength -->
<animate xlink:href="#rect" attributeName="y" begin="0s" dur="4s" by="100" fill="freeze"/>
<!-- AnimatedLengthList -->
<animate xlink:href="#text" attributeName="dy" begin="0s" dur="4s" by="-10 20 -20 20" fill="freeze"/>
<!-- AnimatedNumberOptionalNumber -->
<animate xlink:href="#feConvolveMatrix" attributeName="kernelUnitLength" begin="0s" dur="4s" by="-10 -20" fill="freeze"/>
<!-- AnimatedNumber -->
<animate xlink:href="#feConvolveMatrix" attributeName="divisor" begin="0s" dur="4s" by="-17.5" fill="freeze"/>
<!-- AnimatedNumberList -->
<animate xlink:href="#feConvolveMatrix" attributeName="kernelMatrix" begin="0s" dur="4s" by="2 1 3 2 1 3 2 1 3" fill="freeze"/>
<!-- AnimatedIntegerOptionalInteger -->
<animate xlink:href="#feConvolveMatrix" attributeName="order" begin="0s" dur="4s" by="-3 -3" fill="freeze"/>
<!-- AnimatedInteger -->
<animate xlink:href="#feConvolveMatrix" attributeName="targetX" begin="0s" dur="4s" by="-4" fill="freeze"/>
<!-- AnimatedPoints -->
<animate xlink:href="#polyline" attributeName="points" begin="0s" dur="4s" by="0,0 10,5 0,10 1,5" fill="freeze"/>
<!-- AnimatedRect -->
<animate xlink:href="#svg" attributeName="viewBox" begin="0s" dur="4s" by="0 0 -100 -100" fill="freeze"/>
<!-- AnimatedTransformList -->
<animateTransform xlink:href="#path" attributeName="transform" type="rotate" begin="0s" dur="4s" by="-45" fill="freeze"/>
</svg>
description("This tests multiple additive='sum' animations running at the same time");
embedSVGTestCase("resources/additive-from-to-width-animation.svg");
// Setup animation test
function sample1() {
shouldBeCloseEnough("rect.width.animVal.value", "20");
shouldBe("rect.width.baseVal.value", "10");
}
function sample2() {
shouldBeCloseEnough("rect.width.animVal.value", "60");
shouldBe("rect.width.baseVal.value", "10");
}
function sample3() {
shouldBeCloseEnough("rect.width.animVal.value", "100");
shouldBe("rect.width.baseVal.value", "10");
}
function executeTest() {
rect = rootSVGElement.ownerDocument.getElementsByTagName("rect")[0];
// 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]
["an1", 0.0, sample1],
["an1", 2.0, sample2],
["an1", 4.0, sample3],
["an1", 60.0, sample3]
];
runAnimationTest(expectedValues);
}
window.animationStartsImmediately = true;
var successfullyParsed = true;
description("This by animation for all XML property types");
embedSVGTestCase("resources/additive-type-by-animation.svg");
// Setup animation test
function checkBaseVal() {
shouldBe("marker.orientAngle.baseVal.value", "-45");
shouldBe("feConvolveMatrix.divisor.baseVal", "37.5");
shouldBe("feConvolveMatrix.orderX.baseVal", "6");
shouldBe("feConvolveMatrix.orderY.baseVal", "6");
shouldBe("feConvolveMatrix.targetX.baseVal", "5");
shouldBe("feConvolveMatrix.kernelUnitLengthX.baseVal", "20");
shouldBe("feConvolveMatrix.kernelUnitLengthY.baseVal", "30");
shouldBe("feConvolveMatrix.kernelMatrix.baseVal.numberOfItems", "9");
shouldBe("feConvolveMatrix.kernelMatrix.baseVal.getItem(0).value", "0");
shouldBe("feConvolveMatrix.kernelMatrix.baseVal.getItem(1).value", "1");
shouldBe("feConvolveMatrix.kernelMatrix.baseVal.getItem(2).value", "0");
shouldBe("feConvolveMatrix.kernelMatrix.baseVal.getItem(3).value", "0");
shouldBe("feConvolveMatrix.kernelMatrix.baseVal.getItem(4).value", "1");
shouldBe("feConvolveMatrix.kernelMatrix.baseVal.getItem(5).value", "0");
shouldBe("feConvolveMatrix.kernelMatrix.baseVal.getItem(6).value", "0");
shouldBe("feConvolveMatrix.kernelMatrix.baseVal.getItem(7).value", "1");
shouldBe("feConvolveMatrix.kernelMatrix.baseVal.getItem(8).value", "0");
shouldBe("rect.y.baseVal.value", "0");
shouldBe("text.dy.baseVal.numberOfItems", "4");
shouldBe("text.dy.baseVal.getItem(0).value", "5");
shouldBe("text.dy.baseVal.getItem(1).value", "-10");
shouldBe("text.dy.baseVal.getItem(2).value", "10");
shouldBe("text.dy.baseVal.getItem(3).value", "-10");
shouldBe("svg.viewBox.baseVal.x", "0");
shouldBe("svg.viewBox.baseVal.y", "0");
shouldBe("svg.viewBox.baseVal.width", "300");
shouldBe("svg.viewBox.baseVal.height", "300");
shouldBe("polyline.points.numberOfItems", "4");
shouldBe("polyline.points.getItem(0).x", "0");
shouldBe("polyline.points.getItem(0).y", "0");
shouldBe("polyline.points.getItem(1).x", "10");
shouldBe("polyline.points.getItem(1).y", "5");
shouldBe("polyline.points.getItem(1).x", "10");
shouldBe("polyline.points.getItem(1).y", "5");
shouldBe("polyline.points.getItem(2).x", "0");
shouldBe("polyline.points.getItem(2).y", "10");
shouldBe("path.transform.baseVal.numberOfItems", "1");
shouldBe("path.transform.baseVal.getItem(0).type", "SVGTransform.SVG_TRANSFORM_ROTATE");
shouldBe("path.transform.baseVal.getItem(0).angle", "45");
}
function sample1() {
shouldBeCloseEnough("marker.orientAngle.animVal.value", "-45");
shouldBeCloseEnough("feConvolveMatrix.divisor.animVal", "37.5");
shouldBeCloseEnough("feConvolveMatrix.orderX.animVal", "6");
shouldBeCloseEnough("feConvolveMatrix.orderY.animVal", "6");
shouldBeCloseEnough("feConvolveMatrix.targetX.animVal", "5");
shouldBeCloseEnough("feConvolveMatrix.kernelUnitLengthX.animVal", "20");
shouldBeCloseEnough("feConvolveMatrix.kernelUnitLengthY.animVal", "30");
shouldBe("feConvolveMatrix.kernelMatrix.animVal.numberOfItems", "9");
shouldBeCloseEnough("feConvolveMatrix.kernelMatrix.animVal.getItem(0).value", "0");
shouldBeCloseEnough("feConvolveMatrix.kernelMatrix.animVal.getItem(1).value", "1");
shouldBeCloseEnough("feConvolveMatrix.kernelMatrix.animVal.getItem(2).value", "0");
shouldBeCloseEnough("feConvolveMatrix.kernelMatrix.animVal.getItem(3).value", "0");
shouldBeCloseEnough("feConvolveMatrix.kernelMatrix.animVal.getItem(4).value", "1");
shouldBeCloseEnough("feConvolveMatrix.kernelMatrix.animVal.getItem(5).value", "0");
shouldBeCloseEnough("feConvolveMatrix.kernelMatrix.animVal.getItem(6).value", "0");
shouldBeCloseEnough("feConvolveMatrix.kernelMatrix.animVal.getItem(7).value", "1");
shouldBeCloseEnough("feConvolveMatrix.kernelMatrix.animVal.getItem(8).value", "0");
shouldBeCloseEnough("rect.y.animVal.value", "0");
shouldBe("text.dy.animVal.numberOfItems", "4");
shouldBeCloseEnough("text.dy.animVal.getItem(0).value", "5");
shouldBeCloseEnough("text.dy.animVal.getItem(1).value", "-10");
shouldBeCloseEnough("text.dy.animVal.getItem(2).value", "10");
shouldBeCloseEnough("text.dy.animVal.getItem(3).value", "-10");
shouldBeCloseEnough("svg.viewBox.animVal.x", "0");
shouldBeCloseEnough("svg.viewBox.animVal.y", "0");
shouldBeCloseEnough("svg.viewBox.animVal.width", "300");
shouldBeCloseEnough("svg.viewBox.animVal.height", "300");
shouldBe("polyline.animatedPoints.numberOfItems", "4");
shouldBeCloseEnough("polyline.animatedPoints.getItem(0).x", "0");
shouldBeCloseEnough("polyline.animatedPoints.getItem(0).y", "0");
shouldBeCloseEnough("polyline.animatedPoints.getItem(1).x", "10");
shouldBeCloseEnough("polyline.animatedPoints.getItem(1).y", "5");
shouldBeCloseEnough("polyline.animatedPoints.getItem(1).x", "10");
shouldBeCloseEnough("polyline.animatedPoints.getItem(1).y", "5");
shouldBeCloseEnough("polyline.animatedPoints.getItem(2).x", "0");
shouldBeCloseEnough("polyline.animatedPoints.getItem(2).y", "10");
shouldBe("path.transform.animVal.numberOfItems", "2");
shouldBe("path.transform.animVal.getItem(0).type", "SVGTransform.SVG_TRANSFORM_ROTATE");
shouldBe("path.transform.animVal.getItem(0).angle", "45");
shouldBe("path.transform.animVal.getItem(1).type", "SVGTransform.SVG_TRANSFORM_ROTATE");
shouldBeCloseEnough("path.transform.animVal.getItem(1).angle", "0");
expectFillColor(rect, 0, 0, 0);
checkBaseVal();
}
function sample2() {
shouldBeCloseEnough("marker.orientAngle.animVal.value", "-22.5");
shouldBeCloseEnough("feConvolveMatrix.divisor.animVal", "28.75");
shouldBeCloseEnough("feConvolveMatrix.orderX.animVal", "5");
shouldBeCloseEnough("feConvolveMatrix.orderY.animVal", "5");
shouldBeCloseEnough("feConvolveMatrix.targetX.animVal", "3");
shouldBeCloseEnough("feConvolveMatrix.kernelUnitLengthX.animVal", "15");
shouldBeCloseEnough("feConvolveMatrix.kernelUnitLengthY.animVal", "20");
shouldBe("feConvolveMatrix.kernelMatrix.animVal.numberOfItems", "9");
shouldBeCloseEnough("feConvolveMatrix.kernelMatrix.animVal.getItem(0).value", "1");
shouldBeCloseEnough("feConvolveMatrix.kernelMatrix.animVal.getItem(1).value", "1.5");
shouldBeCloseEnough("feConvolveMatrix.kernelMatrix.animVal.getItem(2).value", "1.5");
shouldBeCloseEnough("feConvolveMatrix.kernelMatrix.animVal.getItem(3).value", "1");
shouldBeCloseEnough("feConvolveMatrix.kernelMatrix.animVal.getItem(4).value", "1.5");
shouldBeCloseEnough("feConvolveMatrix.kernelMatrix.animVal.getItem(5).value", "1.5");
shouldBeCloseEnough("feConvolveMatrix.kernelMatrix.animVal.getItem(6).value", "1");
shouldBeCloseEnough("feConvolveMatrix.kernelMatrix.animVal.getItem(7).value", "1.5");
shouldBeCloseEnough("feConvolveMatrix.kernelMatrix.animVal.getItem(8).value", "1.5");
shouldBeCloseEnough("rect.y.animVal.value", "50");
shouldBe("text.dy.animVal.numberOfItems", "4");
shouldBeCloseEnough("text.dy.animVal.getItem(0).value", "0");
shouldBeCloseEnough("text.dy.animVal.getItem(1).value", "0");
shouldBeCloseEnough("text.dy.animVal.getItem(2).value", "0");
shouldBeCloseEnough("text.dy.animVal.getItem(3).value", "0");
shouldBeCloseEnough("svg.viewBox.animVal.x", "0");
shouldBeCloseEnough("svg.viewBox.animVal.y", "0");
shouldBeCloseEnough("svg.viewBox.animVal.width", "250");
shouldBeCloseEnough("svg.viewBox.animVal.height", "250");
shouldBe("polyline.animatedPoints.numberOfItems", "4");
shouldBeCloseEnough("polyline.animatedPoints.getItem(0).x", "0");
shouldBeCloseEnough("polyline.animatedPoints.getItem(0).y", "0");
shouldBeCloseEnough("polyline.animatedPoints.getItem(1).x", "15");
shouldBeCloseEnough("polyline.animatedPoints.getItem(1).y", "7.5");
shouldBeCloseEnough("polyline.animatedPoints.getItem(1).x", "15");
shouldBeCloseEnough("polyline.animatedPoints.getItem(1).y", "7.5");
shouldBeCloseEnough("polyline.animatedPoints.getItem(2).x", "0");
shouldBeCloseEnough("polyline.animatedPoints.getItem(2).y", "15");
shouldBe("path.transform.animVal.numberOfItems", "2");
shouldBe("path.transform.animVal.getItem(0).type", "SVGTransform.SVG_TRANSFORM_ROTATE");
shouldBe("path.transform.animVal.getItem(0).angle", "45");
shouldBe("path.transform.animVal.getItem(1).type", "SVGTransform.SVG_TRANSFORM_ROTATE");
shouldBeCloseEnough("path.transform.animVal.getItem(1).angle", "-22.5");
expectFillColor(rect, 0, 63, 0);
checkBaseVal();
}
function sample3() {
shouldBeCloseEnough("marker.orientAngle.animVal.value", "0");
shouldBeCloseEnough("feConvolveMatrix.divisor.animVal", "20");
shouldBeCloseEnough("feConvolveMatrix.orderX.animVal", "3");
shouldBeCloseEnough("feConvolveMatrix.orderY.animVal", "3");
shouldBeCloseEnough("feConvolveMatrix.targetX.animVal", "1");
shouldBeCloseEnough("feConvolveMatrix.kernelUnitLengthX.animVal", "10");
shouldBeCloseEnough("feConvolveMatrix.kernelUnitLengthY.animVal", "10");
shouldBe("feConvolveMatrix.kernelMatrix.animVal.numberOfItems", "9");
shouldBeCloseEnough("feConvolveMatrix.kernelMatrix.animVal.getItem(0).value", "2");
shouldBeCloseEnough("feConvolveMatrix.kernelMatrix.animVal.getItem(1).value", "2");
shouldBeCloseEnough("feConvolveMatrix.kernelMatrix.animVal.getItem(2).value", "3");
shouldBeCloseEnough("feConvolveMatrix.kernelMatrix.animVal.getItem(3).value", "2");
shouldBeCloseEnough("feConvolveMatrix.kernelMatrix.animVal.getItem(4).value", "2");
shouldBeCloseEnough("feConvolveMatrix.kernelMatrix.animVal.getItem(5).value", "3");
shouldBeCloseEnough("feConvolveMatrix.kernelMatrix.animVal.getItem(6).value", "2");
shouldBeCloseEnough("feConvolveMatrix.kernelMatrix.animVal.getItem(7).value", "2");
shouldBeCloseEnough("feConvolveMatrix.kernelMatrix.animVal.getItem(8).value", "3");
shouldBeCloseEnough("rect.y.animVal.value", "100");
shouldBe("text.dy.animVal.numberOfItems", "4");
shouldBeCloseEnough("text.dy.animVal.getItem(0).value", "-5");
shouldBeCloseEnough("text.dy.animVal.getItem(1).value", "10");
shouldBeCloseEnough("text.dy.animVal.getItem(2).value", "-10");
shouldBeCloseEnough("text.dy.animVal.getItem(3).value", "10");
shouldBeCloseEnough("svg.viewBox.animVal.x", "0");
shouldBeCloseEnough("svg.viewBox.animVal.y", "0");
shouldBeCloseEnough("svg.viewBox.animVal.width", "200");
shouldBeCloseEnough("svg.viewBox.animVal.height", "200");
shouldBe("polyline.animatedPoints.numberOfItems", "4");
shouldBeCloseEnough("polyline.animatedPoints.getItem(0).x", "0");
shouldBeCloseEnough("polyline.animatedPoints.getItem(0).y", "0");
shouldBeCloseEnough("polyline.animatedPoints.getItem(1).x", "20");
shouldBeCloseEnough("polyline.animatedPoints.getItem(1).y", "10");
shouldBeCloseEnough("polyline.animatedPoints.getItem(1).x", "20");
shouldBeCloseEnough("polyline.animatedPoints.getItem(1).y", "10");
shouldBeCloseEnough("polyline.animatedPoints.getItem(2).x", "0");
shouldBeCloseEnough("polyline.animatedPoints.getItem(2).y", "20");
shouldBe("path.transform.animVal.numberOfItems", "2");
shouldBe("path.transform.animVal.getItem(0).type", "SVGTransform.SVG_TRANSFORM_ROTATE");
shouldBe("path.transform.animVal.getItem(0).angle", "45");
shouldBe("path.transform.animVal.getItem(1).type", "SVGTransform.SVG_TRANSFORM_ROTATE");
shouldBeCloseEnough("path.transform.animVal.getItem(1).angle", "-45");
expectFillColor(rect, 0, 128, 0);
checkBaseVal();
}
function executeTest() {
marker = rootSVGElement.ownerDocument.getElementsByTagName("marker")[0];
filter = rootSVGElement.ownerDocument.getElementsByTagName("filter")[0];
feConvolveMatrix = rootSVGElement.ownerDocument.getElementsByTagName("feConvolveMatrix")[0];
rect = rootSVGElement.ownerDocument.getElementsByTagName("rect")[0];
svg = rootSVGElement.ownerDocument.getElementsByTagName("svg")[0];
path = rootSVGElement.ownerDocument.getElementsByTagName("path")[0];
polyline = rootSVGElement.ownerDocument.getElementsByTagName("polyline")[0];
text = rootSVGElement.ownerDocument.getElementsByTagName("text")[0];
const expectedValues = [
// [animationId, time, sampleCallback]
["an1", 0.0, sample1],
["an1", 2.0, sample2],
["an1", 4.001, sample3]
];
runAnimationTest(expectedValues);
}
window.animationStartsImmediately = true;
var successfullyParsed = true;
description("This tests values animation and additive='sum'");
embedSVGTestCase("resources/additive-values-width-animation.svg");
// Setup animation test
function sample1() {
shouldBeCloseEnough("rect.width.animVal.value", "10");
shouldBe("rect.width.baseVal.value", "10");
}
function sample2() {
shouldBeCloseEnough("rect.width.animVal.value", "60");
shouldBe("rect.width.baseVal.value", "10");
}
function sample3() {
shouldBeCloseEnough("rect.width.animVal.value", "93.3");
shouldBe("rect.width.baseVal.value", "10");
}
function changeBaseVal() {
// At 5s, only change the baseVal.
rect.width.baseVal.value = 60;
}
function sample4() {
shouldBeCloseEnough("rect.width.animVal.value", "143.33");
shouldBe("rect.width.baseVal.value", "60");
}
function sample5() {
shouldBeCloseEnough("rect.width.animVal.value", "160");
shouldBe("rect.width.baseVal.value", "60");
}
function executeTest() {
rect = rootSVGElement.ownerDocument.getElementsByTagName("rect")[0];
// 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]
["an1", 0.0, sample1],
["an1", 3.0, sample2],
["an1", 4.999, sample3],
["an1", 5.0, changeBaseVal],
["an1", 5.001, sample4],
["an1", 6.001, sample5],
["an1", 60.0, sample5]
];
runAnimationTest(expectedValues);
}
window.animationStartsImmediately = true;
var successfullyParsed = true;
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment