mirror of
https://github.com/servo/servo.git
synced 2025-08-18 11:55:39 +01:00
Update web-platform-tests to revision 66b4fab488695f98d15ad75b549e302a8d29f865
This commit is contained in:
WPT Sync Bot
parent
b6cdf93198
commit
b09e82fc9f
161 changed files with 3705 additions and 671 deletions
|
|
@ -0,0 +1,54 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<meta charset="utf-8">
|
||||
<title>Test the behavior of one discard applied on another discard</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"?>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<animate id="anim" attributeName="visibility" to="visible" begin="0s" end="5s"/>
|
||||
<rect x="0" y="0" width="50" height="50" fill="rgb(255, 0, 0)">
|
||||
<set id="set1" attributeName="fill" to="rgb(0, 255, 0)" begin="2s" fill="freeze"/>
|
||||
<set id="set2" attributeName="fill" to="rgb(0, 0, 255)" begin="3s" fill="freeze"/>
|
||||
</rect>
|
||||
|
||||
<discard id="discard1" xlink:href="#set1" begin="1s"/>
|
||||
<discard id="discard2" xlink:href="#set2"/>
|
||||
<discard id="discard3" xlink:href="#discard1"/>
|
||||
</svg>
|
||||
|
||||
<script>
|
||||
var rootSVGElement = document.querySelector("svg");
|
||||
var epsilon = 1.0;
|
||||
|
||||
// Setup animation test
|
||||
function sample1() {
|
||||
expectFillColor(rect1, 255, 0, 0);
|
||||
}
|
||||
|
||||
function sample2() {
|
||||
expectFillColor(rect1, 0, 255, 0);
|
||||
}
|
||||
|
||||
smil_async_test((t) => {
|
||||
var rects = rootSVGElement.ownerDocument.getElementsByTagName("rect");
|
||||
rect1 = rects[0];
|
||||
|
||||
const expectedValues = [
|
||||
// [animationId, time, sampleCallback]
|
||||
["anim", 0.0, sample1],
|
||||
["anim", 0.01, sample1],
|
||||
["anim", 2.0, sample2],
|
||||
["anim", 2.01, sample2],
|
||||
["anim", 3.0, sample2],
|
||||
["anim", 3.01, sample2]
|
||||
];
|
||||
|
||||
runAnimationTest(t, expectedValues);
|
||||
});
|
||||
|
||||
window.animationStartsImmediately = true;
|
||||
|
||||
</script>
|
||||
|
|
@ -0,0 +1,65 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<meta charset="utf-8">
|
||||
<title>This test forces use shadow tree recreation while an animating is running</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">
|
||||
|
||||
<defs>
|
||||
<rect id="rect" width="10" height="100" fill="red">
|
||||
<animate id="an1" attributeName="width" fill="freeze" from="10" to="100" begin="0s" dur="4s"/>
|
||||
</rect>
|
||||
</defs>
|
||||
|
||||
<use xlink:href="#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, 55, epsilon);
|
||||
assert_equals(rect.width.baseVal.value, 10);
|
||||
}
|
||||
|
||||
function forceUseShadowTreeRecreation() {
|
||||
rect.setAttribute("fill", "green");
|
||||
}
|
||||
|
||||
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];
|
||||
|
||||
const expectedValues = [
|
||||
// [animationId, time, sampleCallback]
|
||||
["an1", 0.0, sample1],
|
||||
["an1", 1.999, sample2],
|
||||
["an1", 2.0, forceUseShadowTreeRecreation],
|
||||
["an1", 2.001, sample2],
|
||||
["an1", 4.0, sample3],
|
||||
["an1", 60.0, sample3],
|
||||
];
|
||||
|
||||
runAnimationTest(t, expectedValues);
|
||||
});
|
||||
|
||||
window.animationStartsImmediately = true;
|
||||
|
||||
</script>
|
||||
|
|
@ -0,0 +1,421 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<meta charset="utf-8">
|
||||
<title>This checks the effect on multiple animations ending on one target</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">
|
||||
|
||||
<!-- Test that the first element can end while others continue without crashing, and the second
|
||||
can end and remain frozen. Also test that a third element can animate after the second has ended
|
||||
but that the result is still to return to the second animation's freeze position. -->
|
||||
<rect x='0' y='0' width='50' height='50' fill='green'>
|
||||
<animate id="an1" attributeName='x' from='0' to='100' begin='0s' dur='1s' />
|
||||
<animate id="an2" attributeName='x' from='200' to='250' begin='1.5s' dur='1s' fill='freeze' />
|
||||
<animate id="an3" attributeName='x' from='50' to='0' begin='2.5s' dur='0.5s' />
|
||||
</rect>
|
||||
|
||||
<!-- Test that a second element can take priority over the first from 0-1s, then
|
||||
test that the first element can animate for 1s, and finally test that the
|
||||
second element can once again animate after the first has ended. After all
|
||||
animations end, test that they are removed and the rect returns to its home. -->
|
||||
<rect x='200' y='75' width='50' height='50' fill='green'>
|
||||
<animate id="an4" attributeName='x' from='0' to='10' begin='1s' dur='1s'/>
|
||||
<animate id="an5" attributeName='x' from='100' to='0' begin='0s' dur='2.5s'/>
|
||||
</rect>
|
||||
|
||||
<!-- Test that a repeating animation can take priority over another animation, and that the
|
||||
end state is the second animation's freeze value. Also test that, after a pause, a third
|
||||
animation can take over and have its freeze value satisfied at the end. -->
|
||||
<rect x='0' y='150' width='50' height='50' fill='green'>
|
||||
<animate id="an6" attributeName='x' from='200' to='240' begin='0s' dur='2s' fill='freeze'/>
|
||||
<animate id="an7" attributeName='x' from='0' to='5' begin='1s' dur='0.1s' repeatCount="5" fill='freeze'/>
|
||||
<animate id="an8" attributeName='x' from='250' to='150' begin='3s' dur='1s' fill='freeze'/>
|
||||
</rect>
|
||||
|
||||
<!-- Test that 4 animations can animate a rect in 20px 'steps' and that correct freeze values are
|
||||
honored even though the animation elements are specified in non-sequential order. Also test
|
||||
that two repeating animations (active for only a short duration) only momentarily
|
||||
affect the overall animation and are correctly removed. -->
|
||||
<rect x='0' y='225' width='50' height='50' fill='green'>
|
||||
<animate id="an9" attributeName='x' from='200' to='250' begin='1.6s' dur='0.1s' repeatCount="2" fill='remove'/>
|
||||
<animate id="anA" attributeName='x' from='160' to='180' begin='3s' dur='0.5s' fill='freeze'/>
|
||||
<animate id="anB" attributeName='x' from='110' to='130' begin='2s' dur='0.5s' fill='freeze'/>
|
||||
<animate id="anC" attributeName='x' from='10' to='30' begin='0s' dur='0.5s' fill='freeze'/>
|
||||
<animate id="anD" attributeName='x' from='60' to='80' begin='1s' dur='0.5s' fill='freeze'/>
|
||||
<animate id="anE" attributeName='x' from='200' to='250' begin='3.6s' dur='0.1s' repeatCount="2" fill='remove'/>
|
||||
</rect>
|
||||
|
||||
</svg>
|
||||
|
||||
<script>
|
||||
var rootSVGElement = document.querySelector("svg");
|
||||
var epsilon = 1.0;
|
||||
|
||||
// Setup animation test
|
||||
function sample1() {
|
||||
assert_approx_equals(rect1.x.animVal.value, 0, epsilon);
|
||||
assert_equals(rect1.x.baseVal.value, 0);
|
||||
|
||||
assert_approx_equals(rect2.x.animVal.value, 100, epsilon);
|
||||
assert_equals(rect2.x.baseVal.value, 200);
|
||||
|
||||
assert_approx_equals(rect3.x.animVal.value, 200, epsilon);
|
||||
assert_equals(rect3.x.baseVal.value, 0);
|
||||
|
||||
assert_approx_equals(rect4.x.animVal.value, 10, epsilon);
|
||||
assert_equals(rect4.x.baseVal.value, 0);
|
||||
}
|
||||
|
||||
function sample2() {
|
||||
assert_approx_equals(rect1.x.animVal.value, 50, epsilon);
|
||||
assert_equals(rect1.x.baseVal.value, 0);
|
||||
|
||||
assert_approx_equals(rect2.x.animVal.value, 80, epsilon);
|
||||
assert_equals(rect2.x.baseVal.value, 200);
|
||||
|
||||
assert_approx_equals(rect3.x.animVal.value, 210, epsilon);
|
||||
assert_equals(rect3.x.baseVal.value, 0);
|
||||
|
||||
assert_approx_equals(rect4.x.animVal.value, 30, epsilon);
|
||||
assert_equals(rect4.x.baseVal.value, 0);
|
||||
}
|
||||
|
||||
function sample3() {
|
||||
assert_approx_equals(rect1.x.animVal.value, 50, epsilon);
|
||||
assert_equals(rect1.x.baseVal.value, 0);
|
||||
|
||||
assert_approx_equals(rect2.x.animVal.value, 80, epsilon);
|
||||
assert_equals(rect2.x.baseVal.value, 200);
|
||||
|
||||
assert_approx_equals(rect3.x.animVal.value, 210, epsilon);
|
||||
assert_equals(rect3.x.baseVal.value, 0);
|
||||
|
||||
assert_approx_equals(rect4.x.animVal.value, 30, epsilon);
|
||||
assert_equals(rect4.x.baseVal.value, 0);
|
||||
}
|
||||
|
||||
function sample4() {
|
||||
assert_approx_equals(rect1.x.animVal.value, 50, epsilon);
|
||||
assert_equals(rect1.x.baseVal.value, 0);
|
||||
|
||||
assert_approx_equals(rect2.x.animVal.value, 80, epsilon);
|
||||
assert_equals(rect2.x.baseVal.value, 200);
|
||||
|
||||
assert_approx_equals(rect3.x.animVal.value, 210, epsilon);
|
||||
assert_equals(rect3.x.baseVal.value, 0);
|
||||
|
||||
assert_approx_equals(rect4.x.animVal.value, 30, epsilon);
|
||||
assert_equals(rect4.x.baseVal.value, 0);
|
||||
}
|
||||
|
||||
function sample5() {
|
||||
assert_approx_equals(rect1.x.animVal.value, 100, epsilon);
|
||||
assert_equals(rect1.x.baseVal.value, 0);
|
||||
|
||||
assert_approx_equals(rect2.x.animVal.value, 60, epsilon);
|
||||
assert_equals(rect2.x.baseVal.value, 200);
|
||||
|
||||
assert_approx_equals(rect3.x.animVal.value, 220, epsilon);
|
||||
assert_equals(rect3.x.baseVal.value, 0);
|
||||
|
||||
assert_approx_equals(rect4.x.animVal.value, 30, epsilon);
|
||||
assert_equals(rect4.x.baseVal.value, 0);
|
||||
}
|
||||
|
||||
function sample6() {
|
||||
assert_approx_equals(rect1.x.animVal.value, 0, epsilon);
|
||||
assert_equals(rect1.x.baseVal.value, 0);
|
||||
|
||||
assert_approx_equals(rect2.x.animVal.value, 0, epsilon);
|
||||
assert_equals(rect2.x.baseVal.value, 200);
|
||||
|
||||
assert_approx_equals(rect3.x.animVal.value, 0, epsilon);
|
||||
assert_equals(rect3.x.baseVal.value, 0);
|
||||
|
||||
assert_approx_equals(rect4.x.animVal.value, 60, epsilon);
|
||||
assert_equals(rect4.x.baseVal.value, 0);
|
||||
}
|
||||
|
||||
function sample7() {
|
||||
assert_approx_equals(rect1.x.animVal.value, 0, epsilon);
|
||||
assert_equals(rect1.x.baseVal.value, 0);
|
||||
|
||||
assert_approx_equals(rect2.x.animVal.value, 0, epsilon);
|
||||
assert_equals(rect2.x.baseVal.value, 200);
|
||||
|
||||
assert_approx_equals(rect3.x.animVal.value, 0, epsilon);
|
||||
assert_equals(rect3.x.baseVal.value, 0);
|
||||
|
||||
assert_approx_equals(rect4.x.animVal.value, 60, epsilon);
|
||||
assert_equals(rect4.x.baseVal.value, 0);
|
||||
}
|
||||
|
||||
function sample8() {
|
||||
assert_approx_equals(rect1.x.animVal.value, 0, epsilon);
|
||||
assert_equals(rect1.x.baseVal.value, 0);
|
||||
|
||||
assert_approx_equals(rect2.x.animVal.value, 5, epsilon);
|
||||
assert_equals(rect2.x.baseVal.value, 200);
|
||||
|
||||
assert_approx_equals(rect3.x.animVal.value, 5, epsilon);
|
||||
assert_equals(rect3.x.baseVal.value, 0);
|
||||
|
||||
assert_approx_equals(rect4.x.animVal.value, 80, epsilon);
|
||||
assert_equals(rect4.x.baseVal.value, 0);
|
||||
}
|
||||
|
||||
function sample9() {
|
||||
assert_approx_equals(rect1.x.animVal.value, 200, epsilon);
|
||||
assert_equals(rect1.x.baseVal.value, 0);
|
||||
|
||||
assert_approx_equals(rect2.x.animVal.value, 5, epsilon);
|
||||
assert_equals(rect2.x.baseVal.value, 200);
|
||||
|
||||
assert_approx_equals(rect3.x.animVal.value, 5, epsilon);
|
||||
assert_equals(rect3.x.baseVal.value, 0);
|
||||
|
||||
assert_approx_equals(rect4.x.animVal.value, 80, epsilon);
|
||||
assert_equals(rect4.x.baseVal.value, 0);
|
||||
}
|
||||
|
||||
function sample10() {
|
||||
assert_approx_equals(rect1.x.animVal.value, 200, epsilon);
|
||||
assert_equals(rect1.x.baseVal.value, 0);
|
||||
|
||||
assert_approx_equals(rect2.x.animVal.value, 5, epsilon);
|
||||
assert_equals(rect2.x.baseVal.value, 200);
|
||||
|
||||
assert_approx_equals(rect3.x.animVal.value, 5, epsilon);
|
||||
assert_equals(rect3.x.baseVal.value, 0);
|
||||
|
||||
assert_approx_equals(rect4.x.animVal.value, 80, epsilon);
|
||||
assert_equals(rect4.x.baseVal.value, 0);
|
||||
}
|
||||
|
||||
function sample11() {
|
||||
assert_approx_equals(rect1.x.animVal.value, 225, epsilon);
|
||||
assert_equals(rect1.x.baseVal.value, 0);
|
||||
|
||||
assert_approx_equals(rect2.x.animVal.value, 10, epsilon);
|
||||
assert_equals(rect2.x.baseVal.value, 200);
|
||||
|
||||
assert_approx_equals(rect3.x.animVal.value, 5, epsilon);
|
||||
assert_equals(rect3.x.baseVal.value, 0);
|
||||
|
||||
assert_approx_equals(rect4.x.animVal.value, 80, epsilon);
|
||||
assert_equals(rect4.x.baseVal.value, 0);
|
||||
}
|
||||
|
||||
function sample12() {
|
||||
assert_approx_equals(rect1.x.animVal.value, 225, epsilon);
|
||||
assert_equals(rect1.x.baseVal.value, 0);
|
||||
|
||||
assert_approx_equals(rect2.x.animVal.value, 20, epsilon);
|
||||
assert_equals(rect2.x.baseVal.value, 200);
|
||||
|
||||
assert_approx_equals(rect3.x.animVal.value, 5, epsilon);
|
||||
assert_equals(rect3.x.baseVal.value, 0);
|
||||
|
||||
assert_approx_equals(rect4.x.animVal.value, 110, epsilon);
|
||||
assert_equals(rect4.x.baseVal.value, 0);
|
||||
}
|
||||
|
||||
function sample13() {
|
||||
assert_approx_equals(rect1.x.animVal.value, 225, epsilon);
|
||||
assert_equals(rect1.x.baseVal.value, 0);
|
||||
|
||||
assert_approx_equals(rect2.x.animVal.value, 20, epsilon);
|
||||
assert_equals(rect2.x.baseVal.value, 200);
|
||||
|
||||
assert_approx_equals(rect3.x.animVal.value, 5, epsilon);
|
||||
assert_equals(rect3.x.baseVal.value, 0);
|
||||
|
||||
assert_approx_equals(rect4.x.animVal.value, 110, epsilon);
|
||||
assert_equals(rect4.x.baseVal.value, 0);
|
||||
}
|
||||
|
||||
function sample14() {
|
||||
assert_approx_equals(rect1.x.animVal.value, 250, epsilon);
|
||||
assert_equals(rect1.x.baseVal.value, 0);
|
||||
|
||||
assert_approx_equals(rect2.x.animVal.value, 0, epsilon);
|
||||
assert_equals(rect2.x.baseVal.value, 200);
|
||||
|
||||
assert_approx_equals(rect3.x.animVal.value, 5, epsilon);
|
||||
assert_equals(rect3.x.baseVal.value, 0);
|
||||
|
||||
assert_approx_equals(rect4.x.animVal.value, 130, epsilon);
|
||||
assert_equals(rect4.x.baseVal.value, 0);
|
||||
}
|
||||
|
||||
function sample15() {
|
||||
assert_approx_equals(rect1.x.animVal.value, 50, epsilon);
|
||||
assert_equals(rect1.x.baseVal.value, 0);
|
||||
|
||||
assert_approx_equals(rect2.x.animVal.value, 200, epsilon);
|
||||
assert_equals(rect2.x.baseVal.value, 200);
|
||||
|
||||
assert_approx_equals(rect3.x.animVal.value, 5, epsilon);
|
||||
assert_equals(rect3.x.baseVal.value, 0);
|
||||
|
||||
assert_approx_equals(rect4.x.animVal.value, 130, epsilon);
|
||||
assert_equals(rect4.x.baseVal.value, 0);
|
||||
}
|
||||
|
||||
function sample16() {
|
||||
assert_approx_equals(rect1.x.animVal.value, 50, epsilon);
|
||||
assert_equals(rect1.x.baseVal.value, 0);
|
||||
|
||||
assert_approx_equals(rect2.x.animVal.value, 200, epsilon);
|
||||
assert_equals(rect2.x.baseVal.value, 200);
|
||||
|
||||
assert_approx_equals(rect3.x.animVal.value, 5, epsilon);
|
||||
assert_equals(rect3.x.baseVal.value, 0);
|
||||
|
||||
assert_approx_equals(rect4.x.animVal.value, 130, epsilon);
|
||||
assert_equals(rect4.x.baseVal.value, 0);
|
||||
}
|
||||
|
||||
function sample17() {
|
||||
assert_approx_equals(rect1.x.animVal.value, 0, epsilon);
|
||||
assert_equals(rect1.x.baseVal.value, 0);
|
||||
|
||||
assert_approx_equals(rect2.x.animVal.value, 200, epsilon);
|
||||
assert_equals(rect2.x.baseVal.value, 200);
|
||||
|
||||
assert_approx_equals(rect3.x.animVal.value, 5, epsilon);
|
||||
assert_equals(rect3.x.baseVal.value, 0);
|
||||
|
||||
assert_approx_equals(rect4.x.animVal.value, 130, epsilon);
|
||||
assert_equals(rect4.x.baseVal.value, 0);
|
||||
}
|
||||
|
||||
function sample18() {
|
||||
assert_approx_equals(rect1.x.animVal.value, 250, epsilon);
|
||||
assert_equals(rect1.x.baseVal.value, 0);
|
||||
|
||||
assert_approx_equals(rect2.x.animVal.value, 200, epsilon);
|
||||
assert_equals(rect2.x.baseVal.value, 200);
|
||||
|
||||
assert_approx_equals(rect3.x.animVal.value, 250, epsilon);
|
||||
assert_equals(rect3.x.baseVal.value, 0);
|
||||
|
||||
assert_approx_equals(rect4.x.animVal.value, 160, epsilon);
|
||||
assert_equals(rect4.x.baseVal.value, 0);
|
||||
}
|
||||
|
||||
function sample19() {
|
||||
assert_approx_equals(rect1.x.animVal.value, 250, epsilon);
|
||||
assert_equals(rect1.x.baseVal.value, 0);
|
||||
|
||||
assert_approx_equals(rect2.x.animVal.value, 200, epsilon);
|
||||
assert_equals(rect2.x.baseVal.value, 200);
|
||||
|
||||
assert_approx_equals(rect3.x.animVal.value, 250, epsilon);
|
||||
assert_equals(rect3.x.baseVal.value, 0);
|
||||
|
||||
assert_approx_equals(rect4.x.animVal.value, 160, epsilon);
|
||||
assert_equals(rect4.x.baseVal.value, 0);
|
||||
}
|
||||
|
||||
function sample20() {
|
||||
assert_approx_equals(rect1.x.animVal.value, 250, epsilon);
|
||||
assert_equals(rect1.x.baseVal.value, 0);
|
||||
|
||||
assert_approx_equals(rect2.x.animVal.value, 200, epsilon);
|
||||
assert_equals(rect2.x.baseVal.value, 200);
|
||||
|
||||
assert_approx_equals(rect3.x.animVal.value, 200, epsilon);
|
||||
assert_equals(rect3.x.baseVal.value, 0);
|
||||
|
||||
assert_approx_equals(rect4.x.animVal.value, 180, epsilon);
|
||||
assert_equals(rect4.x.baseVal.value, 0);
|
||||
}
|
||||
|
||||
function sample21() {
|
||||
assert_approx_equals(rect1.x.animVal.value, 250, epsilon);
|
||||
assert_equals(rect1.x.baseVal.value, 0);
|
||||
|
||||
assert_approx_equals(rect2.x.animVal.value, 200, epsilon);
|
||||
assert_equals(rect2.x.baseVal.value, 200);
|
||||
|
||||
assert_approx_equals(rect3.x.animVal.value, 200, epsilon);
|
||||
assert_equals(rect3.x.baseVal.value, 0);
|
||||
|
||||
assert_approx_equals(rect4.x.animVal.value, 180, epsilon);
|
||||
assert_equals(rect4.x.baseVal.value, 0);
|
||||
}
|
||||
|
||||
function sample22() {
|
||||
assert_approx_equals(rect1.x.animVal.value, 250, epsilon);
|
||||
assert_equals(rect1.x.baseVal.value, 0);
|
||||
|
||||
assert_approx_equals(rect2.x.animVal.value, 200, epsilon);
|
||||
assert_equals(rect2.x.baseVal.value, 200);
|
||||
|
||||
assert_approx_equals(rect3.x.animVal.value, 150, epsilon);
|
||||
assert_equals(rect3.x.baseVal.value, 0);
|
||||
|
||||
assert_approx_equals(rect4.x.animVal.value, 180, epsilon);
|
||||
assert_equals(rect4.x.baseVal.value, 0);
|
||||
}
|
||||
|
||||
function sample23() {
|
||||
assert_approx_equals(rect1.x.animVal.value, 250, epsilon);
|
||||
assert_equals(rect1.x.baseVal.value, 0);
|
||||
|
||||
assert_approx_equals(rect2.x.animVal.value, 200, epsilon);
|
||||
assert_equals(rect2.x.baseVal.value, 200);
|
||||
|
||||
assert_approx_equals(rect3.x.animVal.value, 150, epsilon);
|
||||
assert_equals(rect3.x.baseVal.value, 0);
|
||||
|
||||
assert_approx_equals(rect4.x.animVal.value, 180, epsilon);
|
||||
assert_equals(rect4.x.baseVal.value, 0);
|
||||
}
|
||||
|
||||
smil_async_test((t) => {
|
||||
var rects = rootSVGElement.ownerDocument.getElementsByTagName("rect");
|
||||
rect1 = rects[0];
|
||||
rect2 = rects[1];
|
||||
rect3 = rects[2];
|
||||
rect4 = rects[3];
|
||||
|
||||
const expectedValues = [
|
||||
// [animationId, time, sampleCallback]
|
||||
["an1", 0.0, sample1],
|
||||
["an1", 0.499, sample2],
|
||||
["an1", 0.5, sample3],
|
||||
["an1", 0.501, sample4],
|
||||
["an1", 0.999, sample5],
|
||||
["an1", 1.0, sample6],
|
||||
["an1", 1.001, sample7],
|
||||
["an1", 1.499, sample8],
|
||||
["an1", 1.5, sample9],
|
||||
["an1", 1.501, sample10],
|
||||
["an1", 1.999, sample11],
|
||||
["an1", 2.0, sample12],
|
||||
["an1", 2.001, sample13],
|
||||
["an1", 2.499, sample14],
|
||||
["an1", 2.5, sample15],
|
||||
["an1", 2.501, sample16],
|
||||
["an1", 2.999, sample17],
|
||||
["an1", 3.0, sample18],
|
||||
["an1", 3.001, sample19],
|
||||
["an1", 3.499, sample20],
|
||||
["an1", 3.5, sample21],
|
||||
["an1", 4.0, sample22],
|
||||
["an1", 9.0, sample23]
|
||||
];
|
||||
|
||||
runAnimationTest(t, expectedValues);
|
||||
});
|
||||
|
||||
window.animationStartsImmediately = true;
|
||||
|
||||
</script>
|
||||
|
|
@ -0,0 +1,149 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<meta charset="utf-8">
|
||||
<title>This checks the effect on multiple animations on one target</title>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/SVGAnimationTestCase-testharness.js"></script>
|
||||
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Tiny//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-tiny.dtd">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
|
||||
<rect x='0' y='0' width='50' height='50' fill='green'>
|
||||
<animate id="an1" attributeName='x' from='0' to='100' begin='0s' dur='2s' fill='freeze'/>
|
||||
<animate id="an2" attributeName='x' from='150' to='250' begin='4s' dur='2s' fill='freeze'/>
|
||||
</rect>
|
||||
|
||||
<rect x='0' y='100' width='50' height='50' fill='green'>
|
||||
<animate id="an3" attributeName='x' from='0' to='100' begin='0s' dur='2s' fill='remove'/>
|
||||
<animate id="an4" attributeName='x' from='150' to='250' begin='4s' dur='2s' fill='freeze'/>
|
||||
</rect>
|
||||
|
||||
<rect x='0' y='200' width='50' height='50' fill='green'>
|
||||
<animate id="an5" attributeName='x' from='0' to='100' begin='0s' dur='2s' fill='freeze'/>
|
||||
<animate id="an6" attributeName='x' from='150' to='250' begin='4s' dur='2s' fill='remove'/>
|
||||
</rect>
|
||||
|
||||
</svg>
|
||||
|
||||
<script>
|
||||
var rootSVGElement = document.querySelector("svg");
|
||||
var epsilon = 1.0;
|
||||
|
||||
// Setup animation test
|
||||
function sample1() {
|
||||
assert_approx_equals(rect1.x.animVal.value, 0, epsilon);
|
||||
assert_equals(rect1.x.baseVal.value, 0);
|
||||
|
||||
assert_approx_equals(rect2.x.animVal.value, 0, epsilon);
|
||||
assert_equals(rect2.x.baseVal.value, 0);
|
||||
|
||||
assert_approx_equals(rect3.x.animVal.value, 0, epsilon);
|
||||
assert_equals(rect3.x.baseVal.value, 0);
|
||||
}
|
||||
|
||||
function sample2() {
|
||||
assert_approx_equals(rect1.x.animVal.value, 50, epsilon);
|
||||
assert_equals(rect1.x.baseVal.value, 0);
|
||||
|
||||
assert_approx_equals(rect2.x.animVal.value, 50, epsilon);
|
||||
assert_equals(rect2.x.baseVal.value, 0);
|
||||
|
||||
assert_approx_equals(rect3.x.animVal.value, 50, epsilon);
|
||||
assert_equals(rect3.x.baseVal.value, 0);
|
||||
}
|
||||
|
||||
function sample3() {
|
||||
assert_approx_equals(rect1.x.animVal.value, 100, epsilon);
|
||||
assert_equals(rect1.x.baseVal.value, 0);
|
||||
|
||||
assert_approx_equals(rect2.x.animVal.value, 100, epsilon);
|
||||
assert_equals(rect2.x.baseVal.value, 0);
|
||||
|
||||
assert_approx_equals(rect3.x.animVal.value, 100, epsilon);
|
||||
assert_equals(rect3.x.baseVal.value, 0);
|
||||
}
|
||||
|
||||
function sample4() {
|
||||
assert_approx_equals(rect1.x.animVal.value, 100, epsilon);
|
||||
assert_equals(rect1.x.baseVal.value, 0);
|
||||
|
||||
assert_approx_equals(rect2.x.animVal.value, 0, epsilon);
|
||||
assert_equals(rect2.x.baseVal.value, 0);
|
||||
|
||||
assert_approx_equals(rect3.x.animVal.value, 100, epsilon);
|
||||
assert_equals(rect3.x.baseVal.value, 0);
|
||||
}
|
||||
|
||||
function sample5() {
|
||||
assert_approx_equals(rect1.x.animVal.value, 150, epsilon);
|
||||
assert_equals(rect1.x.baseVal.value, 0);
|
||||
|
||||
assert_approx_equals(rect2.x.animVal.value, 150, epsilon);
|
||||
assert_equals(rect2.x.baseVal.value, 0);
|
||||
|
||||
assert_approx_equals(rect3.x.animVal.value, 150, epsilon);
|
||||
assert_equals(rect3.x.baseVal.value, 0);
|
||||
}
|
||||
|
||||
function sample6() {
|
||||
assert_approx_equals(rect1.x.animVal.value, 200, epsilon);
|
||||
assert_equals(rect1.x.baseVal.value, 0);
|
||||
|
||||
assert_approx_equals(rect2.x.animVal.value, 200, epsilon);
|
||||
assert_equals(rect2.x.baseVal.value, 0);
|
||||
|
||||
assert_approx_equals(rect3.x.animVal.value, 200, epsilon);
|
||||
assert_equals(rect3.x.baseVal.value, 0);
|
||||
}
|
||||
|
||||
function sample7() {
|
||||
assert_approx_equals(rect1.x.animVal.value, 250, epsilon);
|
||||
assert_equals(rect1.x.baseVal.value, 0);
|
||||
|
||||
assert_approx_equals(rect2.x.animVal.value, 250, epsilon);
|
||||
assert_equals(rect2.x.baseVal.value, 0);
|
||||
|
||||
assert_approx_equals(rect3.x.animVal.value, 250, epsilon);
|
||||
assert_equals(rect3.x.baseVal.value, 0);
|
||||
}
|
||||
|
||||
function sample8() {
|
||||
assert_equals(rect1.x.animVal.value, 250);
|
||||
assert_equals(rect1.x.baseVal.value, 0);
|
||||
|
||||
assert_equals(rect2.x.animVal.value, 250);
|
||||
assert_equals(rect2.x.baseVal.value, 0);
|
||||
|
||||
assert_equals(rect3.x.animVal.value, 100);
|
||||
assert_equals(rect3.x.baseVal.value, 0);
|
||||
}
|
||||
|
||||
smil_async_test((t) => {
|
||||
var rects = rootSVGElement.ownerDocument.getElementsByTagName("rect");
|
||||
rect1 = rects[0];
|
||||
rect2 = rects[1];
|
||||
rect3 = rects[2];
|
||||
|
||||
const expectedValues = [
|
||||
// [animationId, time, sampleCallback]
|
||||
["an1", 0.0, sample1],
|
||||
["an1", 1.0, sample2],
|
||||
["an1", 1.999, sample3],
|
||||
["an1", 2.001, sample4],
|
||||
["an1", 3.0, sample4],
|
||||
["an1", 3.999, sample4],
|
||||
["an1", 4.0, sample5],
|
||||
["an1", 5.0, sample6],
|
||||
["an1", 5.999, sample7],
|
||||
["an1", 6.001, sample8],
|
||||
["an1", 60.0, sample8]
|
||||
];
|
||||
|
||||
runAnimationTest(t, expectedValues);
|
||||
});
|
||||
|
||||
window.animationStartsImmediately = true;
|
||||
|
||||
</script>
|
||||
|
|
@ -0,0 +1,136 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<meta charset="utf-8">
|
||||
<title>This tests additive='sum' support on animate elements with multiple begin times</title>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/SVGAnimationTestCase-testharness.js"></script>
|
||||
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Tiny//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-tiny.dtd">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000">
|
||||
<rect width="100" height="100" fill="green">
|
||||
<animate id="an1" attributeName="y" attributeType="XML" begin="0s" dur="12s" from="100" to="900" fill="freeze" />
|
||||
<animate attributeName="x" attributeType="XML" calcMode="discrete" begin="0s; 2s" from="0" to="400" dur="8s" additive="sum" />
|
||||
</rect>
|
||||
</svg>
|
||||
|
||||
<script>
|
||||
var rootSVGElement = document.querySelector("svg");
|
||||
var epsilon = 1.0;
|
||||
|
||||
// Setup animation test
|
||||
function checkBaseValues() {
|
||||
return;
|
||||
assert_equals(rect.x.baseVal.value, 0);
|
||||
assert_equals(rect.y.baseVal.value, 0);
|
||||
}
|
||||
|
||||
function sample1() {
|
||||
assert_equals(rect.x.animVal.value, 0);
|
||||
assert_approx_equals(rect.y.animVal.value, 100, epsilon);
|
||||
checkBaseValues();
|
||||
}
|
||||
|
||||
function sample2() {
|
||||
assert_equals(rect.x.animVal.value, 0);
|
||||
assert_approx_equals(rect.y.animVal.value, 166.67, epsilon);
|
||||
checkBaseValues();
|
||||
}
|
||||
|
||||
function sample3() {
|
||||
assert_equals(rect.x.animVal.value, 0);
|
||||
assert_approx_equals(rect.y.animVal.value, 366.60, epsilon);
|
||||
checkBaseValues();
|
||||
}
|
||||
|
||||
function sample4() {
|
||||
assert_equals(rect.x.animVal.value, 0);
|
||||
assert_approx_equals(rect.y.animVal.value, 366.73, epsilon);
|
||||
checkBaseValues();
|
||||
}
|
||||
|
||||
function sample5() {
|
||||
assert_equals(rect.x.animVal.value, 0);
|
||||
assert_approx_equals(rect.y.animVal.value, 499.93, epsilon);
|
||||
checkBaseValues();
|
||||
}
|
||||
|
||||
function sample6() {
|
||||
assert_equals(rect.x.animVal.value, 400);
|
||||
assert_approx_equals(rect.y.animVal.value, 500.06, epsilon);
|
||||
checkBaseValues();
|
||||
}
|
||||
|
||||
function sample7() {
|
||||
assert_equals(rect.x.animVal.value, 400);
|
||||
assert_approx_equals(rect.y.animVal.value, 566.67, epsilon);
|
||||
checkBaseValues();
|
||||
}
|
||||
|
||||
function sample8() {
|
||||
assert_equals(rect.x.animVal.value, 400);
|
||||
assert_approx_equals(rect.y.animVal.value, 633.33, epsilon);
|
||||
checkBaseValues();
|
||||
}
|
||||
|
||||
function sample9() {
|
||||
assert_equals(rect.x.animVal.value, 400);
|
||||
assert_approx_equals(rect.y.animVal.value, 700, epsilon);
|
||||
checkBaseValues();
|
||||
}
|
||||
|
||||
function sample10() {
|
||||
assert_equals(rect.x.animVal.value, 400);
|
||||
assert_approx_equals(rect.y.animVal.value, 766.60, epsilon);
|
||||
checkBaseValues();
|
||||
}
|
||||
|
||||
function sample11() {
|
||||
assert_equals(rect.x.animVal.value, 0);
|
||||
assert_approx_equals(rect.y.animVal.value, 766.67, epsilon);
|
||||
checkBaseValues();
|
||||
}
|
||||
|
||||
function sample12() {
|
||||
assert_equals(rect.x.animVal.value, 0);
|
||||
assert_approx_equals(rect.y.animVal.value, 833.33, epsilon);
|
||||
checkBaseValues();
|
||||
}
|
||||
|
||||
function sample13() {
|
||||
assert_equals(rect.x.animVal.value, 0);
|
||||
assert_approx_equals(rect.y.animVal.value, 900, epsilon);
|
||||
checkBaseValues();
|
||||
}
|
||||
|
||||
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", 1.0, sample2],
|
||||
["an1", 3.999, sample3],
|
||||
["an1", 4.001, sample4],
|
||||
["an1", 5.999, sample5],
|
||||
["an1", 6.001, sample6],
|
||||
["an1", 7.0, sample7],
|
||||
["an1", 7.999, sample8],
|
||||
["an1", 8.001, sample8],
|
||||
["an1", 9.0, sample9],
|
||||
["an1", 9.999, sample10],
|
||||
["an1", 10.001, sample11],
|
||||
["an1", 11.0, sample12],
|
||||
["an1", 11.999, sample13],
|
||||
["an1", 12.001, sample13],
|
||||
["an1", 60.0, sample13]
|
||||
];
|
||||
|
||||
runAnimationTest(t, expectedValues);
|
||||
});
|
||||
|
||||
window.animationStartsImmediately = true;
|
||||
|
||||
</script>
|
||||
|
|
@ -0,0 +1,72 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<meta charset="utf-8">
|
||||
<title>This by animation for all non-additive property types - should have no effect.</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 200 200" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<defs>
|
||||
<filter id="filter">
|
||||
<feConvolveMatrix id="feConvolveMatrix" kernelMatrix="0 1 0 0 1 0 0 1 0" order="6 6" targetX="5" preserveAlpha="false"/>
|
||||
</filter>
|
||||
</defs>
|
||||
|
||||
<rect id="rect" y="100" width="100" height="100" fill="black" filter="url(#filter)"/>
|
||||
|
||||
<!-- AnimatedBoolean -->
|
||||
<animate id="an1" xlink:href="#feConvolveMatrix" attributeName="preserveAlpha" begin="0s" dur="4s" by="true" fill="freeze"/>
|
||||
|
||||
<!-- AnimatedEnumeration -->
|
||||
<animate xlink:href="#filter" attributeName="filterUnits" begin="0s" dur="4s" by="userSpaceOnUse" fill="freeze"/>
|
||||
|
||||
<!-- AnimatedPreserveAspectRatio -->
|
||||
<animate xlink:href="#svg" attributeName="preserveAspectRatio" begin="0s" dur="4s" by="xMaxYMax slice" fill="freeze"/>
|
||||
|
||||
<!-- AnimatedString -->
|
||||
<animate xlink:href="#feConvolveMatrix" attributeName="result" begin="0s" dur="4s" by="test" fill="freeze"/>
|
||||
|
||||
</svg>
|
||||
|
||||
<script>
|
||||
var rootSVGElement = document.querySelector("svg");
|
||||
var epsilon = 1.0;
|
||||
|
||||
// Setup animation test
|
||||
function sample() {
|
||||
assert_equals(feConvolveMatrix.preserveAlpha.animVal, false);
|
||||
assert_equals(filter.filterUnits.animVal, SVGUnitTypes.SVG_UNIT_TYPE_OBJECTBOUNDINGBOX);
|
||||
assert_equals(svg.preserveAspectRatio.animVal.align, SVGPreserveAspectRatio.SVG_PRESERVEASPECTRATIO_NONE);
|
||||
assert_equals(svg.preserveAspectRatio.animVal.meetOrSlice, SVGPreserveAspectRatio.SVG_MEETORSLICE_MEET);
|
||||
assert_equals(feConvolveMatrix.result.animVal, "");
|
||||
|
||||
assert_equals(feConvolveMatrix.preserveAlpha.baseVal, false);
|
||||
assert_equals(filter.filterUnits.baseVal, SVGUnitTypes.SVG_UNIT_TYPE_OBJECTBOUNDINGBOX);
|
||||
assert_equals(svg.preserveAspectRatio.baseVal.align, SVGPreserveAspectRatio.SVG_PRESERVEASPECTRATIO_NONE);
|
||||
assert_equals(svg.preserveAspectRatio.baseVal.meetOrSlice, SVGPreserveAspectRatio.SVG_MEETORSLICE_MEET);
|
||||
assert_equals(feConvolveMatrix.result.baseVal, "");
|
||||
}
|
||||
|
||||
smil_async_test((t) => {
|
||||
filter = rootSVGElement.ownerDocument.getElementsByTagName("filter")[0];
|
||||
feConvolveMatrix = rootSVGElement.ownerDocument.getElementsByTagName("feConvolveMatrix")[0];
|
||||
svg = rootSVGElement.ownerDocument.getElementsByTagName("svg")[0];
|
||||
|
||||
const expectedValues = [
|
||||
// [animationId, time, sampleCallback]
|
||||
["an1", 0.0, sample],
|
||||
["an1", 1.999, sample],
|
||||
["an1", 2.001, sample],
|
||||
["an1", 3.999, sample],
|
||||
["an1", 4.001, sample]
|
||||
];
|
||||
|
||||
runAnimationTest(t, expectedValues);
|
||||
});
|
||||
|
||||
window.animationStartsImmediately = true;
|
||||
|
||||
</script>
|
||||
|
|
@ -0,0 +1,72 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<meta charset="utf-8">
|
||||
<title>This is a from by animation for all non-additive property types - should have no effect.</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 200 200" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<defs>
|
||||
<filter id="filter">
|
||||
<feConvolveMatrix id="feConvolveMatrix" kernelMatrix="0 1 0 0 1 0 0 1 0" order="6 6" targetX="5" preserveAlpha="false"/>
|
||||
</filter>
|
||||
</defs>
|
||||
|
||||
<rect id="rect" y="100" width="100" height="100" fill="black" filter="url(#filter)"/>
|
||||
|
||||
<!-- AnimatedBoolean -->
|
||||
<animate id="an1" xlink:href="#feConvolveMatrix" attributeName="preserveAlpha" begin="0s" dur="4s" from="false" by="true" fill="freeze"/>
|
||||
|
||||
<!-- AnimatedEnumeration -->
|
||||
<animate xlink:href="#filter" attributeName="filterUnits" begin="0s" dur="4s" from="objectBoundingBox" by="userSpaceOnUse" fill="freeze"/>
|
||||
|
||||
<!-- AnimatedPreserveAspectRatio -->
|
||||
<animate xlink:href="#svg" attributeName="preserveAspectRatio" begin="0s" dur="4s" from="xMaxYMax meet" by="xMaxYMax slice" fill="freeze"/>
|
||||
|
||||
<!-- AnimatedString -->
|
||||
<animate xlink:href="#feConvolveMatrix" attributeName="result" begin="0s" dur="4s" from="foo" by="test" fill="freeze"/>
|
||||
|
||||
</svg>
|
||||
|
||||
<script>
|
||||
var rootSVGElement = document.querySelector("svg");
|
||||
var epsilon = 1.0;
|
||||
|
||||
// Setup animation test
|
||||
function sample() {
|
||||
assert_equals(feConvolveMatrix.preserveAlpha.animVal, false);
|
||||
assert_equals(filter.filterUnits.animVal, SVGUnitTypes.SVG_UNIT_TYPE_OBJECTBOUNDINGBOX);
|
||||
assert_equals(svg.preserveAspectRatio.animVal.align, SVGPreserveAspectRatio.SVG_PRESERVEASPECTRATIO_NONE);
|
||||
assert_equals(svg.preserveAspectRatio.animVal.meetOrSlice, SVGPreserveAspectRatio.SVG_MEETORSLICE_MEET);
|
||||
assert_equals(feConvolveMatrix.result.animVal, "");
|
||||
|
||||
assert_equals(feConvolveMatrix.preserveAlpha.baseVal, false);
|
||||
assert_equals(filter.filterUnits.baseVal, SVGUnitTypes.SVG_UNIT_TYPE_OBJECTBOUNDINGBOX);
|
||||
assert_equals(svg.preserveAspectRatio.baseVal.align, SVGPreserveAspectRatio.SVG_PRESERVEASPECTRATIO_NONE);
|
||||
assert_equals(svg.preserveAspectRatio.baseVal.meetOrSlice, SVGPreserveAspectRatio.SVG_MEETORSLICE_MEET);
|
||||
assert_equals(feConvolveMatrix.result.baseVal, "");
|
||||
}
|
||||
|
||||
smil_async_test((t) => {
|
||||
filter = rootSVGElement.ownerDocument.getElementsByTagName("filter")[0];
|
||||
feConvolveMatrix = rootSVGElement.ownerDocument.getElementsByTagName("feConvolveMatrix")[0];
|
||||
svg = rootSVGElement.ownerDocument.getElementsByTagName("svg")[0];
|
||||
|
||||
const expectedValues = [
|
||||
// [animationId, time, sampleCallback]
|
||||
["an1", 0.0, sample],
|
||||
["an1", 1.999, sample],
|
||||
["an1", 2.001, sample],
|
||||
["an1", 3.999, sample],
|
||||
["an1", 4.001, sample]
|
||||
];
|
||||
|
||||
runAnimationTest(t, expectedValues);
|
||||
});
|
||||
|
||||
window.animationStartsImmediately = true;
|
||||
|
||||
</script>
|
||||
|
|
@ -0,0 +1,85 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<meta charset="utf-8">
|
||||
<title>This removes an animation element while the animation is running</title>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/SVGAnimationTestCase-testharness.js"></script>
|
||||
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Tiny//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-tiny.dtd">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
|
||||
<rect x='0' y='0' width='50' height='50' fill='green'>
|
||||
<animate id="an1" attributeName='x' from='50' to='150' begin='0s' dur='2s' fill='freeze'/>
|
||||
</rect>
|
||||
|
||||
<rect x='0' y='100' width='50' height='50' fill='green'>
|
||||
<animate id="an2" attributeName='x' from='50' to='150' begin='0s' dur='2s' fill='remove'/>
|
||||
</rect>
|
||||
|
||||
</svg>
|
||||
|
||||
<script>
|
||||
var rootSVGElement = document.querySelector("svg");
|
||||
var epsilon = 1.0;
|
||||
|
||||
// Setup animation test
|
||||
function sample1() {
|
||||
assert_approx_equals(rect1.x.animVal.value, 50, epsilon);
|
||||
assert_equals(rect1.x.baseVal.value, 0);
|
||||
|
||||
assert_approx_equals(rect2.x.animVal.value, 50, epsilon);
|
||||
assert_equals(rect2.x.baseVal.value, 0);
|
||||
}
|
||||
|
||||
function sample2() {
|
||||
assert_approx_equals(rect1.x.animVal.value, 100, epsilon);
|
||||
assert_equals(rect1.x.baseVal.value, 0);
|
||||
|
||||
assert_approx_equals(rect2.x.animVal.value, 100, epsilon);
|
||||
assert_equals(rect2.x.baseVal.value, 0);
|
||||
|
||||
// Remove the animation element animating rect1
|
||||
// The effect is that rect1 is now reset to the initial state, before any animation was applied to it.
|
||||
// Compatible with FF. In Opera it shows a repainting bug currently (two rects are visible!).
|
||||
var an1 = rootSVGElement.ownerDocument.getElementById("an1");
|
||||
an1.parentNode.removeChild(an1);
|
||||
}
|
||||
|
||||
function sample3() {
|
||||
assert_equals(rect1.x.animVal.value, 0);
|
||||
assert_equals(rect1.x.baseVal.value, 0);
|
||||
|
||||
assert_approx_equals(rect2.x.animVal.value, 100, epsilon);
|
||||
assert_equals(rect2.x.baseVal.value, 0);
|
||||
}
|
||||
|
||||
function sample4() {
|
||||
assert_equals(rect1.x.animVal.value, 0);
|
||||
assert_equals(rect1.x.baseVal.value, 0);
|
||||
|
||||
assert_equals(rect2.x.animVal.value, 0);
|
||||
assert_equals(rect2.x.baseVal.value, 0);
|
||||
}
|
||||
|
||||
smil_async_test((t) => {
|
||||
var rects = rootSVGElement.ownerDocument.getElementsByTagName("rect");
|
||||
rect1 = rects[0];
|
||||
rect2 = rects[1];
|
||||
|
||||
const expectedValues = [
|
||||
// [animationId, time, sampleCallback]
|
||||
["an1", 0.0, sample1],
|
||||
["an1", 1.0, sample2],
|
||||
["an2", 1.001, sample3],
|
||||
["an2", 2.001, sample4],
|
||||
["an2", 60.0, sample4]
|
||||
];
|
||||
|
||||
runAnimationTest(t, expectedValues);
|
||||
});
|
||||
|
||||
window.animationStartsImmediately = true;
|
||||
|
||||
</script>
|
||||
|
|
@ -0,0 +1,100 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<meta charset="utf-8">
|
||||
<title>This removes and adds an animation element while the animation is repeating</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">
|
||||
|
||||
<animate id="anim" attributeName="visibility" to="visible" begin="0s" dur="2s" repeatCount="4"/>
|
||||
<rect x="0" y="0" width="100" height="100" fill="rgb(0, 255, 0)">
|
||||
<set attributeName="fill" to="rgb(255, 0, 0)" begin="anim.repeat(0)"/>
|
||||
</rect>
|
||||
<rect x="200" y="0" width="100" height="100" fill="rgb(255, 0, 0)">
|
||||
<set attributeName="fill" to="rgb(0, 255, 0)" begin="anim.repeat(1)"/>
|
||||
</rect>
|
||||
<rect x="0" y="200" width="100" height="100" fill="rgb(255, 0, 0)">
|
||||
<set attributeName="fill" to="rgb(0, 255, 0)" begin="anim.repeat(2)"/>
|
||||
</rect>
|
||||
<rect x="200" y="200" width="100" height="100" fill="rgb(255, 0, 0)">
|
||||
<set attributeName="fill" to="rgb(0, 255, 0)" begin="anim.repeat(3)"/>
|
||||
</rect>
|
||||
|
||||
</svg>
|
||||
|
||||
<script>
|
||||
var rootSVGElement = document.querySelector("svg");
|
||||
var epsilon = 1.0;
|
||||
|
||||
// Setup animation test
|
||||
function sample1() {
|
||||
expectFillColor(rect1, 0, 255, 0);
|
||||
expectFillColor(rect2, 255, 0, 0);
|
||||
expectFillColor(rect3, 255, 0, 0);
|
||||
expectFillColor(rect4, 255, 0, 0);
|
||||
}
|
||||
|
||||
function sample2() {
|
||||
expectFillColor(rect1, 0, 255, 0);
|
||||
expectFillColor(rect2, 0, 255, 0);
|
||||
expectFillColor(rect3, 255, 0, 0);
|
||||
expectFillColor(rect4, 255, 0, 0);
|
||||
}
|
||||
|
||||
function sample3() {
|
||||
expectFillColor(rect1, 0, 255, 0);
|
||||
expectFillColor(rect2, 0, 255, 0);
|
||||
expectFillColor(rect3, 0, 255, 0);
|
||||
expectFillColor(rect4, 255, 0, 0);
|
||||
}
|
||||
|
||||
function sample4() {
|
||||
expectFillColor(rect1, 0, 255, 0);
|
||||
expectFillColor(rect2, 0, 255, 0);
|
||||
expectFillColor(rect3, 0, 255, 0);
|
||||
expectFillColor(rect4, 0, 255, 0);
|
||||
}
|
||||
|
||||
function recreate() {
|
||||
var anim1 = rootSVGElement.ownerDocument.getElementById("anim");
|
||||
anim1.parentNode.removeChild(anim1);
|
||||
var anim2 = createSVGElement("animate");
|
||||
anim2.setAttribute("id", "anim");
|
||||
anim2.setAttribute("attributeName", "visibility");
|
||||
anim2.setAttribute("to", "visible");
|
||||
anim2.setAttribute("begin", "0s");
|
||||
anim2.setAttribute("dur", "2s");
|
||||
anim2.setAttribute("repeatCount", "4");
|
||||
rootSVGElement.appendChild(anim2);
|
||||
}
|
||||
|
||||
smil_async_test((t) => {
|
||||
var rects = rootSVGElement.ownerDocument.getElementsByTagName("rect");
|
||||
rect1 = rects[0];
|
||||
rect2 = rects[1];
|
||||
rect3 = rects[2];
|
||||
rect4 = rects[3];
|
||||
|
||||
const expectedValues = [
|
||||
// [animationId, time, sampleCallback]
|
||||
["anim", 0.0, sample1],
|
||||
["anim", 0.001, sample1],
|
||||
["anim", 2.0, sample1],
|
||||
["anim", 2.001, sample2],
|
||||
["anim", 4.0, sample2],
|
||||
["anim", 4.001, sample3],
|
||||
["anim", 5.0, recreate],
|
||||
["anim", 6.0, sample3],
|
||||
["anim", 6.001, sample4]
|
||||
];
|
||||
|
||||
runAnimationTest(t, expectedValues);
|
||||
});
|
||||
|
||||
window.animationStartsImmediately = true;
|
||||
|
||||
</script>
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<meta charset="utf-8">
|
||||
<title>This tests values animation with just a single entry</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 immediately to 100 at 2s -->
|
||||
<rect width="10" height="100" fill="green">
|
||||
<animate id="an1" attributeType="XML" attributeName="width" fill="freeze" values="100" begin="2s"/>
|
||||
</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, 100, epsilon);
|
||||
assert_equals(rect.width.baseVal.value, 10);
|
||||
}
|
||||
|
||||
smil_async_test((t) => {
|
||||
rect = rootSVGElement.ownerDocument.getElementsByTagName("rect")[0];
|
||||
|
||||
const expectedValues = [
|
||||
// [animationId, time, sampleCallback]
|
||||
["an1", 0.0, sample1],
|
||||
["an1", 2.0, sample2],
|
||||
["an1", 4.0, sample2],
|
||||
["an1", 60.0, sample2]
|
||||
];
|
||||
|
||||
runAnimationTest(t, expectedValues);
|
||||
});
|
||||
|
||||
window.animationStartsImmediately = true;
|
||||
|
||||
</script>
|
||||
|
|
@ -0,0 +1,93 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<meta charset="utf-8">
|
||||
<title>Tests SVGAngle animation from deg to grad.</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 defs = createSVGElement("defs");
|
||||
|
||||
var marker = createSVGElement("marker");
|
||||
marker.setAttribute("id", "marker");
|
||||
marker.setAttribute("viewBox", "0 0 10 10");
|
||||
marker.setAttribute("markerWidth", "4");
|
||||
marker.setAttribute("markerHeight", "3");
|
||||
marker.setAttribute("markerUnits", "strokeWidth");
|
||||
marker.setAttribute("refX", "1");
|
||||
marker.setAttribute("refY", "5");
|
||||
marker.setAttribute("orient", "0deg");
|
||||
defs.appendChild(marker);
|
||||
|
||||
var polyline = createSVGElement("polyline");
|
||||
polyline.setAttribute("id", "polyline");
|
||||
polyline.setAttribute("points", "0,0 10,5 0,10 1,5");
|
||||
polyline.setAttribute("fill", "green");
|
||||
marker.appendChild(polyline);
|
||||
|
||||
var path = createSVGElement("path");
|
||||
path.setAttribute("id", "path");
|
||||
path.setAttribute("d", "M45,50 L55,50");
|
||||
path.setAttribute("stroke-width","10");
|
||||
path.setAttribute("stroke", "green");
|
||||
path.setAttribute("marker-end", "url(#marker)");
|
||||
path.setAttribute("onclick", "executeTest()");
|
||||
|
||||
var animate = createSVGElement("animate");
|
||||
animate.setAttribute("id", "animation");
|
||||
animate.setAttribute("attributeName", "orient");
|
||||
animate.setAttribute("begin", "0s");
|
||||
animate.setAttribute("dur", "4s");
|
||||
animate.setAttribute("from", "0deg");
|
||||
animate.setAttribute("to", "200grad");
|
||||
marker.appendChild(animate);
|
||||
rootSVGElement.appendChild(defs);
|
||||
rootSVGElement.appendChild(path);
|
||||
|
||||
// Setup animation test
|
||||
function sample1() {
|
||||
// Check initial/end conditions
|
||||
assert_approx_equals(marker.orientAngle.animVal.value, 0, epsilon);
|
||||
assert_equals(marker.orientAngle.baseVal.value, 0);
|
||||
|
||||
assert_equals(marker.orientType.animVal, SVGMarkerElement.SVG_MARKER_ORIENT_ANGLE);
|
||||
assert_equals(marker.orientType.baseVal, SVGMarkerElement.SVG_MARKER_ORIENT_ANGLE);
|
||||
}
|
||||
|
||||
function sample2() {
|
||||
assert_approx_equals(marker.orientAngle.animVal.value, 90, epsilon);
|
||||
assert_equals(marker.orientAngle.baseVal.value, 0);
|
||||
|
||||
assert_equals(marker.orientType.animVal, SVGMarkerElement.SVG_MARKER_ORIENT_ANGLE);
|
||||
assert_equals(marker.orientType.baseVal, SVGMarkerElement.SVG_MARKER_ORIENT_ANGLE);
|
||||
}
|
||||
|
||||
function sample3() {
|
||||
assert_approx_equals(marker.orientAngle.animVal.value, 180, epsilon);
|
||||
assert_equals(marker.orientAngle.baseVal.value, 0);
|
||||
|
||||
assert_equals(marker.orientType.animVal, SVGMarkerElement.SVG_MARKER_ORIENT_ANGLE);
|
||||
assert_equals(marker.orientType.baseVal, SVGMarkerElement.SVG_MARKER_ORIENT_ANGLE);
|
||||
}
|
||||
|
||||
smil_async_test((t) => {
|
||||
const expectedValues = [
|
||||
// [animationId, time, sampleCallback]
|
||||
["animation", 0.0, sample1],
|
||||
["animation", 2.0, sample2],
|
||||
["animation", 3.999, sample3],
|
||||
["animation", 4.001, sample1]
|
||||
];
|
||||
|
||||
runAnimationTest(t, expectedValues);
|
||||
});
|
||||
|
||||
</script>
|
||||
|
|
@ -0,0 +1,93 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<meta charset="utf-8">
|
||||
<title>Tests SVGAngle animation from deg to rad.</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 defs = createSVGElement("defs");
|
||||
|
||||
var marker = createSVGElement("marker");
|
||||
marker.setAttribute("id", "marker");
|
||||
marker.setAttribute("viewBox", "0 0 10 10");
|
||||
marker.setAttribute("markerWidth", "4");
|
||||
marker.setAttribute("markerHeight", "3");
|
||||
marker.setAttribute("markerUnits", "strokeWidth");
|
||||
marker.setAttribute("refX", "1");
|
||||
marker.setAttribute("refY", "5");
|
||||
marker.setAttribute("orient", "0deg");
|
||||
defs.appendChild(marker);
|
||||
|
||||
var polyline = createSVGElement("polyline");
|
||||
polyline.setAttribute("id", "polyline");
|
||||
polyline.setAttribute("points", "0,0 10,5 0,10 1,5");
|
||||
polyline.setAttribute("fill", "green");
|
||||
marker.appendChild(polyline);
|
||||
|
||||
var path = createSVGElement("path");
|
||||
path.setAttribute("id", "path");
|
||||
path.setAttribute("d", "M45,50 L55,50");
|
||||
path.setAttribute("stroke-width","10");
|
||||
path.setAttribute("stroke", "green");
|
||||
path.setAttribute("marker-end", "url(#marker)");
|
||||
path.setAttribute("onclick", "executeTest()");
|
||||
|
||||
var animate = createSVGElement("animate");
|
||||
animate.setAttribute("id", "animation");
|
||||
animate.setAttribute("attributeName", "orient");
|
||||
animate.setAttribute("begin", "0s");
|
||||
animate.setAttribute("dur", "4s");
|
||||
animate.setAttribute("from", "0deg");
|
||||
animate.setAttribute("to", "3.14159265rad");
|
||||
marker.appendChild(animate);
|
||||
rootSVGElement.appendChild(defs);
|
||||
rootSVGElement.appendChild(path);
|
||||
|
||||
// Setup animation test
|
||||
function sample1() {
|
||||
// Check initial/end conditions
|
||||
assert_approx_equals(marker.orientAngle.animVal.value, 0, epsilon);
|
||||
assert_equals(marker.orientAngle.baseVal.value, 0);
|
||||
|
||||
assert_equals(marker.orientType.animVal, SVGMarkerElement.SVG_MARKER_ORIENT_ANGLE);
|
||||
assert_equals(marker.orientType.baseVal, SVGMarkerElement.SVG_MARKER_ORIENT_ANGLE);
|
||||
}
|
||||
|
||||
function sample2() {
|
||||
assert_approx_equals(marker.orientAngle.animVal.value, 90, epsilon);
|
||||
assert_equals(marker.orientAngle.baseVal.value, 0);
|
||||
|
||||
assert_equals(marker.orientType.animVal, SVGMarkerElement.SVG_MARKER_ORIENT_ANGLE);
|
||||
assert_equals(marker.orientType.baseVal, SVGMarkerElement.SVG_MARKER_ORIENT_ANGLE);
|
||||
}
|
||||
|
||||
function sample3() {
|
||||
assert_approx_equals(marker.orientAngle.animVal.value, 180, epsilon);
|
||||
assert_equals(marker.orientAngle.baseVal.value, 0);
|
||||
|
||||
assert_equals(marker.orientType.animVal, SVGMarkerElement.SVG_MARKER_ORIENT_ANGLE);
|
||||
assert_equals(marker.orientType.baseVal, SVGMarkerElement.SVG_MARKER_ORIENT_ANGLE);
|
||||
}
|
||||
|
||||
smil_async_test((t) => {
|
||||
const expectedValues = [
|
||||
// [animationId, time, sampleCallback]
|
||||
["animation", 0.0, sample1],
|
||||
["animation", 2.0, sample2],
|
||||
["animation", 3.999, sample3],
|
||||
["animation", 4.001, sample1]
|
||||
];
|
||||
|
||||
runAnimationTest(t, expectedValues);
|
||||
});
|
||||
|
||||
</script>
|
||||
|
|
@ -0,0 +1,93 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<meta charset="utf-8">
|
||||
<title>Tests SVGAngle animation from grad to deg.</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 defs = createSVGElement("defs");
|
||||
|
||||
var marker = createSVGElement("marker");
|
||||
marker.setAttribute("id", "marker");
|
||||
marker.setAttribute("viewBox", "0 0 10 10");
|
||||
marker.setAttribute("markerWidth", "4");
|
||||
marker.setAttribute("markerHeight", "3");
|
||||
marker.setAttribute("markerUnits", "strokeWidth");
|
||||
marker.setAttribute("refX", "1");
|
||||
marker.setAttribute("refY", "5");
|
||||
marker.setAttribute("orient", "0deg");
|
||||
defs.appendChild(marker);
|
||||
|
||||
var polyline = createSVGElement("polyline");
|
||||
polyline.setAttribute("id", "polyline");
|
||||
polyline.setAttribute("points", "0,0 10,5 0,10 1,5");
|
||||
polyline.setAttribute("fill", "green");
|
||||
marker.appendChild(polyline);
|
||||
|
||||
var path = createSVGElement("path");
|
||||
path.setAttribute("id", "path");
|
||||
path.setAttribute("d", "M45,50 L55,50");
|
||||
path.setAttribute("stroke-width","10");
|
||||
path.setAttribute("stroke", "green");
|
||||
path.setAttribute("marker-end", "url(#marker)");
|
||||
path.setAttribute("onclick", "executeTest()");
|
||||
|
||||
var animate = createSVGElement("animate");
|
||||
animate.setAttribute("id", "animation");
|
||||
animate.setAttribute("attributeName", "orient");
|
||||
animate.setAttribute("begin", "0s");
|
||||
animate.setAttribute("dur", "4s");
|
||||
animate.setAttribute("from", "0grad");
|
||||
animate.setAttribute("to", "180deg");
|
||||
marker.appendChild(animate);
|
||||
rootSVGElement.appendChild(defs);
|
||||
rootSVGElement.appendChild(path);
|
||||
|
||||
// Setup animation test
|
||||
function sample1() {
|
||||
// Check initial/end conditions
|
||||
assert_approx_equals(marker.orientAngle.animVal.value, 0, epsilon);
|
||||
assert_equals(marker.orientAngle.baseVal.value, 0);
|
||||
|
||||
assert_equals(marker.orientType.animVal, SVGMarkerElement.SVG_MARKER_ORIENT_ANGLE);
|
||||
assert_equals(marker.orientType.baseVal, SVGMarkerElement.SVG_MARKER_ORIENT_ANGLE);
|
||||
}
|
||||
|
||||
function sample2() {
|
||||
assert_approx_equals(marker.orientAngle.animVal.value, 90, epsilon);
|
||||
assert_equals(marker.orientAngle.baseVal.value, 0);
|
||||
|
||||
assert_equals(marker.orientType.animVal, SVGMarkerElement.SVG_MARKER_ORIENT_ANGLE);
|
||||
assert_equals(marker.orientType.baseVal, SVGMarkerElement.SVG_MARKER_ORIENT_ANGLE);
|
||||
}
|
||||
|
||||
function sample3() {
|
||||
assert_approx_equals(marker.orientAngle.animVal.value, 180, epsilon);
|
||||
assert_equals(marker.orientAngle.baseVal.value, 0);
|
||||
|
||||
assert_equals(marker.orientType.animVal, SVGMarkerElement.SVG_MARKER_ORIENT_ANGLE);
|
||||
assert_equals(marker.orientType.baseVal, SVGMarkerElement.SVG_MARKER_ORIENT_ANGLE);
|
||||
}
|
||||
|
||||
smil_async_test((t) => {
|
||||
const expectedValues = [
|
||||
// [animationId, time, sampleCallback]
|
||||
["animation", 0.0, sample1],
|
||||
["animation", 2.0, sample2],
|
||||
["animation", 3.999, sample3],
|
||||
["animation", 4.001, sample1]
|
||||
];
|
||||
|
||||
runAnimationTest(t, expectedValues);
|
||||
});
|
||||
|
||||
</script>
|
||||
|
|
@ -0,0 +1,93 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<meta charset="utf-8">
|
||||
<title>Tests SVGAngle animation from grad to rad.</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 defs = createSVGElement("defs");
|
||||
|
||||
var marker = createSVGElement("marker");
|
||||
marker.setAttribute("id", "marker");
|
||||
marker.setAttribute("viewBox", "0 0 10 10");
|
||||
marker.setAttribute("markerWidth", "4");
|
||||
marker.setAttribute("markerHeight", "3");
|
||||
marker.setAttribute("markerUnits", "strokeWidth");
|
||||
marker.setAttribute("refX", "1");
|
||||
marker.setAttribute("refY", "5");
|
||||
marker.setAttribute("orient", "0deg");
|
||||
defs.appendChild(marker);
|
||||
|
||||
var polyline = createSVGElement("polyline");
|
||||
polyline.setAttribute("id", "polyline");
|
||||
polyline.setAttribute("points", "0,0 10,5 0,10 1,5");
|
||||
polyline.setAttribute("fill", "green");
|
||||
marker.appendChild(polyline);
|
||||
|
||||
var path = createSVGElement("path");
|
||||
path.setAttribute("id", "path");
|
||||
path.setAttribute("d", "M45,50 L55,50");
|
||||
path.setAttribute("stroke-width","10");
|
||||
path.setAttribute("stroke", "green");
|
||||
path.setAttribute("marker-end", "url(#marker)");
|
||||
path.setAttribute("onclick", "executeTest()");
|
||||
|
||||
var animate = createSVGElement("animate");
|
||||
animate.setAttribute("id", "animation");
|
||||
animate.setAttribute("attributeName", "orient");
|
||||
animate.setAttribute("begin", "0s");
|
||||
animate.setAttribute("dur", "4s");
|
||||
animate.setAttribute("from", "0grad");
|
||||
animate.setAttribute("to", "3.14159265rad");
|
||||
marker.appendChild(animate);
|
||||
rootSVGElement.appendChild(defs);
|
||||
rootSVGElement.appendChild(path);
|
||||
|
||||
// Setup animation test
|
||||
function sample1() {
|
||||
// Check initial/end conditions
|
||||
assert_approx_equals(marker.orientAngle.animVal.value, 0, epsilon);
|
||||
assert_equals(marker.orientAngle.baseVal.value, 0);
|
||||
|
||||
assert_equals(marker.orientType.animVal, SVGMarkerElement.SVG_MARKER_ORIENT_ANGLE);
|
||||
assert_equals(marker.orientType.baseVal, SVGMarkerElement.SVG_MARKER_ORIENT_ANGLE);
|
||||
}
|
||||
|
||||
function sample2() {
|
||||
assert_approx_equals(marker.orientAngle.animVal.value, 90, epsilon);
|
||||
assert_equals(marker.orientAngle.baseVal.value, 0);
|
||||
|
||||
assert_equals(marker.orientType.animVal, SVGMarkerElement.SVG_MARKER_ORIENT_ANGLE);
|
||||
assert_equals(marker.orientType.baseVal, SVGMarkerElement.SVG_MARKER_ORIENT_ANGLE);
|
||||
}
|
||||
|
||||
function sample3() {
|
||||
assert_approx_equals(marker.orientAngle.animVal.value, 180, epsilon);
|
||||
assert_equals(marker.orientAngle.baseVal.value, 0);
|
||||
|
||||
assert_equals(marker.orientType.animVal, SVGMarkerElement.SVG_MARKER_ORIENT_ANGLE);
|
||||
assert_equals(marker.orientType.baseVal, SVGMarkerElement.SVG_MARKER_ORIENT_ANGLE);
|
||||
}
|
||||
|
||||
smil_async_test((t) => {
|
||||
const expectedValues = [
|
||||
// [animationId, time, sampleCallback]
|
||||
["animation", 0.0, sample1],
|
||||
["animation", 2.0, sample2],
|
||||
["animation", 3.999, sample3],
|
||||
["animation", 4.001, sample1]
|
||||
];
|
||||
|
||||
runAnimationTest(t, expectedValues);
|
||||
});
|
||||
|
||||
</script>
|
||||
|
|
@ -0,0 +1,93 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<meta charset="utf-8">
|
||||
<title>Tests SVGAngle animation from rad to deg.</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 defs = createSVGElement("defs");
|
||||
|
||||
var marker = createSVGElement("marker");
|
||||
marker.setAttribute("id", "marker");
|
||||
marker.setAttribute("viewBox", "0 0 10 10");
|
||||
marker.setAttribute("markerWidth", "4");
|
||||
marker.setAttribute("markerHeight", "3");
|
||||
marker.setAttribute("markerUnits", "strokeWidth");
|
||||
marker.setAttribute("refX", "1");
|
||||
marker.setAttribute("refY", "5");
|
||||
marker.setAttribute("orient", "0deg");
|
||||
defs.appendChild(marker);
|
||||
|
||||
var polyline = createSVGElement("polyline");
|
||||
polyline.setAttribute("id", "polyline");
|
||||
polyline.setAttribute("points", "0,0 10,5 0,10 1,5");
|
||||
polyline.setAttribute("fill", "green");
|
||||
marker.appendChild(polyline);
|
||||
|
||||
var path = createSVGElement("path");
|
||||
path.setAttribute("id", "path");
|
||||
path.setAttribute("d", "M45,50 L55,50");
|
||||
path.setAttribute("stroke-width","10");
|
||||
path.setAttribute("stroke", "green");
|
||||
path.setAttribute("marker-end", "url(#marker)");
|
||||
path.setAttribute("onclick", "executeTest()");
|
||||
|
||||
var animate = createSVGElement("animate");
|
||||
animate.setAttribute("id", "animation");
|
||||
animate.setAttribute("attributeName", "orient");
|
||||
animate.setAttribute("begin", "0s");
|
||||
animate.setAttribute("dur", "4s");
|
||||
animate.setAttribute("from", "0rad");
|
||||
animate.setAttribute("to", "180deg");
|
||||
marker.appendChild(animate);
|
||||
rootSVGElement.appendChild(defs);
|
||||
rootSVGElement.appendChild(path);
|
||||
|
||||
// Setup animation test
|
||||
function sample1() {
|
||||
// Check initial/end conditions
|
||||
assert_approx_equals(marker.orientAngle.animVal.value, 0, epsilon);
|
||||
assert_equals(marker.orientAngle.baseVal.value, 0);
|
||||
|
||||
assert_equals(marker.orientType.animVal, SVGMarkerElement.SVG_MARKER_ORIENT_ANGLE);
|
||||
assert_equals(marker.orientType.baseVal, SVGMarkerElement.SVG_MARKER_ORIENT_ANGLE);
|
||||
}
|
||||
|
||||
function sample2() {
|
||||
assert_approx_equals(marker.orientAngle.animVal.value, 90, epsilon);
|
||||
assert_equals(marker.orientAngle.baseVal.value, 0);
|
||||
|
||||
assert_equals(marker.orientType.animVal, SVGMarkerElement.SVG_MARKER_ORIENT_ANGLE);
|
||||
assert_equals(marker.orientType.baseVal, SVGMarkerElement.SVG_MARKER_ORIENT_ANGLE);
|
||||
}
|
||||
|
||||
function sample3() {
|
||||
assert_approx_equals(marker.orientAngle.animVal.value, 180, epsilon);
|
||||
assert_equals(marker.orientAngle.baseVal.value, 0);
|
||||
|
||||
assert_equals(marker.orientType.animVal, SVGMarkerElement.SVG_MARKER_ORIENT_ANGLE);
|
||||
assert_equals(marker.orientType.baseVal, SVGMarkerElement.SVG_MARKER_ORIENT_ANGLE);
|
||||
}
|
||||
|
||||
smil_async_test((t) => {
|
||||
const expectedValues = [
|
||||
// [animationId, time, sampleCallback]
|
||||
["animation", 0.0, sample1],
|
||||
["animation", 2.0, sample2],
|
||||
["animation", 3.999, sample3],
|
||||
["animation", 4.001, sample1]
|
||||
];
|
||||
|
||||
runAnimationTest(t, expectedValues);
|
||||
});
|
||||
|
||||
</script>
|
||||
|
|
@ -0,0 +1,93 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<meta charset="utf-8">
|
||||
<title>Tests SVGAngle animation from rad to grad.</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 defs = createSVGElement("defs");
|
||||
|
||||
var marker = createSVGElement("marker");
|
||||
marker.setAttribute("id", "marker");
|
||||
marker.setAttribute("viewBox", "0 0 10 10");
|
||||
marker.setAttribute("markerWidth", "4");
|
||||
marker.setAttribute("markerHeight", "3");
|
||||
marker.setAttribute("markerUnits", "strokeWidth");
|
||||
marker.setAttribute("refX", "1");
|
||||
marker.setAttribute("refY", "5");
|
||||
marker.setAttribute("orient", "0deg");
|
||||
defs.appendChild(marker);
|
||||
|
||||
var polyline = createSVGElement("polyline");
|
||||
polyline.setAttribute("id", "polyline");
|
||||
polyline.setAttribute("points", "0,0 10,5 0,10 1,5");
|
||||
polyline.setAttribute("fill", "green");
|
||||
marker.appendChild(polyline);
|
||||
|
||||
var path = createSVGElement("path");
|
||||
path.setAttribute("id", "path");
|
||||
path.setAttribute("d", "M45,50 L55,50");
|
||||
path.setAttribute("stroke-width","10");
|
||||
path.setAttribute("stroke", "green");
|
||||
path.setAttribute("marker-end", "url(#marker)");
|
||||
path.setAttribute("onclick", "executeTest()");
|
||||
|
||||
var animate = createSVGElement("animate");
|
||||
animate.setAttribute("id", "animation");
|
||||
animate.setAttribute("attributeName", "orient");
|
||||
animate.setAttribute("begin", "0s");
|
||||
animate.setAttribute("dur", "4s");
|
||||
animate.setAttribute("from", "0rad");
|
||||
animate.setAttribute("to", "200grad");
|
||||
marker.appendChild(animate);
|
||||
rootSVGElement.appendChild(defs);
|
||||
rootSVGElement.appendChild(path);
|
||||
|
||||
// Setup animation test
|
||||
function sample1() {
|
||||
// Check initial/end conditions
|
||||
assert_approx_equals(marker.orientAngle.animVal.value, 0, epsilon);
|
||||
assert_equals(marker.orientAngle.baseVal.value, 0);
|
||||
|
||||
assert_equals(marker.orientType.animVal, SVGMarkerElement.SVG_MARKER_ORIENT_ANGLE);
|
||||
assert_equals(marker.orientType.baseVal, SVGMarkerElement.SVG_MARKER_ORIENT_ANGLE);
|
||||
}
|
||||
|
||||
function sample2() {
|
||||
assert_approx_equals(marker.orientAngle.animVal.value, 90, epsilon);
|
||||
assert_equals(marker.orientAngle.baseVal.value, 0);
|
||||
|
||||
assert_equals(marker.orientType.animVal, SVGMarkerElement.SVG_MARKER_ORIENT_ANGLE);
|
||||
assert_equals(marker.orientType.baseVal, SVGMarkerElement.SVG_MARKER_ORIENT_ANGLE);
|
||||
}
|
||||
|
||||
function sample3() {
|
||||
assert_approx_equals(marker.orientAngle.animVal.value, 180, epsilon);
|
||||
assert_equals(marker.orientAngle.baseVal.value, 0);
|
||||
|
||||
assert_equals(marker.orientType.animVal, SVGMarkerElement.SVG_MARKER_ORIENT_ANGLE);
|
||||
assert_equals(marker.orientType.baseVal, SVGMarkerElement.SVG_MARKER_ORIENT_ANGLE);
|
||||
}
|
||||
|
||||
smil_async_test((t) => {
|
||||
const expectedValues = [
|
||||
// [animationId, time, sampleCallback]
|
||||
["animation", 0.0, sample1],
|
||||
["animation", 2.0, sample2],
|
||||
["animation", 3.999, sample3],
|
||||
["animation", 4.001, sample1]
|
||||
];
|
||||
|
||||
runAnimationTest(t, expectedValues);
|
||||
});
|
||||
|
||||
</script>
|
||||
|
|
@ -0,0 +1,76 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<meta charset="utf-8">
|
||||
<title>Test 'to' animation of SVGBoolean.</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 defs = createSVGElement("defs");
|
||||
rootSVGElement.appendChild(defs);
|
||||
|
||||
var filter = createSVGElement("filter");
|
||||
filter.setAttribute("id", "filter");
|
||||
defs.appendChild(filter);
|
||||
|
||||
var feConvolveMatrix = createSVGElement("feConvolveMatrix");
|
||||
feConvolveMatrix.setAttribute("id", "effect");
|
||||
feConvolveMatrix.setAttribute("kernelMatrix", "0 0 0 0 1 0 0 0 0");
|
||||
feConvolveMatrix.setAttribute("preserveAlpha", "false");
|
||||
filter.appendChild(feConvolveMatrix);
|
||||
|
||||
var rect = createSVGElement("rect");
|
||||
rect.setAttribute("id", "rect");
|
||||
rect.setAttribute("width", "100");
|
||||
rect.setAttribute("height", "100");
|
||||
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", "preserveAlpha");
|
||||
animate.setAttribute("begin", "0s");
|
||||
animate.setAttribute("dur", "4s");
|
||||
animate.setAttribute("from", "false");
|
||||
animate.setAttribute("to", "true");
|
||||
feConvolveMatrix.appendChild(animate);
|
||||
|
||||
// Setup animation test
|
||||
function sample1() {
|
||||
assert_equals(feConvolveMatrix.preserveAlpha.animVal, false);
|
||||
assert_equals(feConvolveMatrix.preserveAlpha.baseVal, false);
|
||||
}
|
||||
|
||||
function sample2() {
|
||||
assert_equals(feConvolveMatrix.preserveAlpha.animVal, false);
|
||||
assert_equals(feConvolveMatrix.preserveAlpha.baseVal, false);
|
||||
}
|
||||
|
||||
function sample3() {
|
||||
assert_equals(feConvolveMatrix.preserveAlpha.animVal, true);
|
||||
assert_equals(feConvolveMatrix.preserveAlpha.baseVal, false);
|
||||
}
|
||||
|
||||
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>
|
||||
|
|
@ -0,0 +1,76 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<meta charset="utf-8">
|
||||
<title>Test SVGUnitTypes enumeration animations</title>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/SVGAnimationTestCase-testharness.js"></script>
|
||||
|
||||
<svg>
|
||||
</svg>
|
||||
|
||||
<script>
|
||||
var rootSVGElement = document.querySelector("svg");
|
||||
var epsilon = 1.0;
|
||||
|
||||
// Setup test document
|
||||
var defs = createSVGElement("defs");
|
||||
rootSVGElement.appendChild(defs);
|
||||
|
||||
var pattern = createSVGElement("pattern");
|
||||
pattern.setAttribute("id", "pattern");
|
||||
pattern.setAttribute("patternUnits", "userSpaceOnUse");
|
||||
pattern.setAttribute("patternContentUnits", "userSpaceOnUse");
|
||||
pattern.setAttribute("width", "50");
|
||||
pattern.setAttribute("height", "50");
|
||||
defs.appendChild(pattern);
|
||||
|
||||
var patternChild = createSVGElement("rect");
|
||||
patternChild.setAttribute("width", "1");
|
||||
patternChild.setAttribute("height", "1");
|
||||
patternChild.setAttribute("fill", "green");
|
||||
pattern.appendChild(patternChild);
|
||||
|
||||
var rect = createSVGElement("rect");
|
||||
rect.setAttribute("id", "rect");
|
||||
rect.setAttribute("width", "100");
|
||||
rect.setAttribute("height", "100");
|
||||
rect.setAttribute("fill", "url(#pattern)");
|
||||
rect.setAttribute("onclick", "executeTest()");
|
||||
rootSVGElement.appendChild(rect);
|
||||
|
||||
var animate = createSVGElement("animate");
|
||||
animate.setAttribute("id", "animation");
|
||||
animate.setAttribute("attributeName", "patternContentUnits");
|
||||
animate.setAttribute("begin", "0s");
|
||||
animate.setAttribute("dur", "4s");
|
||||
animate.setAttribute("from", "userSpaceOnUse");
|
||||
animate.setAttribute("to", "objectBoundingBox");
|
||||
animate.setAttribute("fill", "freeze");
|
||||
pattern.appendChild(animate);
|
||||
|
||||
// Setup animation test
|
||||
function sample1() {
|
||||
assert_equals(pattern.patternContentUnits.animVal, SVGUnitTypes.SVG_UNIT_TYPE_USERSPACEONUSE);
|
||||
assert_equals(pattern.patternContentUnits.baseVal, SVGUnitTypes.SVG_UNIT_TYPE_USERSPACEONUSE);
|
||||
}
|
||||
|
||||
function sample2() {
|
||||
assert_equals(pattern.patternContentUnits.animVal, SVGUnitTypes.SVG_UNIT_TYPE_OBJECTBOUNDINGBOX);
|
||||
assert_equals(pattern.patternContentUnits.baseVal, SVGUnitTypes.SVG_UNIT_TYPE_USERSPACEONUSE);
|
||||
}
|
||||
|
||||
smil_async_test((t) => {
|
||||
const expectedValues = [
|
||||
// [animationId, time, sampleCallback]
|
||||
["animation", 0.0, sample1],
|
||||
["animation", 1.999, sample1],
|
||||
["animation", 2.001, sample2],
|
||||
["animation", 3.999, sample2],
|
||||
["animation", 4.001, sample2]
|
||||
];
|
||||
|
||||
runAnimationTest(t, expectedValues);
|
||||
});
|
||||
|
||||
</script>
|
||||
|
|
@ -0,0 +1,81 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<meta charset="utf-8">
|
||||
<title>Test SVGMarkerUnitsType enumeration animations</title>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/SVGAnimationTestCase-testharness.js"></script>
|
||||
|
||||
<svg>
|
||||
</svg>
|
||||
|
||||
<script>
|
||||
var rootSVGElement = document.querySelector("svg");
|
||||
var epsilon = 1.0;
|
||||
|
||||
// Setup test document
|
||||
var marker = createSVGElement("marker");
|
||||
marker.setAttribute("id", "marker");
|
||||
marker.setAttribute("viewBox", "0 0 10 10");
|
||||
marker.setAttribute("markerWidth", "2");
|
||||
marker.setAttribute("markerHeight", "2");
|
||||
marker.setAttribute("refX", "5");
|
||||
marker.setAttribute("refY", "5");
|
||||
marker.setAttribute("markerUnits", "userSpaceOnUse");
|
||||
|
||||
var markerPath = createSVGElement("path");
|
||||
markerPath.setAttribute("fill", "blue");
|
||||
markerPath.setAttribute("d", "M 5 0 L 10 10 L 0 10 Z");
|
||||
marker.appendChild(markerPath);
|
||||
|
||||
var defsElement = createSVGElement("defs");
|
||||
defsElement.appendChild(marker);
|
||||
rootSVGElement.appendChild(defsElement);
|
||||
|
||||
var path = createSVGElement("path");
|
||||
path.setAttribute("id", "path");
|
||||
path.setAttribute("onclick", "executeTest()");
|
||||
path.setAttribute("fill", "none");
|
||||
path.setAttribute("stroke", "green");
|
||||
path.setAttribute("stroke-width", "10");
|
||||
path.setAttribute("marker-start", "url(#marker)");
|
||||
path.setAttribute("marker-end", "url(#marker)");
|
||||
path.setAttribute("d", "M 130 135 L 180 135 L 180 185");
|
||||
path.setAttribute("transform", "translate(-130, -120)");
|
||||
rootSVGElement.appendChild(path);
|
||||
|
||||
var animate1 = createSVGElement("animate");
|
||||
animate1.setAttribute("id", "animation");
|
||||
animate1.setAttribute("attributeName", "markerUnits");
|
||||
animate1.setAttribute("begin", "0s");
|
||||
animate1.setAttribute("dur", "4s");
|
||||
animate1.setAttribute("from", "userSpaceOnUse");
|
||||
animate1.setAttribute("to", "strokeWidth");
|
||||
animate1.setAttribute("fill", "freeze");
|
||||
marker.appendChild(animate1);
|
||||
|
||||
// Setup animation test
|
||||
function sample1() {
|
||||
assert_equals(marker.markerUnits.animVal, SVGMarkerElement.SVG_MARKERUNITS_USERSPACEONUSE);
|
||||
assert_equals(marker.markerUnits.baseVal, SVGMarkerElement.SVG_MARKERUNITS_USERSPACEONUSE);
|
||||
}
|
||||
|
||||
function sample2() {
|
||||
assert_equals(marker.markerUnits.animVal, SVGMarkerElement.SVG_MARKERUNITS_STROKEWIDTH);
|
||||
assert_equals(marker.markerUnits.baseVal, SVGMarkerElement.SVG_MARKERUNITS_USERSPACEONUSE);
|
||||
}
|
||||
|
||||
smil_async_test((t) => {
|
||||
const expectedValues = [
|
||||
// [animationId, time, sampleCallback]
|
||||
["animation", 0.0, sample1],
|
||||
["animation", 1.999, sample1],
|
||||
["animation", 2.001, sample2],
|
||||
["animation", 3.999, sample2],
|
||||
["animation", 4.001, sample2]
|
||||
];
|
||||
|
||||
runAnimationTest(t, expectedValues);
|
||||
});
|
||||
|
||||
</script>
|
||||
|
|
@ -0,0 +1,95 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<meta charset="utf-8">
|
||||
<title>Test BlendModeType enumeration animations</title>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/SVGAnimationTestCase-testharness.js"></script>
|
||||
|
||||
<svg>
|
||||
</svg>
|
||||
|
||||
<script>
|
||||
var rootSVGElement = document.querySelector("svg");
|
||||
var epsilon = 1.0;
|
||||
|
||||
// Setup test document
|
||||
var filter = createSVGElement("filter");
|
||||
filter.setAttribute("id", "filter");
|
||||
rootSVGElement.appendChild(filter);
|
||||
|
||||
var feFlood = createSVGElement("feFlood");
|
||||
feFlood.setAttribute("in", "SourceGraphic");
|
||||
feFlood.setAttribute("flood-color", "green");
|
||||
feFlood.setAttribute("flood-opacity", "0.5");
|
||||
feFlood.setAttribute("result", "img");
|
||||
filter.appendChild(feFlood);
|
||||
|
||||
var feBlend = createSVGElement("feBlend");
|
||||
feBlend.setAttribute("in", "SourceGraphic");
|
||||
feBlend.setAttribute("in2", "img");
|
||||
feBlend.setAttribute("mode", "lighten");
|
||||
filter.appendChild(feBlend);
|
||||
|
||||
var rect = createSVGElement("rect");
|
||||
rect.setAttribute("id", "rect");
|
||||
rect.setAttribute("onclick", "executeTest()");
|
||||
rect.setAttribute("filter", "url(#filter)");
|
||||
rect.setAttribute("width", "100");
|
||||
rect.setAttribute("height", "100");
|
||||
rootSVGElement.appendChild(rect);
|
||||
|
||||
var animate1 = createSVGElement("animate");
|
||||
animate1.setAttribute("id", "animation");
|
||||
animate1.setAttribute("attributeName", "mode");
|
||||
animate1.setAttribute("begin", "0s");
|
||||
animate1.setAttribute("dur", "5s");
|
||||
animate1.setAttribute("values", "normal;multiply;screen;darken;lighten");
|
||||
animate1.setAttribute("fill", "freeze");
|
||||
feBlend.appendChild(animate1);
|
||||
|
||||
// Setup animation test
|
||||
function sample1() {
|
||||
assert_equals(feBlend.mode.animVal, SVGFEBlendElement.SVG_FEBLEND_MODE_LIGHTEN);
|
||||
assert_equals(feBlend.mode.baseVal, SVGFEBlendElement.SVG_FEBLEND_MODE_LIGHTEN);
|
||||
}
|
||||
|
||||
function sample2() {
|
||||
assert_equals(feBlend.mode.animVal, SVGFEBlendElement.SVG_FEBLEND_MODE_NORMAL);
|
||||
assert_equals(feBlend.mode.baseVal, SVGFEBlendElement.SVG_FEBLEND_MODE_LIGHTEN);
|
||||
}
|
||||
|
||||
function sample3() {
|
||||
assert_equals(feBlend.mode.animVal, SVGFEBlendElement.SVG_FEBLEND_MODE_MULTIPLY);
|
||||
assert_equals(feBlend.mode.baseVal, SVGFEBlendElement.SVG_FEBLEND_MODE_LIGHTEN);
|
||||
}
|
||||
|
||||
function sample4() {
|
||||
assert_equals(feBlend.mode.animVal, SVGFEBlendElement.SVG_FEBLEND_MODE_SCREEN);
|
||||
assert_equals(feBlend.mode.baseVal, SVGFEBlendElement.SVG_FEBLEND_MODE_LIGHTEN);
|
||||
}
|
||||
|
||||
function sample5() {
|
||||
assert_equals(feBlend.mode.animVal, SVGFEBlendElement.SVG_FEBLEND_MODE_DARKEN);
|
||||
assert_equals(feBlend.mode.baseVal, SVGFEBlendElement.SVG_FEBLEND_MODE_LIGHTEN);
|
||||
}
|
||||
|
||||
smil_async_test((t) => {
|
||||
const expectedValues = [
|
||||
// [animationId, time, sampleCallback]
|
||||
["animation", 0.0, sample1],
|
||||
["animation", 0.001, sample2],
|
||||
["animation", 0.999, sample2],
|
||||
["animation", 1.001, sample3],
|
||||
["animation", 1.999, sample3],
|
||||
["animation", 2.001, sample4],
|
||||
["animation", 2.999, sample4],
|
||||
["animation", 3.001, sample5],
|
||||
["animation", 3.999, sample5],
|
||||
["animation", 4.001, sample1]
|
||||
];
|
||||
|
||||
runAnimationTest(t, expectedValues);
|
||||
});
|
||||
|
||||
</script>
|
||||
|
|
@ -0,0 +1,81 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<meta charset="utf-8">
|
||||
<title>Test SVGSpreadMethodType enumeration animations</title>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/SVGAnimationTestCase-testharness.js"></script>
|
||||
|
||||
<svg>
|
||||
</svg>
|
||||
|
||||
<script>
|
||||
var rootSVGElement = document.querySelector("svg");
|
||||
var epsilon = 1.0;
|
||||
|
||||
// Setup test document
|
||||
var gradient = createSVGElement("linearGradient");
|
||||
gradient.setAttribute("id", "gradient");
|
||||
rootSVGElement.appendChild(gradient);
|
||||
|
||||
var stop = createSVGElement("stop");
|
||||
stop.setAttribute("offset", "1");
|
||||
stop.setAttribute("stop-color", "green");
|
||||
gradient.appendChild(stop);
|
||||
|
||||
var feBlend = createSVGElement("feBlend");
|
||||
feBlend.setAttribute("in", "SourceGraphic");
|
||||
feBlend.setAttribute("in2", "img");
|
||||
feBlend.setAttribute("mode", "lighten");
|
||||
gradient.appendChild(feBlend);
|
||||
|
||||
var rect = createSVGElement("rect");
|
||||
rect.setAttribute("id", "rect");
|
||||
rect.setAttribute("onclick", "executeTest()");
|
||||
rect.setAttribute("fill", "url(#gradient)");
|
||||
rect.setAttribute("width", "100");
|
||||
rect.setAttribute("height", "100");
|
||||
rootSVGElement.appendChild(rect);
|
||||
|
||||
var animate1 = createSVGElement("animate");
|
||||
animate1.setAttribute("id", "animation");
|
||||
animate1.setAttribute("attributeName", "spreadMethod");
|
||||
animate1.setAttribute("begin", "0s");
|
||||
animate1.setAttribute("dur", "3s");
|
||||
animate1.setAttribute("values", "pad;reflect;repeat");
|
||||
animate1.setAttribute("fill", "freeze");
|
||||
gradient.appendChild(animate1);
|
||||
|
||||
// Setup animation test
|
||||
function sample1() {
|
||||
assert_equals(gradient.spreadMethod.animVal, SVGGradientElement.SVG_SPREADMETHOD_PAD);
|
||||
assert_equals(gradient.spreadMethod.baseVal, SVGGradientElement.SVG_SPREADMETHOD_PAD);
|
||||
}
|
||||
|
||||
function sample2() {
|
||||
assert_equals(gradient.spreadMethod.animVal, SVGGradientElement.SVG_SPREADMETHOD_REFLECT);
|
||||
assert_equals(gradient.spreadMethod.baseVal, SVGGradientElement.SVG_SPREADMETHOD_PAD);
|
||||
}
|
||||
|
||||
function sample3() {
|
||||
assert_equals(gradient.spreadMethod.animVal, SVGGradientElement.SVG_SPREADMETHOD_REPEAT);
|
||||
assert_equals(gradient.spreadMethod.baseVal, SVGGradientElement.SVG_SPREADMETHOD_PAD);
|
||||
}
|
||||
|
||||
smil_async_test((t) => {
|
||||
const expectedValues = [
|
||||
// [animationId, time, sampleCallback]
|
||||
["animation", 0.0, sample1],
|
||||
["animation", 0.001, sample1],
|
||||
["animation", 0.999, sample1],
|
||||
["animation", 1.001, sample2],
|
||||
["animation", 1.999, sample2],
|
||||
["animation", 2.001, sample3],
|
||||
["animation", 2.999, sample3],
|
||||
["animation", 3.001, sample3]
|
||||
];
|
||||
|
||||
runAnimationTest(t, expectedValues);
|
||||
});
|
||||
|
||||
</script>
|
||||
|
|
@ -0,0 +1,103 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<meta charset="utf-8">
|
||||
<title>Test ChannelSelectorType enumeration animations</title>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/SVGAnimationTestCase-testharness.js"></script>
|
||||
|
||||
<svg>
|
||||
</svg>
|
||||
|
||||
<script>
|
||||
var rootSVGElement = document.querySelector("svg");
|
||||
var epsilon = 1.0;
|
||||
|
||||
// Setup test document
|
||||
var defsElement = createSVGElement("defs");
|
||||
rootSVGElement.appendChild(defsElement);
|
||||
|
||||
var feImage1 = createSVGElement("feImage");
|
||||
feImage1.setAttribute("result", "Map");
|
||||
feImage1.setAttributeNS(xlinkNS, "xlink:href", "../W3C-SVG-1.1/resources/sphere.png");
|
||||
|
||||
var feImage2 = createSVGElement("feImage");
|
||||
feImage2.setAttribute("result", "Texture");
|
||||
feImage2.setAttributeNS(xlinkNS, "xlink:href", "../W3C-SVG-1.1/resources/DisplaceChecker.png");
|
||||
|
||||
var displacementMap = createSVGElement("feDisplacementMap");
|
||||
displacementMap.setAttribute("in", "Texture");
|
||||
displacementMap.setAttribute("in2", "Map");
|
||||
displacementMap.setAttribute("scale", "64");
|
||||
displacementMap.setAttribute("xChannelSelector", "B");
|
||||
displacementMap.setAttribute("yChannelSelector", "G");
|
||||
|
||||
var filter = createSVGElement("filter");
|
||||
filter.setAttribute("id", "filter");
|
||||
filter.setAttribute("filterUnit", "objectBoundingBox");
|
||||
filter.setAttribute("x", "0");
|
||||
filter.setAttribute("y", "0");
|
||||
filter.setAttribute("width", "1");
|
||||
filter.setAttribute("height", "1");
|
||||
filter.appendChild(feImage1);
|
||||
filter.appendChild(feImage2);
|
||||
filter.appendChild(displacementMap);
|
||||
defsElement.appendChild(filter);
|
||||
|
||||
var rect = createSVGElement("rect");
|
||||
rect.setAttribute("id", "rect");
|
||||
rect.setAttribute("onclick", "executeTest()");
|
||||
rect.setAttribute("width", "100");
|
||||
rect.setAttribute("height", "100");
|
||||
rect.setAttribute("filter", "url(#filter)");
|
||||
rootSVGElement.appendChild(rect);
|
||||
|
||||
var animate1 = createSVGElement("animate");
|
||||
animate1.setAttribute("id", "animation");
|
||||
animate1.setAttribute("attributeName", "xChannelSelector");
|
||||
animate1.setAttribute("begin", "0s");
|
||||
animate1.setAttribute("dur", "4s");
|
||||
animate1.setAttribute("values", "R;G;B;A");
|
||||
animate1.setAttribute("fill", "freeze");
|
||||
displacementMap.appendChild(animate1);
|
||||
|
||||
// Setup animation test
|
||||
function sample1() {
|
||||
assert_equals(displacementMap.xChannelSelector.animVal, SVGFEDisplacementMapElement.SVG_CHANNEL_B);
|
||||
assert_equals(displacementMap.xChannelSelector.baseVal, SVGFEDisplacementMapElement.SVG_CHANNEL_B);
|
||||
}
|
||||
|
||||
function sample2() {
|
||||
assert_equals(displacementMap.xChannelSelector.animVal, SVGFEDisplacementMapElement.SVG_CHANNEL_R);
|
||||
assert_equals(displacementMap.xChannelSelector.baseVal, SVGFEDisplacementMapElement.SVG_CHANNEL_B);
|
||||
}
|
||||
|
||||
function sample3() {
|
||||
assert_equals(displacementMap.xChannelSelector.animVal, SVGFEDisplacementMapElement.SVG_CHANNEL_G);
|
||||
assert_equals(displacementMap.xChannelSelector.baseVal, SVGFEDisplacementMapElement.SVG_CHANNEL_B);
|
||||
}
|
||||
|
||||
function sample4() {
|
||||
assert_equals(displacementMap.xChannelSelector.animVal, SVGFEDisplacementMapElement.SVG_CHANNEL_A);
|
||||
assert_equals(displacementMap.xChannelSelector.baseVal, SVGFEDisplacementMapElement.SVG_CHANNEL_B);
|
||||
}
|
||||
|
||||
smil_async_test((t) => {
|
||||
const expectedValues = [
|
||||
// [animationId, time, sampleCallback]
|
||||
["animation", 0.0, sample1],
|
||||
["animation", 0.001, sample2],
|
||||
["animation", 0.999, sample2],
|
||||
["animation", 1.001, sample3],
|
||||
["animation", 1.999, sample3],
|
||||
["animation", 2.001, sample1],
|
||||
["animation", 2.999, sample1],
|
||||
["animation", 3.001, sample4],
|
||||
["animation", 3.999, sample4],
|
||||
["animation", 4.001, sample4]
|
||||
];
|
||||
|
||||
runAnimationTest(t, expectedValues);
|
||||
});
|
||||
|
||||
</script>
|
||||
|
|
@ -0,0 +1,83 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<meta charset="utf-8">
|
||||
<title>Test EdgeModeType enumeration animations</title>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/SVGAnimationTestCase-testharness.js"></script>
|
||||
|
||||
<svg>
|
||||
</svg>
|
||||
|
||||
<script>
|
||||
var rootSVGElement = document.querySelector("svg");
|
||||
var epsilon = 1.0;
|
||||
|
||||
// Setup test document
|
||||
var defs = createSVGElement("defs");
|
||||
rootSVGElement.appendChild(defs);
|
||||
|
||||
var convolveMatrix = createSVGElement("feConvolveMatrix");
|
||||
convolveMatrix.setAttribute("in", "SourceGraphic");
|
||||
convolveMatrix.setAttribute("order", "3");
|
||||
convolveMatrix.setAttribute("kernelMatrix", "3 0 3 0 0 0 3 0 3");
|
||||
convolveMatrix.setAttribute("targetX", "0");
|
||||
convolveMatrix.setAttribute("edgeMode", "wrap");
|
||||
|
||||
var filter = createSVGElement("filter");
|
||||
filter.setAttribute("id", "filter");
|
||||
filter.setAttribute("filterUnits", "userSpaceOnUse");
|
||||
filter.setAttribute("x", "0");
|
||||
filter.setAttribute("y", "0");
|
||||
filter.setAttribute("width", "200");
|
||||
filter.setAttribute("height", "200");
|
||||
filter.appendChild(convolveMatrix);
|
||||
defs.appendChild(filter);
|
||||
|
||||
var rect = createSVGElement("rect");
|
||||
rect.setAttribute("id", "rect");
|
||||
rect.setAttribute("width", "100");
|
||||
rect.setAttribute("height", "100");
|
||||
rect.setAttribute("filter", "url(#filter)");
|
||||
rect.setAttribute("onclick", "executeTest()");
|
||||
rootSVGElement.appendChild(rect);
|
||||
|
||||
var animate = createSVGElement("animate");
|
||||
animate.setAttribute("id", "animation");
|
||||
animate.setAttribute("attributeName", "edgeMode");
|
||||
animate.setAttribute("begin", "0s");
|
||||
animate.setAttribute("dur", "4s");
|
||||
animate.setAttribute("values", "duplicate;none");
|
||||
convolveMatrix.appendChild(animate);
|
||||
|
||||
// Setup animation test
|
||||
function sample1() {
|
||||
assert_equals(convolveMatrix.edgeMode.animVal, SVGFEConvolveMatrixElement.SVG_EDGEMODE_WRAP);
|
||||
assert_equals(convolveMatrix.edgeMode.baseVal, SVGFEConvolveMatrixElement.SVG_EDGEMODE_WRAP);
|
||||
}
|
||||
|
||||
function sample2() {
|
||||
assert_equals(convolveMatrix.edgeMode.animVal, SVGFEConvolveMatrixElement.SVG_EDGEMODE_DUPLICATE);
|
||||
assert_equals(convolveMatrix.edgeMode.baseVal, SVGFEConvolveMatrixElement.SVG_EDGEMODE_WRAP);
|
||||
}
|
||||
|
||||
function sample3() {
|
||||
assert_equals(convolveMatrix.edgeMode.animVal, SVGFEConvolveMatrixElement.SVG_EDGEMODE_NONE);
|
||||
assert_equals(convolveMatrix.edgeMode.baseVal, SVGFEConvolveMatrixElement.SVG_EDGEMODE_WRAP);
|
||||
}
|
||||
|
||||
smil_async_test((t) => {
|
||||
const expectedValues = [
|
||||
// [animationId, time, sampleCallback]
|
||||
["animation", 0.0, sample1],
|
||||
["animation", 0.001, sample2],
|
||||
["animation", 1.999, sample2],
|
||||
["animation", 2.001, sample3],
|
||||
["animation", 3.999, sample3],
|
||||
["animation", 4.001, sample1]
|
||||
];
|
||||
|
||||
runAnimationTest(t, expectedValues);
|
||||
});
|
||||
|
||||
</script>
|
||||
Loading…
Add table
Add a link
Reference in a new issue