51 lines
1.4 KiB
HTML
51 lines
1.4 KiB
HTML
<!doctype html>
|
|
<title>animateMotion with mpath</title>
|
|
<script src="/resources/testharness.js"></script>
|
|
<script src="/resources/testharnessreport.js"></script>
|
|
<script src="/resources/SVGAnimationTestCase-testharness.js"></script>
|
|
<svg>
|
|
<path id="route" fill="none" stroke="#666" d="M0,300 q100,-100 200,0 t200,0 t200,0 t200,0 t200,-50"/>
|
|
<g id="car">
|
|
<path id="body" d="M0,20 v-7 h7 l7,-7 h14 l7,7 h7 v7z" />
|
|
<circle class="tire" cx="10" cy="20" r="5" />
|
|
<circle class="tire" cx="32" cy="20" r="5" />
|
|
<animateMotion dur="4s" repeatCount="indefinite" fill="remove">
|
|
<mpath href="#route"/>
|
|
</animateMotion>
|
|
</g>
|
|
</svg>
|
|
<script>
|
|
const rootSVGElement = document.querySelector('svg');
|
|
const car = document.getElementById('car');
|
|
|
|
function assert_ctm_position(element, x, y) {
|
|
const ctm = element.getCTM();
|
|
const epsilon = 2;
|
|
assert_approx_equals(ctm.e, x, epsilon, 'ctm e');
|
|
assert_approx_equals(ctm.f, y, epsilon, 'ctm f');
|
|
}
|
|
|
|
function sample1() {
|
|
assert_ctm_position(car, 0, 0);
|
|
}
|
|
|
|
function sample2() {
|
|
assert_ctm_position(car, 496, 250);
|
|
}
|
|
|
|
function sample3() {
|
|
assert_ctm_position(car, 0, 300);
|
|
}
|
|
|
|
smil_async_test(t => {
|
|
const expectedValues = [
|
|
// [animationId, time, sampleCallback]
|
|
['anim', 0.0, sample1],
|
|
['anim', 2.0, sample2],
|
|
['anim', 4.0, sample3],
|
|
];
|
|
runAnimationTest(t, expectedValues);
|
|
});
|
|
|
|
window.animationStartsImmediately = true;
|
|
</script>
|