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

First batch of updated tests.

This is the first 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.

Bug 985335

Change-Id: Icd94f4345cda61f9328abfb18caeed2b747dde93
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1729088
Auto-Submit: Edvard Thörnros <edvardt@opera.com>
Commit-Queue: Stephen Chenney <schenney@chromium.org>
Reviewed-by: default avatarStephen Chenney <schenney@chromium.org>
Cr-Commit-Position: refs/heads/master@{#683137}
parent 20393561
// NOTE(edvardt):
// This file is a slimmed down wrapper for the old SVGAnimationTestCase.js,
// it has some convenience functions and should not be used for new tests.
// New tests should not build on this API as it's just meant to keep things
// working.
// Helper functions
const xlinkNS = "http://www.w3.org/1999/xlink"
function expectFillColor(element, red, green, blue) {
let color = window.getComputedStyle(element, null).fill;
var re = new RegExp("rgba?\\(([^, ]*), ([^, ]*), ([^, ]*)(?:, )?([^, ]*)\\)");
rgb = re.exec(color);
assert_approx_equals(Number(rgb[1]), red, 2.0);
assert_approx_equals(Number(rgb[2]), green, 2.0);
assert_approx_equals(Number(rgb[3]), blue, 2.0);
}
function expectColor(element, red, green, blue, property) {
if (typeof property != "string")
color = getComputedStyle(element).getPropertyValue("color");
else
color = getComputedStyle(element).getPropertyValue(property);
var re = new RegExp("rgba?\\(([^, ]*), ([^, ]*), ([^, ]*)(?:, )?([^, ]*)\\)");
rgb = re.exec(color);
assert_approx_equals(Number(rgb[1]), red, 2.0);
assert_approx_equals(Number(rgb[2]), green, 2.0);
assert_approx_equals(Number(rgb[3]), blue, 2.0);
}
function createSVGElement(type) {
return document.createElementNS("http://www.w3.org/2000/svg", type);
}
// Inspired by Layoutests/animations/animation-test-helpers.js // Inspired by Layoutests/animations/animation-test-helpers.js
function moveAnimationTimelineAndSample(index) { function moveAnimationTimelineAndSample(index) {
var animationId = expectedResults[index][0]; var animationId = expectedResults[index][0];
...@@ -10,7 +44,13 @@ function moveAnimationTimelineAndSample(index) { ...@@ -10,7 +44,13 @@ function moveAnimationTimelineAndSample(index) {
// The sample time is relative to the start time of the animation, take that into account. // The sample time is relative to the start time of the animation, take that into account.
rootSVGElement.setCurrentTime(newTime); rootSVGElement.setCurrentTime(newTime);
sampleCallback();
// NOTE(edvardt):
// This is a dumb hack, some of the old tests sampled before the animation start, this
// isn't technically part of the animation tests and is "impossible" to translate since
// tests start automatically. Thus I solved it by skipping it.
if (time != 0.0)
sampleCallback();
} }
var currentTest = 0; var currentTest = 0;
...@@ -38,13 +78,7 @@ function runAnimationTest(t, expected) { ...@@ -38,13 +78,7 @@ function runAnimationTest(t, expected) {
testCount = expectedResults.length; testCount = expectedResults.length;
currentTest = 0; currentTest = 0;
// Immediately sample, if the first time is zero. setTimeout(t.step_func(function () { sampleAnimation(this); }), 50);
if (expectedResults[0][1] == 0) {
expectedResults[0][2]();
++currentTest;
}
setTimeout(t.step_func(function () { sampleAnimation(this); }), 50);
} }
function smil_async_test(func) { function smil_async_test(func) {
......
description("Test 'by' animation of SVGNumberOptionalNumber.");
createSVGTestCase();
// Setup test document
var defs = createSVGElement("defs");
rootSVGElement.appendChild(defs);
var filter = createSVGElement("filter");
filter.setAttribute("id", "filter");
filter.setAttribute("x", "-30%");
filter.setAttribute("y", "-30%");
filter.setAttribute("width", "160%");
filter.setAttribute("height", "160%");
defs.appendChild(filter);
var feGaussianBlur = createSVGElement("feGaussianBlur");
feGaussianBlur.setAttribute("id", "blur");
feGaussianBlur.setAttribute("stdDeviation", "5");
filter.appendChild(feGaussianBlur);
var rect = createSVGElement("rect");
rect.setAttribute("id", "rect");
rect.setAttribute("x", "50");
rect.setAttribute("y", "50");
rect.setAttribute("width", "200");
rect.setAttribute("height", "200");
rect.setAttribute("fill", "green");
rect.setAttribute("filter", "url(#filter)");
rect.setAttribute("onclick", "executeTest()");
rootSVGElement.appendChild(rect);
var animate = createSVGElement("animate");
animate.setAttribute("id", "animation");
animate.setAttribute("attributeName", "stdDeviation");
animate.setAttribute("begin", "rect.click");
animate.setAttribute("dur", "4s");
animate.setAttribute("from", "5");
animate.setAttribute("by", "10");
feGaussianBlur.appendChild(animate);
// Setup animation test
function sample1() {
shouldBeCloseEnough("feGaussianBlur.stdDeviationX.animVal", "5");
shouldBeCloseEnough("feGaussianBlur.stdDeviationY.animVal", "5");
shouldBe("feGaussianBlur.stdDeviationX.baseVal", "5");
shouldBe("feGaussianBlur.stdDeviationY.baseVal", "5");
}
function sample2() {
shouldBeCloseEnough("feGaussianBlur.stdDeviationX.animVal", "10");
shouldBeCloseEnough("feGaussianBlur.stdDeviationY.animVal", "10");
shouldBe("feGaussianBlur.stdDeviationX.baseVal", "5");
shouldBe("feGaussianBlur.stdDeviationY.baseVal", "5");
}
function sample3() {
shouldBeCloseEnough("feGaussianBlur.stdDeviationX.animVal", "15");
shouldBeCloseEnough("feGaussianBlur.stdDeviationY.animVal", "15");
shouldBe("feGaussianBlur.stdDeviationX.baseVal", "5");
shouldBe("feGaussianBlur.stdDeviationY.baseVal", "5");
}
function executeTest() {
const expectedValues = [
// [animationId, time, sampleCallback]
["animation", 0.0, sample1],
["animation", 2.0, sample2],
["animation", 3.999, sample3],
["animation", 4.001, sample1]
];
runAnimationTest(expectedValues);
}
window.clickX = 60;
window.clickY = 60;
var successfullyParsed = true;
description("Test 'by' animation on path. You should see a green 100x100 path and only PASS messages");
createSVGTestCase();
// Setup test document
var path = createSVGElement("path");
path.setAttribute("id", "path");
path.setAttribute("d", "M 40 40 L 60 40 L 60 60 L 40 60 z");
path.setAttribute("fill", "green");
path.setAttribute("onclick", "executeTest()");
var animate = createSVGElement("animate");
animate.setAttribute("id", "animation");
animate.setAttribute("attributeName", "d");
animate.setAttribute("from", "M 40 40 L 60 40 L 60 60 L 40 60 z");
animate.setAttribute("by", "M 0 0 L 100 0 L 100 100 L 0 100 z");
animate.setAttribute("begin", "click");
animate.setAttribute("fill", "freeze");
animate.setAttribute("dur", "4s");
path.appendChild(animate);
rootSVGElement.appendChild(path);
// Setup animation test
function sample1() {
shouldBeEqualToString("path.getAttribute('d')", "M 40 40 L 60 40 L 60 60 L 40 60 z");
}
function sample2() {
shouldBeEqualToString("path.getAttribute('d')", "M 40 40 L 109.975 40 L 109.975 109.975 L 40 109.975 Z");
}
function sample3() {
shouldBeEqualToString("path.getAttribute('d')", "M 40 40 L 110.025 40 L 110.025 110.025 L 40 110.025 Z");
}
function sample4() {
shouldBeEqualToString("path.getAttribute('d')", "M 40 40 L 159.975 40 L 159.975 159.975 L 40 159.975 Z");
}
function sample5() {
shouldBeEqualToString("path.getAttribute('d')", "M 40 40 L 160 40 L 160 160 L 40 160 Z");
}
function executeTest() {
const expectedValues = [
// [animationId, time, sampleCallback]
["animation", 0.0, sample1],
["animation", 1.999, sample2],
["animation", 2.001, sample3],
["animation", 3.999, sample4],
["animation", 4.001, sample5]
];
runAnimationTest(expectedValues);
}
var successfullyParsed = true;
description("Tests from-to animation of points on polygons.");
createSVGTestCase();
// Setup test document
var poly = createSVGElement("polygon");
poly.setAttribute("id", "poly");
poly.setAttribute("fill", "green");
poly.setAttribute("points", "0,0 200,0 200,200 0,200");
poly.setAttribute("onclick", "executeTest()");
var animate = createSVGElement("animate");
animate.setAttribute("id", "animation");
animate.setAttribute("attributeName", "points");
animate.setAttribute("from", "0,0 200,0 200,200 0,200");
animate.setAttribute("to", "0,0 100,0 100,100 0,100");
animate.setAttribute("begin", "click");
animate.setAttribute("dur", "4s");
poly.appendChild(animate);
rootSVGElement.appendChild(poly);
// Setup animation test
function sample1() {
// Check initial/end conditions
shouldBeCloseEnough("poly.animatedPoints.getItem(2).x", "200");
shouldBeCloseEnough("poly.animatedPoints.getItem(2).y", "200");
shouldBe("poly.points.getItem(2).x", "200");
shouldBe("poly.points.getItem(2).y", "200");
}
function sample2() {
// Check half-time conditions
shouldBeCloseEnough("poly.animatedPoints.getItem(2).x", "150");
shouldBeCloseEnough("poly.animatedPoints.getItem(2).y", "150");
shouldBe("poly.points.getItem(2).x", "200");
shouldBe("poly.points.getItem(2).y", "200");
}
function sample3() {
// Check just before-end conditions
shouldBeCloseEnough("poly.animatedPoints.getItem(2).x", "100");
shouldBeCloseEnough("poly.animatedPoints.getItem(2).y", "100");
shouldBe("poly.points.getItem(2).x", "200");
shouldBe("poly.points.getItem(2).y", "200");
}
function executeTest() {
const expectedValues = [
// [animationId, time, sampleCallback]
["animation", 0.0, sample1],
["animation", 2.0, sample2],
["animation", 3.999, sample3],
["animation", 4.001, sample1]
];
runAnimationTest(expectedValues);
}
var successfullyParsed = true;
description("Tests from-by animation of points on polygons.");
createSVGTestCase();
// Setup test document
var poly = createSVGElement("polygon");
poly.setAttribute("id", "poly");
poly.setAttribute("fill", "green");
poly.setAttribute("points", "0,0 200,0 200,200 0,200");
poly.setAttribute("onclick", "executeTest()");
var animate = createSVGElement("animate");
animate.setAttribute("id", "animation");
animate.setAttribute("attributeName", "points");
animate.setAttribute("from", "0,0 200,0 200,200 0,200");
animate.setAttribute("by", "0,0 100,0 100,100 0,100");
animate.setAttribute("begin", "click");
animate.setAttribute("dur", "4s");
poly.appendChild(animate);
rootSVGElement.appendChild(poly);
// Setup animation test
function sample1() {
// Check initial/end conditions
shouldBeCloseEnough("poly.animatedPoints.getItem(2).x", "200");
shouldBeCloseEnough("poly.animatedPoints.getItem(2).y", "200");
shouldBe("poly.points.getItem(2).x", "200");
shouldBe("poly.points.getItem(2).y", "200");
}
function sample2() {
// Check half-time conditions
shouldBeCloseEnough("poly.animatedPoints.getItem(2).x", "250");
shouldBeCloseEnough("poly.animatedPoints.getItem(2).y", "250");
shouldBe("poly.points.getItem(2).x", "200");
shouldBe("poly.points.getItem(2).y", "200");
}
function sample3() {
// Check just before-end conditions
shouldBeCloseEnough("poly.animatedPoints.getItem(2).x", "300");
shouldBeCloseEnough("poly.animatedPoints.getItem(2).y", "300");
shouldBe("poly.points.getItem(2).x", "200");
shouldBe("poly.points.getItem(2).y", "200");
}
function executeTest() {
const expectedValues = [
// [animationId, time, sampleCallback]
["animation", 0.0, sample1],
["animation", 2.0, sample2],
["animation", 3.999, sample3],
["animation", 4.001, sample1]
];
runAnimationTest(expectedValues);
}
var successfullyParsed = true;
description("Test from-to SVGRect animation.");
createSVGTestCase();
// Setup test document
var rect = createSVGElement("rect");
rect.setAttribute("width", "100");
rect.setAttribute("height", "100");
rect.setAttribute("fill", "green");
rect.setAttribute("onclick", "executeTest()");
rootSVGElement.appendChild(rect);
rootSVGElement.setAttribute("id", "svg");
rootSVGElement.setAttribute("viewBox", "0 0 100 100");
var animate = createSVGElement("animate");
animate.setAttribute("id", "animation");
animate.setAttribute("attributeName", "viewBox");
animate.setAttribute("begin", "click");
animate.setAttribute("dur", "4s");
animate.setAttribute("from", "0 0 100 100");
animate.setAttribute("to", "50 50 50 50");
rootSVGElement.appendChild(animate);
// Setup animation test
function sample1() {
// Check initial/end conditions
shouldBeCloseEnough("rootSVGElement.viewBox.animVal.x", "0");
shouldBeCloseEnough("rootSVGElement.viewBox.animVal.y", "0");
shouldBeCloseEnough("rootSVGElement.viewBox.animVal.width", "100");
shouldBeCloseEnough("rootSVGElement.viewBox.animVal.height", "100");
shouldBe("rootSVGElement.viewBox.baseVal.x", "0");
shouldBe("rootSVGElement.viewBox.baseVal.y", "0");
shouldBe("rootSVGElement.viewBox.baseVal.width", "100");
shouldBe("rootSVGElement.viewBox.baseVal.height", "100");
}
function sample2() {
shouldBeCloseEnough("rootSVGElement.viewBox.animVal.x", "25");
shouldBeCloseEnough("rootSVGElement.viewBox.animVal.y", "25");
shouldBeCloseEnough("rootSVGElement.viewBox.animVal.width", "75");
shouldBeCloseEnough("rootSVGElement.viewBox.animVal.height", "75");
shouldBe("rootSVGElement.viewBox.baseVal.x", "0");
shouldBe("rootSVGElement.viewBox.baseVal.y", "0");
shouldBe("rootSVGElement.viewBox.baseVal.width", "100");
shouldBe("rootSVGElement.viewBox.baseVal.height", "100");
}
function sample3() {
shouldBeCloseEnough("rootSVGElement.viewBox.animVal.x", "50");
shouldBeCloseEnough("rootSVGElement.viewBox.animVal.y", "50");
shouldBeCloseEnough("rootSVGElement.viewBox.animVal.width", "50");
shouldBeCloseEnough("rootSVGElement.viewBox.animVal.height", "50");
shouldBe("rootSVGElement.viewBox.baseVal.x", "0");
shouldBe("rootSVGElement.viewBox.baseVal.y", "0");
shouldBe("rootSVGElement.viewBox.baseVal.width", "100");
shouldBe("rootSVGElement.viewBox.baseVal.height", "100");
}
function executeTest() {
const expectedValues = [
// [animationId, time, sampleCallback]
["animation", 0.0, sample1],
["animation", 2.0, sample2],
["animation", 3.999, sample3],
["animation", 4.001, sample1]
];
runAnimationTest(expectedValues);
}
var successfullyParsed = true;
description("Tests from-by SVGRect animation.");
createSVGTestCase();
// Setup test document
var rect = createSVGElement("rect");
rect.setAttribute("width", "100");
rect.setAttribute("height", "100");
rect.setAttribute("fill", "green");
rect.setAttribute("onclick", "executeTest()");
rootSVGElement.appendChild(rect);
rootSVGElement.setAttribute("id", "svg");
rootSVGElement.setAttribute("viewBox", "0 0 100 100");
var animate = createSVGElement("animate");
animate.setAttribute("id", "animation");
animate.setAttribute("attributeName", "viewBox");
animate.setAttribute("begin", "click");
animate.setAttribute("dur", "4s");
animate.setAttribute("from", "0 0 100 100");
animate.setAttribute("by", "50 50 50 50");
rootSVGElement.appendChild(animate);
// Setup animation test
function sample1() {
// Check initial/end conditions
shouldBeCloseEnough("rootSVGElement.viewBox.animVal.x", "0");
shouldBeCloseEnough("rootSVGElement.viewBox.animVal.y", "0");
shouldBeCloseEnough("rootSVGElement.viewBox.animVal.width", "100");
shouldBeCloseEnough("rootSVGElement.viewBox.animVal.height", "100");
shouldBe("rootSVGElement.viewBox.baseVal.x", "0");
shouldBe("rootSVGElement.viewBox.baseVal.y", "0");
shouldBe("rootSVGElement.viewBox.baseVal.width", "100");
shouldBe("rootSVGElement.viewBox.baseVal.height", "100");
}
function sample2() {
shouldBeCloseEnough("rootSVGElement.viewBox.animVal.x", "25");
shouldBeCloseEnough("rootSVGElement.viewBox.animVal.y", "25");
shouldBeCloseEnough("rootSVGElement.viewBox.animVal.width", "125");
shouldBeCloseEnough("rootSVGElement.viewBox.animVal.height", "125");
shouldBe("rootSVGElement.viewBox.baseVal.x", "0");
shouldBe("rootSVGElement.viewBox.baseVal.y", "0");
shouldBe("rootSVGElement.viewBox.baseVal.width", "100");
shouldBe("rootSVGElement.viewBox.baseVal.height", "100");
}
function sample3() {
shouldBeCloseEnough("rootSVGElement.viewBox.animVal.x", "50");
shouldBeCloseEnough("rootSVGElement.viewBox.animVal.y", "50");
shouldBeCloseEnough("rootSVGElement.viewBox.animVal.width", "150");
shouldBeCloseEnough("rootSVGElement.viewBox.animVal.height", "150");
shouldBe("rootSVGElement.viewBox.baseVal.x", "0");
shouldBe("rootSVGElement.viewBox.baseVal.y", "0");
shouldBe("rootSVGElement.viewBox.baseVal.width", "100");
shouldBe("rootSVGElement.viewBox.baseVal.height", "100");
}
function executeTest() {
const expectedValues = [
// [animationId, time, sampleCallback]
["animation", 0.0, sample1],
["animation", 2.0, sample2],
["animation", 3.999, sample3],
["animation", 4.001, sample1]
];
runAnimationTest(expectedValues);
}
var successfullyParsed = true;
description("Test animVal support for SVGAnimatedString animations.");
createSVGTestCase();
// Setup test document
var aElement = createSVGElement("a");
aElement.setAttribute("target", "base");
var textElement = createSVGElement("text");
textElement.setAttribute("id", "text");
textElement.setAttribute("y", "50");
textElement.textContent = "Test";
aElement.appendChild(textElement);
rootSVGElement.appendChild(aElement);
var animate = createSVGElement("animate");
animate.setAttribute("id", "animation");
animate.setAttribute("attributeName", "target");
animate.setAttribute("begin", "0s");
animate.setAttribute("dur", "4s");
animate.setAttribute("values", "a;b");
aElement.appendChild(animate);
// Setup animation test
function sample1() {
shouldBeEqualToString("aElement.target.animVal", "base");
shouldBeEqualToString("aElement.target.baseVal", "base");
}
function sample2() {
shouldBeEqualToString("aElement.target.animVal", "a");
shouldBeEqualToString("aElement.target.baseVal", "base");
}
function sample3() {
shouldBeEqualToString("aElement.target.animVal", "b");
shouldBeEqualToString("aElement.target.baseVal", "base");
}
function executeTest() {
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(expectedValues);
}
window.animationStartsImmediately = true;
var successfullyParsed = true;
description("Tests fallback to calcMode='discrete' on animation of SVGString with 'values'.");
createSVGTestCase();
// Setup test document
var rect = createSVGElement("rect");
rect.setAttribute("id", "rect");
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", "visibility");
animate.setAttribute("begin", "click");
animate.setAttribute("dur", "6s");
animate.setAttribute("calcMode", "linear");
animate.setAttribute("values", "visible ; hidden ; visible");
rect.appendChild(animate);
rootSVGElement.appendChild(rect);
// Setup animation test
function sample1() {
// Check initial/end conditions
shouldBe("getComputedStyle(rect).visibility", "'visible'");
shouldBeEqualToString("rect.style.visibility", "");
}
function sample2() {
shouldBe("getComputedStyle(rect).visibility", "'hidden'");
shouldBeEqualToString("rect.style.visibility", "");
}
function sample3() {
shouldBe("getComputedStyle(rect).visibility", "'visible'");
shouldBeEqualToString("rect.style.visibility", "");
}
function executeTest() {
const expectedValues = [
// [animationId, time, sampleCallback]
["animation", 1.999, sample1],
["animation", 2.001, sample2],
["animation", 5.999, sample3],
["animation", 6.001, sample1]
];
runAnimationTest(expectedValues);
}
var successfullyParsed = true;
description("Test accumulate=sum animation on SVGAnimateTransform.");
createSVGTestCase();
// Setup test document
var rect = createSVGElement("rect");
rect.setAttribute("id", "rect");
rect.setAttribute("width", "100");
rect.setAttribute("height", "100");
rect.setAttribute("fill", "green");
rect.setAttribute("onclick", "executeTest()");
var animate = createSVGElement("animateTransform");
animate.setAttribute("id", "animation");
animate.setAttribute("attributeName", "transform");
animate.setAttribute("type", "scale");
animate.setAttribute("from", "0,0");
animate.setAttribute("to", "2,2");
animate.setAttribute("type", "scale");
animate.setAttribute("fill", "freeze");
animate.setAttribute("accumulate", "sum");
animate.setAttribute("repeatCount", "3");
animate.setAttribute("additive", "sum");
animate.setAttribute("begin", "click");
animate.setAttribute("dur", "4s");
rect.appendChild(animate);
rootSVGElement.appendChild(rect);
// Setup animation test
function sample1() {
// Check initial/end conditions
shouldBe("rect.transform.animVal.numberOfItems", "1");
shouldBe("rect.transform.animVal.getItem(0).type", "SVGTransform.SVG_TRANSFORM_SCALE");
shouldBeCloseEnough("rect.transform.animVal.getItem(0).matrix.a", "0");
shouldBeCloseEnough("rect.transform.animVal.getItem(0).matrix.d", "0");
shouldBe("rect.transform.baseVal.numberOfItems", "0");
}
function sample2() {
shouldBe("rect.transform.animVal.numberOfItems", "1");
shouldBe("rect.transform.animVal.getItem(0).type", "SVGTransform.SVG_TRANSFORM_SCALE");
shouldBeCloseEnough("rect.transform.animVal.getItem(0).matrix.a", "1");
shouldBeCloseEnough("rect.transform.animVal.getItem(0).matrix.d", "1");
shouldBe("rect.transform.baseVal.numberOfItems", "0");
}
function sample3() {
shouldBe("rect.transform.animVal.numberOfItems", "1");
shouldBe("rect.transform.animVal.getItem(0).type", "SVGTransform.SVG_TRANSFORM_SCALE");
shouldBeCloseEnough("rect.transform.animVal.getItem(0).matrix.a", "2");
shouldBeCloseEnough("rect.transform.animVal.getItem(0).matrix.d", "2");
shouldBe("rect.transform.baseVal.numberOfItems", "0");
}
function sample4() {
shouldBe("rect.transform.animVal.numberOfItems", "1");
shouldBe("rect.transform.animVal.getItem(0).type", "SVGTransform.SVG_TRANSFORM_SCALE");
shouldBeCloseEnough("rect.transform.animVal.getItem(0).matrix.a", "3");
shouldBeCloseEnough("rect.transform.animVal.getItem(0).matrix.d", "3");
shouldBe("rect.transform.baseVal.numberOfItems", "0");
}
function sample5() {
shouldBe("rect.transform.animVal.numberOfItems", "1");
shouldBe("rect.transform.animVal.getItem(0).type", "SVGTransform.SVG_TRANSFORM_SCALE");
shouldBeCloseEnough("rect.transform.animVal.getItem(0).matrix.a", "4");
shouldBeCloseEnough("rect.transform.animVal.getItem(0).matrix.d", "4");
shouldBe("rect.transform.baseVal.numberOfItems", "0");
}
function sample6() {
shouldBe("rect.transform.animVal.numberOfItems", "1");
shouldBe("rect.transform.animVal.getItem(0).type", "SVGTransform.SVG_TRANSFORM_SCALE");
shouldBeCloseEnough("rect.transform.animVal.getItem(0).matrix.a", "5");
shouldBeCloseEnough("rect.transform.animVal.getItem(0).matrix.d", "5");
shouldBe("rect.transform.baseVal.numberOfItems", "0");
}
function sample7() {
shouldBe("rect.transform.animVal.numberOfItems", "1");
shouldBe("rect.transform.animVal.getItem(0).type", "SVGTransform.SVG_TRANSFORM_SCALE");
shouldBeCloseEnough("rect.transform.animVal.getItem(0).matrix.a", "6");
shouldBeCloseEnough("rect.transform.animVal.getItem(0).matrix.d", "6");
shouldBe("rect.transform.baseVal.numberOfItems", "0");
}
function executeTest() {
const expectedValues = [
// [animationId, time, sampleCallback]
["animation", 0.001, sample1],
["animation", 2.0, sample2],
["animation", 3.999, sample3],
["animation", 4.001, sample3],
["animation", 6.0, sample4],
["animation", 7.999, sample5],
["animation", 8.001, sample5],
["animation", 10.0, sample6],
["animation", 11.999, sample7],
["animation", 12.001, sample7],
["animation", 14.0, sample7],
["animation", 60.0, sample7]
];
runAnimationTest(expectedValues);
}
var successfullyParsed = true;
description("Test calcMode=discrete animation on SVGAnimateTransform.");
createSVGTestCase();
// Setup test document
var rect = createSVGElement("rect");
rect.setAttribute("id", "rect");
rect.setAttribute("width", "100");
rect.setAttribute("height", "100");
rect.setAttribute("x", "0");
rect.setAttribute("y", "0");
rect.setAttribute("fill", "green");
rect.setAttribute("onclick", "executeTest()");
var animate = createSVGElement("animateTransform");
animate.setAttribute("id", "animation");
animate.setAttribute("attributeName", "transform");
animate.setAttribute("type", "translate");
animate.setAttribute("from", "100,100");
animate.setAttribute("to", "0,0");
animate.setAttribute("type", "translate");
animate.setAttribute("calcMode", "discrete");
animate.setAttribute("begin", "click");
animate.setAttribute("dur", "4s");
rect.appendChild(animate);
rootSVGElement.appendChild(rect);
// Setup animation test
function sample1() {
// Check initial/end conditions
shouldBe("rect.transform.animVal.numberOfItems", "1");
shouldBe("rect.transform.animVal.getItem(0).type", "SVGTransform.SVG_TRANSFORM_TRANSLATE");
shouldBeCloseEnough("rect.transform.animVal.getItem(0).matrix.e", "100");
shouldBeCloseEnough("rect.transform.animVal.getItem(0).matrix.f", "100");
shouldBe("rect.transform.baseVal.numberOfItems", "0");
}
function sample2() {
shouldBe("rect.transform.animVal.numberOfItems", "1");
shouldBe("rect.transform.animVal.getItem(0).type", "SVGTransform.SVG_TRANSFORM_TRANSLATE");
shouldBeCloseEnough("rect.transform.animVal.getItem(0).matrix.e", "0");
shouldBeCloseEnough("rect.transform.animVal.getItem(0).matrix.f", "0");
shouldBe("rect.transform.baseVal.numberOfItems", "0");
}
function sample3() {
shouldBe("rect.transform.animVal.numberOfItems", "0");
shouldBe("rect.transform.baseVal.numberOfItems", "0");
}
function executeTest() {
const expectedValues = [
// [animationId, time, sampleCallback]
["animation", 0.001, sample1],
["animation", 1.999, sample1],
["animation", 2.001, sample2],
["animation", 3.999, sample2],
["animation", 4.001, sample3]
];
runAnimationTest(expectedValues);
}
var successfullyParsed = true;
SVG 1.1 dynamic animation tests
Test 'by' animation of SVGNumberOptionalNumber.
On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
PASS feGaussianBlur.stdDeviationX.animVal is 5
PASS feGaussianBlur.stdDeviationY.animVal is 5
PASS feGaussianBlur.stdDeviationX.baseVal is 5
PASS feGaussianBlur.stdDeviationY.baseVal is 5
PASS feGaussianBlur.stdDeviationX.animVal is 10
PASS feGaussianBlur.stdDeviationY.animVal is 10
PASS feGaussianBlur.stdDeviationX.baseVal is 5
PASS feGaussianBlur.stdDeviationY.baseVal is 5
PASS feGaussianBlur.stdDeviationX.animVal is 15
PASS feGaussianBlur.stdDeviationY.animVal is 15
PASS feGaussianBlur.stdDeviationX.baseVal is 5
PASS feGaussianBlur.stdDeviationY.baseVal is 5
PASS feGaussianBlur.stdDeviationX.animVal is 5
PASS feGaussianBlur.stdDeviationY.animVal is 5
PASS feGaussianBlur.stdDeviationX.baseVal is 5
PASS feGaussianBlur.stdDeviationY.baseVal is 5
PASS successfullyParsed is true
TEST COMPLETE
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN"> <!doctype html>
<!-- THIS HAS BEEN TRANSLATED BY A SCRIPT, THERE MIGHT BE ERRORS -->
<html> <html>
<head> <title>Test 'by' animation of SVGNumberOptionalNumber.</title>
<script src="../../resources/js-test.js"></script> <script src="../../resources/testharness.js"></script>
<script src="resources/SVGTestCase.js"></script> <script src="../../resources/testharnessreport.js"></script>
<script src="resources/SVGAnimationTestCase.js"></script> <script src="resources/SVGAnimationTestCase-testharness.js"></script>
</head>
<body onload="runSMILTest()"> <svg>
<h1>SVG 1.1 dynamic animation tests</h1> </svg>
<p id="description"></p>
<div id="console"></div> <script>
<script src="script-tests/svgnumberoptionalnumber-animation-4.js"></script> var rootSVGElement = document.querySelector("svg");
</body> var epsilon = 1.0;
</html>
// Setup test document
var defs = createSVGElement("defs");
rootSVGElement.appendChild(defs);
var filter = createSVGElement("filter");
filter.setAttribute("id", "filter");
filter.setAttribute("x", "-30%");
filter.setAttribute("y", "-30%");
filter.setAttribute("width", "160%");
filter.setAttribute("height", "160%");
defs.appendChild(filter);
var feGaussianBlur = createSVGElement("feGaussianBlur");
feGaussianBlur.setAttribute("id", "blur");
feGaussianBlur.setAttribute("stdDeviation", "5");
filter.appendChild(feGaussianBlur);
var rect = createSVGElement("rect");
rect.setAttribute("id", "rect");
rect.setAttribute("x", "50");
rect.setAttribute("y", "50");
rect.setAttribute("width", "200");
rect.setAttribute("height", "200");
rect.setAttribute("fill", "green");
rect.setAttribute("filter", "url(#filter)");
rect.setAttribute("onclick", "executeTest()");
rootSVGElement.appendChild(rect);
var animate = createSVGElement("animate");
animate.setAttribute("id", "animation");
animate.setAttribute("attributeName", "stdDeviation");
animate.setAttribute("begin", "0s");
animate.setAttribute("dur", "4s");
animate.setAttribute("from", "5");
animate.setAttribute("by", "10");
feGaussianBlur.appendChild(animate);
// Setup animation test
function sample1() {
assert_approx_equals(feGaussianBlur.stdDeviationX.animVal, 5, epsilon);
assert_approx_equals(feGaussianBlur.stdDeviationY.animVal, 5, epsilon);
assert_equals(feGaussianBlur.stdDeviationX.baseVal, 5);
assert_equals(feGaussianBlur.stdDeviationY.baseVal, 5);
}
function sample2() {
assert_approx_equals(feGaussianBlur.stdDeviationX.animVal, 10, epsilon);
assert_approx_equals(feGaussianBlur.stdDeviationY.animVal, 10, epsilon);
assert_equals(feGaussianBlur.stdDeviationX.baseVal, 5);
assert_equals(feGaussianBlur.stdDeviationY.baseVal, 5);
}
function sample3() {
assert_approx_equals(feGaussianBlur.stdDeviationX.animVal, 15, epsilon);
assert_approx_equals(feGaussianBlur.stdDeviationY.animVal, 15, epsilon);
assert_equals(feGaussianBlur.stdDeviationX.baseVal, 5);
assert_equals(feGaussianBlur.stdDeviationY.baseVal, 5);
}
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 = 60;
window.clickY = 60;
</script>
\ No newline at end of file
SVG 1.1 dynamic animation tests
Test 'by' animation on path. You should see a green 100x100 path and only PASS messages
On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
PASS path.getAttribute('d') is "M 40 40 L 60 40 L 60 60 L 40 60 z"
PASS path.getAttribute('d') is "M 40 40 L 109.975 40 L 109.975 109.975 L 40 109.975 Z"
PASS path.getAttribute('d') is "M 40 40 L 110.025 40 L 110.025 110.025 L 40 110.025 Z"
PASS path.getAttribute('d') is "M 40 40 L 159.975 40 L 159.975 159.975 L 40 159.975 Z"
PASS path.getAttribute('d') is "M 40 40 L 160 40 L 160 160 L 40 160 Z"
PASS successfullyParsed is true
TEST COMPLETE
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN"> <!doctype html>
<!-- THIS HAS BEEN TRANSLATED BY A SCRIPT, THERE MIGHT BE ERRORS -->
<html> <html>
<head> <title>Test 'by' animation on path. You should see a green 100x100 path and only PASS messages</title>
<script src="../../resources/js-test.js"></script> <script src="../../resources/testharness.js"></script>
<script src="resources/SVGTestCase.js"></script> <script src="../../resources/testharnessreport.js"></script>
<script src="resources/SVGAnimationTestCase.js"></script> <script src="resources/SVGAnimationTestCase-testharness.js"></script>
</head>
<body onload="runSMILTest()"> <svg>
<h1>SVG 1.1 dynamic animation tests</h1> </svg>
<p id="description"></p>
<div id="console"></div> <script>
<script src="script-tests/svgpath-animation-1.js"></script> var rootSVGElement = document.querySelector("svg");
</body> var epsilon = 1.0;
</html>
// Setup test document
var path = createSVGElement("path");
path.setAttribute("id", "path");
path.setAttribute("d", "M 40 40 L 60 40 L 60 60 L 40 60 z");
path.setAttribute("fill", "green");
path.setAttribute("onclick", "executeTest()");
var animate = createSVGElement("animate");
animate.setAttribute("id", "animation");
animate.setAttribute("attributeName", "d");
animate.setAttribute("from", "M 40 40 L 60 40 L 60 60 L 40 60 z");
animate.setAttribute("by", "M 0 0 L 100 0 L 100 100 L 0 100 z");
animate.setAttribute("begin", "0s");
animate.setAttribute("fill", "freeze");
animate.setAttribute("dur", "4s");
path.appendChild(animate);
rootSVGElement.appendChild(path);
// Setup animation test
function sample1() {
assert_equals(path.getAttribute('d'), "M 40 40 L 60 40 L 60 60 L 40 60 z");
}
function sample2() {
assert_equals(path.getAttribute('d'), "M 40 40 L 109.975 40 L 109.975 109.975 L 40 109.975 Z");
}
function sample3() {
assert_equals(path.getAttribute('d'), "M 40 40 L 110.025 40 L 110.025 110.025 L 40 110.025 Z");
}
function sample4() {
assert_equals(path.getAttribute('d'), "M 40 40 L 159.975 40 L 159.975 159.975 L 40 159.975 Z");
}
function sample5() {
assert_equals(path.getAttribute('d'), "M 40 40 L 160 40 L 160 160 L 40 160 Z");
}
smil_async_test((t) => {
const expectedValues = [
// [animationId, time, sampleCallback]
["animation", 0.0, sample1],
["animation", 1.999, sample2],
["animation", 2.001, sample3],
["animation", 3.999, sample4],
["animation", 4.001, sample5]
];
runAnimationTest(t, expectedValues);
});
</script>
\ No newline at end of file
SVG 1.1 dynamic animation tests
Tests from-to animation of points on polygons.
On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
PASS poly.animatedPoints.getItem(2).x is 200
PASS poly.animatedPoints.getItem(2).y is 200
PASS poly.points.getItem(2).x is 200
PASS poly.points.getItem(2).y is 200
PASS poly.animatedPoints.getItem(2).x is 150
PASS poly.animatedPoints.getItem(2).y is 150
PASS poly.points.getItem(2).x is 200
PASS poly.points.getItem(2).y is 200
PASS poly.animatedPoints.getItem(2).x is 100
PASS poly.animatedPoints.getItem(2).y is 100
PASS poly.points.getItem(2).x is 200
PASS poly.points.getItem(2).y is 200
PASS poly.animatedPoints.getItem(2).x is 200
PASS poly.animatedPoints.getItem(2).y is 200
PASS poly.points.getItem(2).x is 200
PASS poly.points.getItem(2).y is 200
PASS successfullyParsed is true
TEST COMPLETE
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN"> <!doctype html>
<!-- THIS HAS BEEN TRANSLATED BY A SCRIPT, THERE MIGHT BE ERRORS -->
<html> <html>
<head> <title>Tests from-to animation of points on polygons.</title>
<script src="../../resources/js-test.js"></script> <script src="../../resources/testharness.js"></script>
<script src="resources/SVGTestCase.js"></script> <script src="../../resources/testharnessreport.js"></script>
<script src="resources/SVGAnimationTestCase.js"></script> <script src="resources/SVGAnimationTestCase-testharness.js"></script>
</head>
<body onload="runSMILTest()"> <svg>
<h1>SVG 1.1 dynamic animation tests</h1> </svg>
<p id="description"></p>
<div id="console"></div> <script>
<script src="script-tests/svgpointlist-animation-1.js"></script> var rootSVGElement = document.querySelector("svg");
</body> var epsilon = 1.0;
</html>
// Setup test document
var poly = createSVGElement("polygon");
poly.setAttribute("id", "poly");
poly.setAttribute("fill", "green");
poly.setAttribute("points", "0,0 200,0 200,200 0,200");
poly.setAttribute("onclick", "executeTest()");
var animate = createSVGElement("animate");
animate.setAttribute("id", "animation");
animate.setAttribute("attributeName", "points");
animate.setAttribute("from", "0,0 200,0 200,200 0,200");
animate.setAttribute("to", "0,0 100,0 100,100 0,100");
animate.setAttribute("begin", "0s");
animate.setAttribute("dur", "4s");
poly.appendChild(animate);
rootSVGElement.appendChild(poly);
// Setup animation test
function sample1() {
// Check initial/end conditions
assert_approx_equals(poly.animatedPoints.getItem(2).x, 200, epsilon);
assert_approx_equals(poly.animatedPoints.getItem(2).y, 200, epsilon);
assert_equals(poly.points.getItem(2).x, 200);
assert_equals(poly.points.getItem(2).y, 200);
}
function sample2() {
// Check half-time conditions
assert_approx_equals(poly.animatedPoints.getItem(2).x, 150, epsilon);
assert_approx_equals(poly.animatedPoints.getItem(2).y, 150, epsilon);
assert_equals(poly.points.getItem(2).x, 200);
assert_equals(poly.points.getItem(2).y, 200);
}
function sample3() {
// Check just before-end conditions
assert_approx_equals(poly.animatedPoints.getItem(2).x, 100, epsilon);
assert_approx_equals(poly.animatedPoints.getItem(2).y, 100, epsilon);
assert_equals(poly.points.getItem(2).x, 200);
assert_equals(poly.points.getItem(2).y, 200);
}
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);
});
</script>
\ No newline at end of file
SVG 1.1 dynamic animation tests
Tests from-by animation of points on polygons.
On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
PASS poly.animatedPoints.getItem(2).x is 200
PASS poly.animatedPoints.getItem(2).y is 200
PASS poly.points.getItem(2).x is 200
PASS poly.points.getItem(2).y is 200
PASS poly.animatedPoints.getItem(2).x is 250
PASS poly.animatedPoints.getItem(2).y is 250
PASS poly.points.getItem(2).x is 200
PASS poly.points.getItem(2).y is 200
PASS poly.animatedPoints.getItem(2).x is 300
PASS poly.animatedPoints.getItem(2).y is 300
PASS poly.points.getItem(2).x is 200
PASS poly.points.getItem(2).y is 200
PASS poly.animatedPoints.getItem(2).x is 200
PASS poly.animatedPoints.getItem(2).y is 200
PASS poly.points.getItem(2).x is 200
PASS poly.points.getItem(2).y is 200
PASS successfullyParsed is true
TEST COMPLETE
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN"> <!doctype html>
<!-- THIS HAS BEEN TRANSLATED BY A SCRIPT, THERE MIGHT BE ERRORS -->
<html> <html>
<head> <title>Tests from-by animation of points on polygons.</title>
<script src="../../resources/js-test.js"></script> <script src="../../resources/testharness.js"></script>
<script src="resources/SVGTestCase.js"></script> <script src="../../resources/testharnessreport.js"></script>
<script src="resources/SVGAnimationTestCase.js"></script> <script src="resources/SVGAnimationTestCase-testharness.js"></script>
</head>
<body onload="runSMILTest()"> <svg>
<h1>SVG 1.1 dynamic animation tests</h1> </svg>
<p id="description"></p>
<div id="console"></div> <script>
<script src="script-tests/svgpointlist-animation-2.js"></script> var rootSVGElement = document.querySelector("svg");
</body> var epsilon = 1.0;
</html>
// Setup test document
var poly = createSVGElement("polygon");
poly.setAttribute("id", "poly");
poly.setAttribute("fill", "green");
poly.setAttribute("points", "0,0 200,0 200,200 0,200");
poly.setAttribute("onclick", "executeTest()");
var animate = createSVGElement("animate");
animate.setAttribute("id", "animation");
animate.setAttribute("attributeName", "points");
animate.setAttribute("from", "0,0 200,0 200,200 0,200");
animate.setAttribute("by", "0,0 100,0 100,100 0,100");
animate.setAttribute("begin", "0s");
animate.setAttribute("dur", "4s");
poly.appendChild(animate);
rootSVGElement.appendChild(poly);
// Setup animation test
function sample1() {
// Check initial/end conditions
assert_approx_equals(poly.animatedPoints.getItem(2).x, 200, epsilon);
assert_approx_equals(poly.animatedPoints.getItem(2).y, 200, epsilon);
assert_equals(poly.points.getItem(2).x, 200);
assert_equals(poly.points.getItem(2).y, 200);
}
function sample2() {
// Check half-time conditions
assert_approx_equals(poly.animatedPoints.getItem(2).x, 250, epsilon);
assert_approx_equals(poly.animatedPoints.getItem(2).y, 250, epsilon);
assert_equals(poly.points.getItem(2).x, 200);
assert_equals(poly.points.getItem(2).y, 200);
}
function sample3() {
// Check just before-end conditions
assert_approx_equals(poly.animatedPoints.getItem(2).x, 300, epsilon);
assert_approx_equals(poly.animatedPoints.getItem(2).y, 300, epsilon);
assert_equals(poly.points.getItem(2).x, 200);
assert_equals(poly.points.getItem(2).y, 200);
}
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);
});
</script>
\ No newline at end of file
SVG 1.1 dynamic animation tests
Test from-to SVGRect animation.
On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
PASS rootSVGElement.viewBox.animVal.x is 0
PASS rootSVGElement.viewBox.animVal.y is 0
PASS rootSVGElement.viewBox.animVal.width is 100
PASS rootSVGElement.viewBox.animVal.height is 100
PASS rootSVGElement.viewBox.baseVal.x is 0
PASS rootSVGElement.viewBox.baseVal.y is 0
PASS rootSVGElement.viewBox.baseVal.width is 100
PASS rootSVGElement.viewBox.baseVal.height is 100
PASS rootSVGElement.viewBox.animVal.x is 25
PASS rootSVGElement.viewBox.animVal.y is 25
PASS rootSVGElement.viewBox.animVal.width is 75
PASS rootSVGElement.viewBox.animVal.height is 75
PASS rootSVGElement.viewBox.baseVal.x is 0
PASS rootSVGElement.viewBox.baseVal.y is 0
PASS rootSVGElement.viewBox.baseVal.width is 100
PASS rootSVGElement.viewBox.baseVal.height is 100
PASS rootSVGElement.viewBox.animVal.x is 50
PASS rootSVGElement.viewBox.animVal.y is 50
PASS rootSVGElement.viewBox.animVal.width is 50
PASS rootSVGElement.viewBox.animVal.height is 50
PASS rootSVGElement.viewBox.baseVal.x is 0
PASS rootSVGElement.viewBox.baseVal.y is 0
PASS rootSVGElement.viewBox.baseVal.width is 100
PASS rootSVGElement.viewBox.baseVal.height is 100
PASS rootSVGElement.viewBox.animVal.x is 0
PASS rootSVGElement.viewBox.animVal.y is 0
PASS rootSVGElement.viewBox.animVal.width is 100
PASS rootSVGElement.viewBox.animVal.height is 100
PASS rootSVGElement.viewBox.baseVal.x is 0
PASS rootSVGElement.viewBox.baseVal.y is 0
PASS rootSVGElement.viewBox.baseVal.width is 100
PASS rootSVGElement.viewBox.baseVal.height is 100
PASS successfullyParsed is true
TEST COMPLETE
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN"> <!doctype html>
<!-- THIS HAS BEEN TRANSLATED BY A SCRIPT, THERE MIGHT BE ERRORS -->
<html> <html>
<head> <title>Test from-to SVGRect animation.</title>
<script src="../../resources/js-test.js"></script> <script src="../../resources/testharness.js"></script>
<script src="resources/SVGTestCase.js"></script> <script src="../../resources/testharnessreport.js"></script>
<script src="resources/SVGAnimationTestCase.js"></script> <script src="resources/SVGAnimationTestCase-testharness.js"></script>
</head>
<body onload="runSMILTest()"> <svg>
<h1>SVG 1.1 dynamic animation tests</h1> </svg>
<p id="description"></p>
<div id="console"></div> <script>
<script src="script-tests/svgrect-animation-1.js"></script> var rootSVGElement = document.querySelector("svg");
</body> var epsilon = 1.0;
</html>
// Setup test document
var rect = createSVGElement("rect");
rect.setAttribute("width", "100");
rect.setAttribute("height", "100");
rect.setAttribute("fill", "green");
rect.setAttribute("onclick", "executeTest()");
rootSVGElement.appendChild(rect);
rootSVGElement.setAttribute("id", "svg");
rootSVGElement.setAttribute("viewBox", "0 0 100 100");
var animate = createSVGElement("animate");
animate.setAttribute("id", "animation");
animate.setAttribute("attributeName", "viewBox");
animate.setAttribute("begin", "0s");
animate.setAttribute("dur", "4s");
animate.setAttribute("from", "0 0 100 100");
animate.setAttribute("to", "50 50 50 50");
rootSVGElement.appendChild(animate);
// Setup animation test
function sample1() {
// Check initial/end conditions
assert_approx_equals(rootSVGElement.viewBox.animVal.x, 0, epsilon);
assert_approx_equals(rootSVGElement.viewBox.animVal.y, 0, epsilon);
assert_approx_equals(rootSVGElement.viewBox.animVal.width, 100, epsilon);
assert_approx_equals(rootSVGElement.viewBox.animVal.height, 100, epsilon);
assert_equals(rootSVGElement.viewBox.baseVal.x, 0);
assert_equals(rootSVGElement.viewBox.baseVal.y, 0);
assert_equals(rootSVGElement.viewBox.baseVal.width, 100);
assert_equals(rootSVGElement.viewBox.baseVal.height, 100);
}
function sample2() {
assert_approx_equals(rootSVGElement.viewBox.animVal.x, 25, epsilon);
assert_approx_equals(rootSVGElement.viewBox.animVal.y, 25, epsilon);
assert_approx_equals(rootSVGElement.viewBox.animVal.width, 75, epsilon);
assert_approx_equals(rootSVGElement.viewBox.animVal.height, 75, epsilon);
assert_equals(rootSVGElement.viewBox.baseVal.x, 0);
assert_equals(rootSVGElement.viewBox.baseVal.y, 0);
assert_equals(rootSVGElement.viewBox.baseVal.width, 100);
assert_equals(rootSVGElement.viewBox.baseVal.height, 100);
}
function sample3() {
assert_approx_equals(rootSVGElement.viewBox.animVal.x, 50, epsilon);
assert_approx_equals(rootSVGElement.viewBox.animVal.y, 50, epsilon);
assert_approx_equals(rootSVGElement.viewBox.animVal.width, 50, epsilon);
assert_approx_equals(rootSVGElement.viewBox.animVal.height, 50, epsilon);
assert_equals(rootSVGElement.viewBox.baseVal.x, 0);
assert_equals(rootSVGElement.viewBox.baseVal.y, 0);
assert_equals(rootSVGElement.viewBox.baseVal.width, 100);
assert_equals(rootSVGElement.viewBox.baseVal.height, 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);
});
</script>
\ No newline at end of file
SVG 1.1 dynamic animation tests
Tests from-by SVGRect animation.
On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
PASS rootSVGElement.viewBox.animVal.x is 0
PASS rootSVGElement.viewBox.animVal.y is 0
PASS rootSVGElement.viewBox.animVal.width is 100
PASS rootSVGElement.viewBox.animVal.height is 100
PASS rootSVGElement.viewBox.baseVal.x is 0
PASS rootSVGElement.viewBox.baseVal.y is 0
PASS rootSVGElement.viewBox.baseVal.width is 100
PASS rootSVGElement.viewBox.baseVal.height is 100
PASS rootSVGElement.viewBox.animVal.x is 25
PASS rootSVGElement.viewBox.animVal.y is 25
PASS rootSVGElement.viewBox.animVal.width is 125
PASS rootSVGElement.viewBox.animVal.height is 125
PASS rootSVGElement.viewBox.baseVal.x is 0
PASS rootSVGElement.viewBox.baseVal.y is 0
PASS rootSVGElement.viewBox.baseVal.width is 100
PASS rootSVGElement.viewBox.baseVal.height is 100
PASS rootSVGElement.viewBox.animVal.x is 50
PASS rootSVGElement.viewBox.animVal.y is 50
PASS rootSVGElement.viewBox.animVal.width is 150
PASS rootSVGElement.viewBox.animVal.height is 150
PASS rootSVGElement.viewBox.baseVal.x is 0
PASS rootSVGElement.viewBox.baseVal.y is 0
PASS rootSVGElement.viewBox.baseVal.width is 100
PASS rootSVGElement.viewBox.baseVal.height is 100
PASS rootSVGElement.viewBox.animVal.x is 0
PASS rootSVGElement.viewBox.animVal.y is 0
PASS rootSVGElement.viewBox.animVal.width is 100
PASS rootSVGElement.viewBox.animVal.height is 100
PASS rootSVGElement.viewBox.baseVal.x is 0
PASS rootSVGElement.viewBox.baseVal.y is 0
PASS rootSVGElement.viewBox.baseVal.width is 100
PASS rootSVGElement.viewBox.baseVal.height is 100
PASS successfullyParsed is true
TEST COMPLETE
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN"> <!doctype html>
<!-- THIS HAS BEEN TRANSLATED BY A SCRIPT, THERE MIGHT BE ERRORS -->
<html> <html>
<head> <title>Tests from-by SVGRect animation.</title>
<script src="../../resources/js-test.js"></script> <script src="../../resources/testharness.js"></script>
<script src="resources/SVGTestCase.js"></script> <script src="../../resources/testharnessreport.js"></script>
<script src="resources/SVGAnimationTestCase.js"></script> <script src="resources/SVGAnimationTestCase-testharness.js"></script>
</head>
<body onload="runSMILTest()"> <svg>
<h1>SVG 1.1 dynamic animation tests</h1> </svg>
<p id="description"></p>
<div id="console"></div> <script>
<script src="script-tests/svgrect-animation-2.js"></script> var rootSVGElement = document.querySelector("svg");
</body> var epsilon = 1.0;
</html>
// Setup test document
var rect = createSVGElement("rect");
rect.setAttribute("width", "100");
rect.setAttribute("height", "100");
rect.setAttribute("fill", "green");
rect.setAttribute("onclick", "executeTest()");
rootSVGElement.appendChild(rect);
rootSVGElement.setAttribute("id", "svg");
rootSVGElement.setAttribute("viewBox", "0 0 100 100");
var animate = createSVGElement("animate");
animate.setAttribute("id", "animation");
animate.setAttribute("attributeName", "viewBox");
animate.setAttribute("begin", "0s");
animate.setAttribute("dur", "4s");
animate.setAttribute("from", "0 0 100 100");
animate.setAttribute("by", "50 50 50 50");
rootSVGElement.appendChild(animate);
// Setup animation test
function sample1() {
// Check initial/end conditions
assert_approx_equals(rootSVGElement.viewBox.animVal.x, 0, epsilon);
assert_approx_equals(rootSVGElement.viewBox.animVal.y, 0, epsilon);
assert_approx_equals(rootSVGElement.viewBox.animVal.width, 100, epsilon);
assert_approx_equals(rootSVGElement.viewBox.animVal.height, 100, epsilon);
assert_equals(rootSVGElement.viewBox.baseVal.x, 0);
assert_equals(rootSVGElement.viewBox.baseVal.y, 0);
assert_equals(rootSVGElement.viewBox.baseVal.width, 100);
assert_equals(rootSVGElement.viewBox.baseVal.height, 100);
}
function sample2() {
assert_approx_equals(rootSVGElement.viewBox.animVal.x, 25, epsilon);
assert_approx_equals(rootSVGElement.viewBox.animVal.y, 25, epsilon);
assert_approx_equals(rootSVGElement.viewBox.animVal.width, 125, epsilon);
assert_approx_equals(rootSVGElement.viewBox.animVal.height, 125, epsilon);
assert_equals(rootSVGElement.viewBox.baseVal.x, 0);
assert_equals(rootSVGElement.viewBox.baseVal.y, 0);
assert_equals(rootSVGElement.viewBox.baseVal.width, 100);
assert_equals(rootSVGElement.viewBox.baseVal.height, 100);
}
function sample3() {
assert_approx_equals(rootSVGElement.viewBox.animVal.x, 50, epsilon);
assert_approx_equals(rootSVGElement.viewBox.animVal.y, 50, epsilon);
assert_approx_equals(rootSVGElement.viewBox.animVal.width, 150, epsilon);
assert_approx_equals(rootSVGElement.viewBox.animVal.height, 150, epsilon);
assert_equals(rootSVGElement.viewBox.baseVal.x, 0);
assert_equals(rootSVGElement.viewBox.baseVal.y, 0);
assert_equals(rootSVGElement.viewBox.baseVal.width, 100);
assert_equals(rootSVGElement.viewBox.baseVal.height, 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);
});
</script>
\ No newline at end of file
SVG 1.1 dynamic animation tests
Test
Test animVal support for SVGAnimatedString animations.
On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
PASS aElement.target.animVal is "base"
PASS aElement.target.baseVal is "base"
PASS aElement.target.animVal is "a"
PASS aElement.target.baseVal is "base"
PASS aElement.target.animVal is "a"
PASS aElement.target.baseVal is "base"
PASS aElement.target.animVal is "b"
PASS aElement.target.baseVal is "base"
PASS aElement.target.animVal is "b"
PASS aElement.target.baseVal is "base"
PASS aElement.target.animVal is "base"
PASS aElement.target.baseVal is "base"
PASS successfullyParsed is true
TEST COMPLETE
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN"> <!doctype html>
<!-- THIS HAS BEEN TRANSLATED BY A SCRIPT, THERE MIGHT BE ERRORS -->
<html> <html>
<head> <title>Test animVal support for SVGAnimatedString animations.</title>
<script src="../../resources/js-test.js"></script> <script src="../../resources/testharness.js"></script>
<script src="resources/SVGTestCase.js"></script> <script src="../../resources/testharnessreport.js"></script>
<script src="resources/SVGAnimationTestCase.js"></script> <script src="resources/SVGAnimationTestCase-testharness.js"></script>
</head>
<body onload="runSMILTest()"> <svg>
<h1>SVG 1.1 dynamic animation tests</h1> </svg>
<p id="description"></p>
<div id="console"></div> <script>
<script src="script-tests/svgstring-animation-1.js"></script> var rootSVGElement = document.querySelector("svg");
</body> var epsilon = 1.0;
</html>
// Setup test document
var aElement = createSVGElement("a");
aElement.setAttribute("target", "base");
var textElement = createSVGElement("text");
textElement.setAttribute("id", "text");
textElement.setAttribute("y", "50");
textElement.textContent = "Test";
aElement.appendChild(textElement);
rootSVGElement.appendChild(aElement);
var animate = createSVGElement("animate");
animate.setAttribute("id", "animation");
animate.setAttribute("attributeName", "target");
animate.setAttribute("begin", "0s");
animate.setAttribute("dur", "4s");
animate.setAttribute("values", "a;b");
aElement.appendChild(animate);
// Setup animation test
function sample1() {
assert_equals(aElement.target.animVal, "base");
assert_equals(aElement.target.baseVal, "base");
}
function sample2() {
assert_equals(aElement.target.animVal, "a");
assert_equals(aElement.target.baseVal, "base");
}
function sample3() {
assert_equals(aElement.target.animVal, "b");
assert_equals(aElement.target.baseVal, "base");
}
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);
});
window.animationStartsImmediately = true;
</script>
\ No newline at end of file
SVG 1.1 dynamic animation tests
Tests fallback to calcMode='discrete' on animation of SVGString with 'values'.
On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
PASS getComputedStyle(rect).visibility is 'visible'
PASS rect.style.visibility is ""
PASS getComputedStyle(rect).visibility is 'hidden'
PASS rect.style.visibility is ""
PASS getComputedStyle(rect).visibility is 'visible'
PASS rect.style.visibility is ""
PASS getComputedStyle(rect).visibility is 'visible'
PASS rect.style.visibility is ""
PASS successfullyParsed is true
TEST COMPLETE
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN"> <!doctype html>
<!-- THIS HAS BEEN TRANSLATED BY A SCRIPT, THERE MIGHT BE ERRORS -->
<html> <html>
<head> <title>Tests fallback to calcMode='discrete' on animation of SVGString with 'values'.</title>
<script src="../../resources/js-test.js"></script> <script src="../../resources/testharness.js"></script>
<script src="resources/SVGTestCase.js"></script> <script src="../../resources/testharnessreport.js"></script>
<script src="resources/SVGAnimationTestCase.js"></script> <script src="resources/SVGAnimationTestCase-testharness.js"></script>
</head>
<body onload="runSMILTest()"> <svg>
<h1>SVG 1.1 dynamic animation tests</h1> </svg>
<p id="description"></p>
<div id="console"></div> <script>
<script src="script-tests/svgstring-animation-fallback-to-discrete.js"></script> var rootSVGElement = document.querySelector("svg");
</body> var epsilon = 1.0;
</html>
// Setup test document
var rect = createSVGElement("rect");
rect.setAttribute("id", "rect");
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", "visibility");
animate.setAttribute("begin", "0s");
animate.setAttribute("dur", "6s");
animate.setAttribute("calcMode", "linear");
animate.setAttribute("values", "visible ; hidden ; visible");
rect.appendChild(animate);
rootSVGElement.appendChild(rect);
// Setup animation test
function sample1() {
// Check initial/end conditions
assert_equals(getComputedStyle(rect).visibility, 'visible');
assert_equals(rect.style.visibility, "");
}
function sample2() {
assert_equals(getComputedStyle(rect).visibility, 'hidden');
assert_equals(rect.style.visibility, "");
}
function sample3() {
assert_equals(getComputedStyle(rect).visibility, 'visible');
assert_equals(rect.style.visibility, "");
}
smil_async_test((t) => {
const expectedValues = [
// [animationId, time, sampleCallback]
["animation", 1.999, sample1],
["animation", 2.001, sample2],
["animation", 5.999, sample3],
["animation", 6.001, sample1]
];
runAnimationTest(t, expectedValues);
});
</script>
\ No newline at end of file
SVG 1.1 dynamic animation tests
Test accumulate=sum animation on SVGAnimateTransform.
On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
PASS rect.transform.animVal.numberOfItems is 1
PASS rect.transform.animVal.getItem(0).type is SVGTransform.SVG_TRANSFORM_SCALE
PASS rect.transform.animVal.getItem(0).matrix.a is 0
PASS rect.transform.animVal.getItem(0).matrix.d is 0
PASS rect.transform.baseVal.numberOfItems is 0
PASS rect.transform.animVal.numberOfItems is 1
PASS rect.transform.animVal.getItem(0).type is SVGTransform.SVG_TRANSFORM_SCALE
PASS rect.transform.animVal.getItem(0).matrix.a is 1
PASS rect.transform.animVal.getItem(0).matrix.d is 1
PASS rect.transform.baseVal.numberOfItems is 0
PASS rect.transform.animVal.numberOfItems is 1
PASS rect.transform.animVal.getItem(0).type is SVGTransform.SVG_TRANSFORM_SCALE
PASS rect.transform.animVal.getItem(0).matrix.a is 2
PASS rect.transform.animVal.getItem(0).matrix.d is 2
PASS rect.transform.baseVal.numberOfItems is 0
PASS rect.transform.animVal.numberOfItems is 1
PASS rect.transform.animVal.getItem(0).type is SVGTransform.SVG_TRANSFORM_SCALE
PASS rect.transform.animVal.getItem(0).matrix.a is 2
PASS rect.transform.animVal.getItem(0).matrix.d is 2
PASS rect.transform.baseVal.numberOfItems is 0
PASS rect.transform.animVal.numberOfItems is 1
PASS rect.transform.animVal.getItem(0).type is SVGTransform.SVG_TRANSFORM_SCALE
PASS rect.transform.animVal.getItem(0).matrix.a is 3
PASS rect.transform.animVal.getItem(0).matrix.d is 3
PASS rect.transform.baseVal.numberOfItems is 0
PASS rect.transform.animVal.numberOfItems is 1
PASS rect.transform.animVal.getItem(0).type is SVGTransform.SVG_TRANSFORM_SCALE
PASS rect.transform.animVal.getItem(0).matrix.a is 4
PASS rect.transform.animVal.getItem(0).matrix.d is 4
PASS rect.transform.baseVal.numberOfItems is 0
PASS rect.transform.animVal.numberOfItems is 1
PASS rect.transform.animVal.getItem(0).type is SVGTransform.SVG_TRANSFORM_SCALE
PASS rect.transform.animVal.getItem(0).matrix.a is 4
PASS rect.transform.animVal.getItem(0).matrix.d is 4
PASS rect.transform.baseVal.numberOfItems is 0
PASS rect.transform.animVal.numberOfItems is 1
PASS rect.transform.animVal.getItem(0).type is SVGTransform.SVG_TRANSFORM_SCALE
PASS rect.transform.animVal.getItem(0).matrix.a is 5
PASS rect.transform.animVal.getItem(0).matrix.d is 5
PASS rect.transform.baseVal.numberOfItems is 0
PASS rect.transform.animVal.numberOfItems is 1
PASS rect.transform.animVal.getItem(0).type is SVGTransform.SVG_TRANSFORM_SCALE
PASS rect.transform.animVal.getItem(0).matrix.a is 6
PASS rect.transform.animVal.getItem(0).matrix.d is 6
PASS rect.transform.baseVal.numberOfItems is 0
PASS rect.transform.animVal.numberOfItems is 1
PASS rect.transform.animVal.getItem(0).type is SVGTransform.SVG_TRANSFORM_SCALE
PASS rect.transform.animVal.getItem(0).matrix.a is 6
PASS rect.transform.animVal.getItem(0).matrix.d is 6
PASS rect.transform.baseVal.numberOfItems is 0
PASS rect.transform.animVal.numberOfItems is 1
PASS rect.transform.animVal.getItem(0).type is SVGTransform.SVG_TRANSFORM_SCALE
PASS rect.transform.animVal.getItem(0).matrix.a is 6
PASS rect.transform.animVal.getItem(0).matrix.d is 6
PASS rect.transform.baseVal.numberOfItems is 0
PASS rect.transform.animVal.numberOfItems is 1
PASS rect.transform.animVal.getItem(0).type is SVGTransform.SVG_TRANSFORM_SCALE
PASS rect.transform.animVal.getItem(0).matrix.a is 6
PASS rect.transform.animVal.getItem(0).matrix.d is 6
PASS rect.transform.baseVal.numberOfItems is 0
PASS successfullyParsed is true
TEST COMPLETE
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN"> <!doctype html>
<!-- THIS HAS BEEN TRANSLATED BY A SCRIPT, THERE MIGHT BE ERRORS -->
<html> <html>
<head> <title>Test accumulate=sum animation on SVGAnimateTransform.</title>
<script src="../../resources/js-test.js"></script> <script src="../../resources/testharness.js"></script>
<script src="resources/SVGTestCase.js"></script> <script src="../../resources/testharnessreport.js"></script>
<script src="resources/SVGAnimationTestCase.js"></script> <script src="resources/SVGAnimationTestCase-testharness.js"></script>
</head>
<body onload="runSMILTest()"> <svg>
<h1>SVG 1.1 dynamic animation tests</h1> </svg>
<p id="description"></p>
<div id="console"></div> <script>
<script src="script-tests/svgtransform-animation-1.js"></script> var rootSVGElement = document.querySelector("svg");
</body> var epsilon = 1.0;
</html>
// Setup test document
var rect = createSVGElement("rect");
rect.setAttribute("id", "rect");
rect.setAttribute("width", "100");
rect.setAttribute("height", "100");
rect.setAttribute("fill", "green");
rect.setAttribute("onclick", "executeTest()");
var animate = createSVGElement("animateTransform");
animate.setAttribute("id", "animation");
animate.setAttribute("attributeName", "transform");
animate.setAttribute("type", "scale");
animate.setAttribute("from", "0,0");
animate.setAttribute("to", "2,2");
animate.setAttribute("type", "scale");
animate.setAttribute("fill", "freeze");
animate.setAttribute("accumulate", "sum");
animate.setAttribute("repeatCount", "3");
animate.setAttribute("additive", "sum");
animate.setAttribute("begin", "0s");
animate.setAttribute("dur", "4s");
rect.appendChild(animate);
rootSVGElement.appendChild(rect);
// Setup animation test
function sample1() {
// Check initial/end conditions
assert_equals(rect.transform.animVal.numberOfItems, 1);
assert_equals(rect.transform.animVal.getItem(0).type, SVGTransform.SVG_TRANSFORM_SCALE);
assert_approx_equals(rect.transform.animVal.getItem(0).matrix.a, 0, epsilon);
assert_approx_equals(rect.transform.animVal.getItem(0).matrix.d, 0, epsilon);
assert_equals(rect.transform.baseVal.numberOfItems, 0);
}
function sample2() {
assert_equals(rect.transform.animVal.numberOfItems, 1);
assert_equals(rect.transform.animVal.getItem(0).type, SVGTransform.SVG_TRANSFORM_SCALE);
assert_approx_equals(rect.transform.animVal.getItem(0).matrix.a, 1, epsilon);
assert_approx_equals(rect.transform.animVal.getItem(0).matrix.d, 1, epsilon);
assert_equals(rect.transform.baseVal.numberOfItems, 0);
}
function sample3() {
assert_equals(rect.transform.animVal.numberOfItems, 1);
assert_equals(rect.transform.animVal.getItem(0).type, SVGTransform.SVG_TRANSFORM_SCALE);
assert_approx_equals(rect.transform.animVal.getItem(0).matrix.a, 2, epsilon);
assert_approx_equals(rect.transform.animVal.getItem(0).matrix.d, 2, epsilon);
assert_equals(rect.transform.baseVal.numberOfItems, 0);
}
function sample4() {
assert_equals(rect.transform.animVal.numberOfItems, 1);
assert_equals(rect.transform.animVal.getItem(0).type, SVGTransform.SVG_TRANSFORM_SCALE);
assert_approx_equals(rect.transform.animVal.getItem(0).matrix.a, 3, epsilon);
assert_approx_equals(rect.transform.animVal.getItem(0).matrix.d, 3, epsilon);
assert_equals(rect.transform.baseVal.numberOfItems, 0);
}
function sample5() {
assert_equals(rect.transform.animVal.numberOfItems, 1);
assert_equals(rect.transform.animVal.getItem(0).type, SVGTransform.SVG_TRANSFORM_SCALE);
assert_approx_equals(rect.transform.animVal.getItem(0).matrix.a, 4, epsilon);
assert_approx_equals(rect.transform.animVal.getItem(0).matrix.d, 4, epsilon);
assert_equals(rect.transform.baseVal.numberOfItems, 0);
}
function sample6() {
assert_equals(rect.transform.animVal.numberOfItems, 1);
assert_equals(rect.transform.animVal.getItem(0).type, SVGTransform.SVG_TRANSFORM_SCALE);
assert_approx_equals(rect.transform.animVal.getItem(0).matrix.a, 5, epsilon);
assert_approx_equals(rect.transform.animVal.getItem(0).matrix.d, 5, epsilon);
assert_equals(rect.transform.baseVal.numberOfItems, 0);
}
function sample7() {
assert_equals(rect.transform.animVal.numberOfItems, 1);
assert_equals(rect.transform.animVal.getItem(0).type, SVGTransform.SVG_TRANSFORM_SCALE);
assert_approx_equals(rect.transform.animVal.getItem(0).matrix.a, 6, epsilon);
assert_approx_equals(rect.transform.animVal.getItem(0).matrix.d, 6, epsilon);
assert_equals(rect.transform.baseVal.numberOfItems, 0);
}
smil_async_test((t) => {
const expectedValues = [
// [animationId, time, sampleCallback]
["animation", 0.001, sample1],
["animation", 2.0, sample2],
["animation", 3.999, sample3],
["animation", 4.001, sample3],
["animation", 6.0, sample4],
["animation", 7.999, sample5],
["animation", 8.001, sample5],
["animation", 10.0, sample6],
["animation", 11.999, sample7],
["animation", 12.001, sample7],
["animation", 14.0, sample7],
["animation", 60.0, sample7]
];
runAnimationTest(t, expectedValues);
});
</script>
\ No newline at end of file
SVG 1.1 dynamic animation tests
Test calcMode=discrete animation on SVGAnimateTransform.
On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
PASS rect.transform.animVal.numberOfItems is 1
PASS rect.transform.animVal.getItem(0).type is SVGTransform.SVG_TRANSFORM_TRANSLATE
PASS rect.transform.animVal.getItem(0).matrix.e is 100
PASS rect.transform.animVal.getItem(0).matrix.f is 100
PASS rect.transform.baseVal.numberOfItems is 0
PASS rect.transform.animVal.numberOfItems is 1
PASS rect.transform.animVal.getItem(0).type is SVGTransform.SVG_TRANSFORM_TRANSLATE
PASS rect.transform.animVal.getItem(0).matrix.e is 100
PASS rect.transform.animVal.getItem(0).matrix.f is 100
PASS rect.transform.baseVal.numberOfItems is 0
PASS rect.transform.animVal.numberOfItems is 1
PASS rect.transform.animVal.getItem(0).type is SVGTransform.SVG_TRANSFORM_TRANSLATE
PASS rect.transform.animVal.getItem(0).matrix.e is 0
PASS rect.transform.animVal.getItem(0).matrix.f is 0
PASS rect.transform.baseVal.numberOfItems is 0
PASS rect.transform.animVal.numberOfItems is 1
PASS rect.transform.animVal.getItem(0).type is SVGTransform.SVG_TRANSFORM_TRANSLATE
PASS rect.transform.animVal.getItem(0).matrix.e is 0
PASS rect.transform.animVal.getItem(0).matrix.f is 0
PASS rect.transform.baseVal.numberOfItems is 0
PASS rect.transform.animVal.numberOfItems is 0
PASS rect.transform.baseVal.numberOfItems is 0
PASS successfullyParsed is true
TEST COMPLETE
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN"> <!doctype html>
<!-- THIS HAS BEEN TRANSLATED BY A SCRIPT, THERE MIGHT BE ERRORS -->
<html> <html>
<head> <title>Test calcMode=discrete animation on SVGAnimateTransform.</title>
<script src="../../resources/js-test.js"></script> <script src="../../resources/testharness.js"></script>
<script src="resources/SVGTestCase.js"></script> <script src="../../resources/testharnessreport.js"></script>
<script src="resources/SVGAnimationTestCase.js"></script> <script src="resources/SVGAnimationTestCase-testharness.js"></script>
</head>
<body onload="runSMILTest()"> <svg>
<h1>SVG 1.1 dynamic animation tests</h1> </svg>
<p id="description"></p>
<div id="console"></div> <script>
<script src="script-tests/svgtransform-animation-discrete.js"></script> var rootSVGElement = document.querySelector("svg");
</body> var epsilon = 1.0;
</html>
// Setup test document
var rect = createSVGElement("rect");
rect.setAttribute("id", "rect");
rect.setAttribute("width", "100");
rect.setAttribute("height", "100");
rect.setAttribute("x", "0");
rect.setAttribute("y", "0");
rect.setAttribute("fill", "green");
rect.setAttribute("onclick", "executeTest()");
var animate = createSVGElement("animateTransform");
animate.setAttribute("id", "animation");
animate.setAttribute("attributeName", "transform");
animate.setAttribute("type", "translate");
animate.setAttribute("from", "100,100");
animate.setAttribute("to", "0,0");
animate.setAttribute("type", "translate");
animate.setAttribute("calcMode", "discrete");
animate.setAttribute("begin", "0s");
animate.setAttribute("dur", "4s");
rect.appendChild(animate);
rootSVGElement.appendChild(rect);
// Setup animation test
function sample1() {
// Check initial/end conditions
assert_equals(rect.transform.animVal.numberOfItems, 1);
assert_equals(rect.transform.animVal.getItem(0).type, SVGTransform.SVG_TRANSFORM_TRANSLATE);
assert_approx_equals(rect.transform.animVal.getItem(0).matrix.e, 100, epsilon);
assert_approx_equals(rect.transform.animVal.getItem(0).matrix.f, 100, epsilon);
assert_equals(rect.transform.baseVal.numberOfItems, 0);
}
function sample2() {
assert_equals(rect.transform.animVal.numberOfItems, 1);
assert_equals(rect.transform.animVal.getItem(0).type, SVGTransform.SVG_TRANSFORM_TRANSLATE);
assert_approx_equals(rect.transform.animVal.getItem(0).matrix.e, 0, epsilon);
assert_approx_equals(rect.transform.animVal.getItem(0).matrix.f, 0, epsilon);
assert_equals(rect.transform.baseVal.numberOfItems, 0);
}
function sample3() {
assert_equals(rect.transform.animVal.numberOfItems, 0);
assert_equals(rect.transform.baseVal.numberOfItems, 0);
}
smil_async_test((t) => {
const expectedValues = [
// [animationId, time, sampleCallback]
["animation", 0.001, sample1],
["animation", 1.999, sample1],
["animation", 2.001, sample2],
["animation", 3.999, sample2],
["animation", 4.001, sample3]
];
runAnimationTest(t, expectedValues);
});
</script>
\ No newline at end of file
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