83 lines
3.2 KiB
HTML
83 lines
3.2 KiB
HTML
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
|
|
<html>
|
|
<head>
|
|
<script src="../../resources/js-test-pre.js"></script>
|
|
<script src="../dynamic-updates/resources/SVGTestCase.js"></script>
|
|
<script src="resources/SVGAnimationTestCase.js"></script>
|
|
</head>
|
|
<body onload="runSMILTest()">
|
|
<h1>SVG 1.1 dynamic animation tests</h1>
|
|
<p id="description"></p>
|
|
<div id="console"></div>
|
|
<script>
|
|
description("This tests fill=remove for animate and animateMotion");
|
|
embedSVGTestCase("resources/fill-remove-support.svg");
|
|
|
|
// Setup animation test
|
|
function sampleAnimateBeforeOrAfter() {
|
|
debug("");
|
|
debug("Check state before/after animation");
|
|
shouldBeCloseEnough("animateMotionRect.getBoundingClientRect().x", "10");
|
|
shouldBeCloseEnough("animateMotionRect.getBBox().x", "10");
|
|
shouldBeCloseEnough("animateRect.getBBox().x", "10");
|
|
shouldBeCloseEnough("animateRect.getBoundingClientRect().x", "10");
|
|
shouldBeCloseEnough("animateRect.x.animVal.value", "10");
|
|
shouldBe("animateRect.x.baseVal.value", "10");
|
|
}
|
|
|
|
function sampleAnimateBegin() {
|
|
debug("");
|
|
debug("Check state right after the beginning of the animation");
|
|
shouldBeCloseEnough("animateMotionRect.getBoundingClientRect().x", "20");
|
|
shouldBeCloseEnough("animateMotionRect.getBBox().x", "10");
|
|
shouldBeCloseEnough("animateRect.getBBox().x", "20");
|
|
shouldBeCloseEnough("animateRect.getBoundingClientRect().x", "20");
|
|
shouldBeCloseEnough("animateRect.x.animVal.value", "20");
|
|
shouldBe("animateRect.x.baseVal.value", "10");
|
|
}
|
|
|
|
function sampleAnimateMiddle() {
|
|
debug("");
|
|
debug("Check state in the middle of the animation");
|
|
shouldBeCloseEnough("animateMotionRect.getBoundingClientRect().x", "115");
|
|
shouldBeCloseEnough("animateMotionRect.getBBox().x", "10");
|
|
shouldBeCloseEnough("animateRect.getBBox().x", "115");
|
|
shouldBeCloseEnough("animateRect.getBoundingClientRect().x", "115");
|
|
shouldBeCloseEnough("animateRect.x.animVal.value", "115");
|
|
shouldBe("animateRect.x.baseVal.value", "10");
|
|
}
|
|
|
|
function sampleAnimateEnd() {
|
|
debug("");
|
|
debug("Check state just before the end of the animation");
|
|
shouldBeCloseEnough("animateMotionRect.getBoundingClientRect().x", "210");
|
|
shouldBeCloseEnough("animateMotionRect.getBBox().x", "10");
|
|
shouldBeCloseEnough("animateRect.getBBox().x", "210");
|
|
shouldBeCloseEnough("animateRect.getBoundingClientRect().x", "210");
|
|
shouldBeCloseEnough("animateRect.x.animVal.value", "210");
|
|
shouldBe("animateRect.x.baseVal.value", "10");
|
|
}
|
|
|
|
function executeTest() {
|
|
animateMotionRect = rootSVGElement.ownerDocument.getElementById("animateMotionRect");
|
|
animateRect = rootSVGElement.ownerDocument.getElementById("animateRect");
|
|
|
|
const expectedValues = [
|
|
// [animationId, time, sampleCallback]
|
|
[ "animate", -0.5, sampleAnimateBeforeOrAfter ],
|
|
[ "animate", 0.0, sampleAnimateBegin ],
|
|
[ "animate", 1.0, sampleAnimateMiddle ],
|
|
[ "animate", 1.9999, sampleAnimateEnd ],
|
|
[ "animate", 2.0, sampleAnimateBeforeOrAfter ],
|
|
[ "animate", 3.0, sampleAnimateBeforeOrAfter ]
|
|
];
|
|
|
|
runAnimationTest(expectedValues);
|
|
}
|
|
|
|
window.animationStartsImmediately = true;
|
|
var successfullyParsed = true;
|
|
</script>
|
|
</body>
|
|
</html>
|