| <!doctype html> |
| <html> |
| <meta charset="utf-8"> |
| <title>This by animation for all XML property types</title> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <script src="/resources/SVGAnimationTestCase-testharness.js"></script> |
| |
| <?xml version="1.0" encoding="UTF-8"?> |
| <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Tiny//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-tiny.dtd"> |
| <svg id="svg" viewBox="0 0 300 300" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> |
| |
| <!-- All additive types except AnimatedPath are tested here --> |
| <defs> |
| <marker id="marker" viewBox="0 0 10 10" markerWidth="4" markerHeight="3" refX="1" refY="5" orient="-45deg"> |
| <polyline id="polyline" points="0,0 10,5 0,10 1,5" fill="green"/> |
| </marker> |
| |
| <filter id="filter"> |
| <feConvolveMatrix id="feConvolveMatrix" kernelUnitLength="20 30" kernelMatrix="0 1 0 0 1 0 0 1 0" divisor="37.5" order="6 6" targetX="5" preserveAlpha="false"/> |
| </filter> |
| </defs> |
| |
| <!-- Non-additive types AnimatedBoolean, AnimatedEnumeration, AnimatedPreserveAspectRatio, AnimatedString are tested in non-additive-type-by-animation.svg --> |
| |
| <path id="path" d="M45,50 L55,50" transform="rotate(45)" stroke-width="10" stroke="green" marker-end="url(#marker)"/> |
| <rect id="rect" y="0" width="100" height="100" fill="black" filter="url(#filter)"/> |
| <text id="text" x="50" y="50" dy="5 -10 10 -10">ABCD</text> |
| |
| <!-- AnimatedAngle --> |
| <animate id="an1" xlink:href="#marker" attributeName="orient" begin="0s" dur="4s" by="45deg" fill="freeze"/> |
| |
| <!-- AnimatedColor --> |
| <animate xlink:href="#rect" attributeName="fill" begin="0s" dur="4s" by="green" fill="freeze"/> |
| |
| <!-- AnimatedLength --> |
| <animate xlink:href="#rect" attributeName="y" begin="0s" dur="4s" by="100" fill="freeze"/> |
| |
| <!-- AnimatedLengthList --> |
| <animate xlink:href="#text" attributeName="dy" begin="0s" dur="4s" by="-10 20 -20 20" fill="freeze"/> |
| |
| <!-- AnimatedNumberOptionalNumber --> |
| <animate xlink:href="#feConvolveMatrix" attributeName="kernelUnitLength" begin="0s" dur="4s" by="-10 -20" fill="freeze"/> |
| |
| <!-- AnimatedNumber --> |
| <animate xlink:href="#feConvolveMatrix" attributeName="divisor" begin="0s" dur="4s" by="-17.5" fill="freeze"/> |
| |
| <!-- AnimatedNumberList --> |
| <animate xlink:href="#feConvolveMatrix" attributeName="kernelMatrix" begin="0s" dur="4s" by="2 1 3 2 1 3 2 1 3" fill="freeze"/> |
| |
| <!-- AnimatedIntegerOptionalInteger --> |
| <animate xlink:href="#feConvolveMatrix" attributeName="order" begin="0s" dur="4s" by="-3 -3" fill="freeze"/> |
| |
| <!-- AnimatedInteger --> |
| <animate xlink:href="#feConvolveMatrix" attributeName="targetX" begin="0s" dur="4s" by="-4" fill="freeze"/> |
| |
| <!-- AnimatedPoints --> |
| <animate xlink:href="#polyline" attributeName="points" begin="0s" dur="4s" by="0,0 10,5 0,10 1,5" fill="freeze"/> |
| |
| <!-- AnimatedRect --> |
| <animate xlink:href="#svg" attributeName="viewBox" begin="0s" dur="4s" by="0 0 -100 -100" fill="freeze"/> |
| |
| <!-- AnimatedTransformList --> |
| <animateTransform xlink:href="#path" attributeName="transform" type="rotate" begin="0s" dur="4s" by="-45" fill="freeze"/> |
| |
| </svg> |
| |
| <script> |
| var rootSVGElement = document.querySelector("svg"); |
| var epsilon = 1.0; |
| |
| // Setup animation test |
| function checkBaseVal() { |
| assert_equals(marker.orientAngle.baseVal.value, -45); |
| assert_equals(feConvolveMatrix.divisor.baseVal, 37.5); |
| assert_equals(feConvolveMatrix.orderX.baseVal, 6); |
| assert_equals(feConvolveMatrix.orderY.baseVal, 6); |
| assert_equals(feConvolveMatrix.targetX.baseVal, 5); |
| assert_equals(feConvolveMatrix.kernelUnitLengthX.baseVal, 20); |
| assert_equals(feConvolveMatrix.kernelUnitLengthY.baseVal, 30); |
| assert_equals(feConvolveMatrix.kernelMatrix.baseVal.numberOfItems, 9); |
| assert_equals(feConvolveMatrix.kernelMatrix.baseVal.getItem(0).value, 0); |
| assert_equals(feConvolveMatrix.kernelMatrix.baseVal.getItem(1).value, 1); |
| assert_equals(feConvolveMatrix.kernelMatrix.baseVal.getItem(2).value, 0); |
| assert_equals(feConvolveMatrix.kernelMatrix.baseVal.getItem(3).value, 0); |
| assert_equals(feConvolveMatrix.kernelMatrix.baseVal.getItem(4).value, 1); |
| assert_equals(feConvolveMatrix.kernelMatrix.baseVal.getItem(5).value, 0); |
| assert_equals(feConvolveMatrix.kernelMatrix.baseVal.getItem(6).value, 0); |
| assert_equals(feConvolveMatrix.kernelMatrix.baseVal.getItem(7).value, 1); |
| assert_equals(feConvolveMatrix.kernelMatrix.baseVal.getItem(8).value, 0); |
| assert_equals(rect.y.baseVal.value, 0); |
| assert_equals(text.dy.baseVal.numberOfItems, 4); |
| assert_equals(text.dy.baseVal.getItem(0).value, 5); |
| assert_equals(text.dy.baseVal.getItem(1).value, -10); |
| assert_equals(text.dy.baseVal.getItem(2).value, 10); |
| assert_equals(text.dy.baseVal.getItem(3).value, -10); |
| assert_equals(svg.viewBox.baseVal.x, 0); |
| assert_equals(svg.viewBox.baseVal.y, 0); |
| assert_equals(svg.viewBox.baseVal.width, 300); |
| assert_equals(svg.viewBox.baseVal.height, 300); |
| assert_equals(polyline.points.numberOfItems, 4); |
| assert_equals(polyline.points.getItem(0).x, 0); |
| assert_equals(polyline.points.getItem(0).y, 0); |
| assert_equals(polyline.points.getItem(1).x, 10); |
| assert_equals(polyline.points.getItem(1).y, 5); |
| assert_equals(polyline.points.getItem(1).x, 10); |
| assert_equals(polyline.points.getItem(1).y, 5); |
| assert_equals(polyline.points.getItem(2).x, 0); |
| assert_equals(polyline.points.getItem(2).y, 10); |
| assert_equals(path.transform.baseVal.numberOfItems, 1); |
| assert_equals(path.transform.baseVal.getItem(0).type, SVGTransform.SVG_TRANSFORM_ROTATE); |
| assert_equals(path.transform.baseVal.getItem(0).angle, 45); |
| } |
| |
| function sample1() { |
| assert_approx_equals(marker.orientAngle.animVal.value, -45, epsilon); |
| assert_approx_equals(feConvolveMatrix.divisor.animVal, 37.5, epsilon); |
| assert_approx_equals(feConvolveMatrix.orderX.animVal, 6, epsilon); |
| assert_approx_equals(feConvolveMatrix.orderY.animVal, 6, epsilon); |
| assert_approx_equals(feConvolveMatrix.targetX.animVal, 5, epsilon); |
| assert_approx_equals(feConvolveMatrix.kernelUnitLengthX.animVal, 20, epsilon); |
| assert_approx_equals(feConvolveMatrix.kernelUnitLengthY.animVal, 30, epsilon); |
| assert_equals(feConvolveMatrix.kernelMatrix.animVal.numberOfItems, 9); |
| assert_approx_equals(feConvolveMatrix.kernelMatrix.animVal.getItem(0).value, 0, epsilon); |
| assert_approx_equals(feConvolveMatrix.kernelMatrix.animVal.getItem(1).value, 1, epsilon); |
| assert_approx_equals(feConvolveMatrix.kernelMatrix.animVal.getItem(2).value, 0, epsilon); |
| assert_approx_equals(feConvolveMatrix.kernelMatrix.animVal.getItem(3).value, 0, epsilon); |
| assert_approx_equals(feConvolveMatrix.kernelMatrix.animVal.getItem(4).value, 1, epsilon); |
| assert_approx_equals(feConvolveMatrix.kernelMatrix.animVal.getItem(5).value, 0, epsilon); |
| assert_approx_equals(feConvolveMatrix.kernelMatrix.animVal.getItem(6).value, 0, epsilon); |
| assert_approx_equals(feConvolveMatrix.kernelMatrix.animVal.getItem(7).value, 1, epsilon); |
| assert_approx_equals(feConvolveMatrix.kernelMatrix.animVal.getItem(8).value, 0, epsilon); |
| assert_approx_equals(rect.y.animVal.value, 0, epsilon); |
| assert_equals(text.dy.animVal.numberOfItems, 4); |
| assert_approx_equals(text.dy.animVal.getItem(0).value, 5, epsilon); |
| assert_approx_equals(text.dy.animVal.getItem(1).value, -10, epsilon); |
| assert_approx_equals(text.dy.animVal.getItem(2).value, 10, epsilon); |
| assert_approx_equals(text.dy.animVal.getItem(3).value, -10, epsilon); |
| assert_approx_equals(svg.viewBox.animVal.x, 0, epsilon); |
| assert_approx_equals(svg.viewBox.animVal.y, 0, epsilon); |
| assert_approx_equals(svg.viewBox.animVal.width, 300, epsilon); |
| assert_approx_equals(svg.viewBox.animVal.height, 300, epsilon); |
| assert_equals(polyline.animatedPoints.numberOfItems, 4); |
| assert_approx_equals(polyline.animatedPoints.getItem(0).x, 0, epsilon); |
| assert_approx_equals(polyline.animatedPoints.getItem(0).y, 0, epsilon); |
| assert_approx_equals(polyline.animatedPoints.getItem(1).x, 10, epsilon); |
| assert_approx_equals(polyline.animatedPoints.getItem(1).y, 5, epsilon); |
| assert_approx_equals(polyline.animatedPoints.getItem(1).x, 10, epsilon); |
| assert_approx_equals(polyline.animatedPoints.getItem(1).y, 5, epsilon); |
| assert_approx_equals(polyline.animatedPoints.getItem(2).x, 0, epsilon); |
| assert_approx_equals(polyline.animatedPoints.getItem(2).y, 10, epsilon); |
| assert_equals(path.transform.animVal.numberOfItems, 2); |
| assert_equals(path.transform.animVal.getItem(0).type, SVGTransform.SVG_TRANSFORM_ROTATE); |
| assert_equals(path.transform.animVal.getItem(0).angle, 45); |
| assert_equals(path.transform.animVal.getItem(1).type, SVGTransform.SVG_TRANSFORM_ROTATE); |
| assert_approx_equals(path.transform.animVal.getItem(1).angle, 0, epsilon); |
| expectFillColor(rect, 0, 0, 0); |
| checkBaseVal(); |
| } |
| |
| function sample2() { |
| assert_approx_equals(marker.orientAngle.animVal.value, -22.5, epsilon); |
| assert_approx_equals(feConvolveMatrix.divisor.animVal, 28.75, epsilon); |
| assert_approx_equals(feConvolveMatrix.orderX.animVal, 5, epsilon); |
| assert_approx_equals(feConvolveMatrix.orderY.animVal, 5, epsilon); |
| assert_approx_equals(feConvolveMatrix.targetX.animVal, 3, epsilon); |
| assert_approx_equals(feConvolveMatrix.kernelUnitLengthX.animVal, 15, epsilon); |
| assert_approx_equals(feConvolveMatrix.kernelUnitLengthY.animVal, 20, epsilon); |
| assert_equals(feConvolveMatrix.kernelMatrix.animVal.numberOfItems, 9); |
| assert_approx_equals(feConvolveMatrix.kernelMatrix.animVal.getItem(0).value, 1, epsilon); |
| assert_approx_equals(feConvolveMatrix.kernelMatrix.animVal.getItem(1).value, 1.5, epsilon); |
| assert_approx_equals(feConvolveMatrix.kernelMatrix.animVal.getItem(2).value, 1.5, epsilon); |
| assert_approx_equals(feConvolveMatrix.kernelMatrix.animVal.getItem(3).value, 1, epsilon); |
| assert_approx_equals(feConvolveMatrix.kernelMatrix.animVal.getItem(4).value, 1.5, epsilon); |
| assert_approx_equals(feConvolveMatrix.kernelMatrix.animVal.getItem(5).value, 1.5, epsilon); |
| assert_approx_equals(feConvolveMatrix.kernelMatrix.animVal.getItem(6).value, 1, epsilon); |
| assert_approx_equals(feConvolveMatrix.kernelMatrix.animVal.getItem(7).value, 1.5, epsilon); |
| assert_approx_equals(feConvolveMatrix.kernelMatrix.animVal.getItem(8).value, 1.5, epsilon); |
| assert_approx_equals(rect.y.animVal.value, 50, epsilon); |
| assert_equals(text.dy.animVal.numberOfItems, 4); |
| assert_approx_equals(text.dy.animVal.getItem(0).value, 0, epsilon); |
| assert_approx_equals(text.dy.animVal.getItem(1).value, 0, epsilon); |
| assert_approx_equals(text.dy.animVal.getItem(2).value, 0, epsilon); |
| assert_approx_equals(text.dy.animVal.getItem(3).value, 0, epsilon); |
| assert_approx_equals(svg.viewBox.animVal.x, 0, epsilon); |
| assert_approx_equals(svg.viewBox.animVal.y, 0, epsilon); |
| assert_approx_equals(svg.viewBox.animVal.width, 250, epsilon); |
| assert_approx_equals(svg.viewBox.animVal.height, 250, epsilon); |
| assert_equals(polyline.animatedPoints.numberOfItems, 4); |
| assert_approx_equals(polyline.animatedPoints.getItem(0).x, 0, epsilon); |
| assert_approx_equals(polyline.animatedPoints.getItem(0).y, 0, epsilon); |
| assert_approx_equals(polyline.animatedPoints.getItem(1).x, 15, epsilon); |
| assert_approx_equals(polyline.animatedPoints.getItem(1).y, 7.5, epsilon); |
| assert_approx_equals(polyline.animatedPoints.getItem(1).x, 15, epsilon); |
| assert_approx_equals(polyline.animatedPoints.getItem(1).y, 7.5, epsilon); |
| assert_approx_equals(polyline.animatedPoints.getItem(2).x, 0, epsilon); |
| assert_approx_equals(polyline.animatedPoints.getItem(2).y, 15, epsilon); |
| assert_equals(path.transform.animVal.numberOfItems, 2); |
| assert_equals(path.transform.animVal.getItem(0).type, SVGTransform.SVG_TRANSFORM_ROTATE); |
| assert_equals(path.transform.animVal.getItem(0).angle, 45); |
| assert_equals(path.transform.animVal.getItem(1).type, SVGTransform.SVG_TRANSFORM_ROTATE); |
| assert_approx_equals(path.transform.animVal.getItem(1).angle, -22.5, epsilon); |
| expectFillColor(rect, 0, 63, 0); |
| checkBaseVal(); |
| } |
| |
| function sample3() { |
| assert_approx_equals(marker.orientAngle.animVal.value, 0, epsilon); |
| assert_approx_equals(feConvolveMatrix.divisor.animVal, 20, epsilon); |
| assert_approx_equals(feConvolveMatrix.orderX.animVal, 3, epsilon); |
| assert_approx_equals(feConvolveMatrix.orderY.animVal, 3, epsilon); |
| assert_approx_equals(feConvolveMatrix.targetX.animVal, 1, epsilon); |
| assert_approx_equals(feConvolveMatrix.kernelUnitLengthX.animVal, 10, epsilon); |
| assert_approx_equals(feConvolveMatrix.kernelUnitLengthY.animVal, 10, epsilon); |
| assert_equals(feConvolveMatrix.kernelMatrix.animVal.numberOfItems, 9); |
| assert_approx_equals(feConvolveMatrix.kernelMatrix.animVal.getItem(0).value, 2, epsilon); |
| assert_approx_equals(feConvolveMatrix.kernelMatrix.animVal.getItem(1).value, 2, epsilon); |
| assert_approx_equals(feConvolveMatrix.kernelMatrix.animVal.getItem(2).value, 3, epsilon); |
| assert_approx_equals(feConvolveMatrix.kernelMatrix.animVal.getItem(3).value, 2, epsilon); |
| assert_approx_equals(feConvolveMatrix.kernelMatrix.animVal.getItem(4).value, 2, epsilon); |
| assert_approx_equals(feConvolveMatrix.kernelMatrix.animVal.getItem(5).value, 3, epsilon); |
| assert_approx_equals(feConvolveMatrix.kernelMatrix.animVal.getItem(6).value, 2, epsilon); |
| assert_approx_equals(feConvolveMatrix.kernelMatrix.animVal.getItem(7).value, 2, epsilon); |
| assert_approx_equals(feConvolveMatrix.kernelMatrix.animVal.getItem(8).value, 3, epsilon); |
| assert_approx_equals(rect.y.animVal.value, 100, epsilon); |
| assert_equals(text.dy.animVal.numberOfItems, 4); |
| assert_approx_equals(text.dy.animVal.getItem(0).value, -5, epsilon); |
| assert_approx_equals(text.dy.animVal.getItem(1).value, 10, epsilon); |
| assert_approx_equals(text.dy.animVal.getItem(2).value, -10, epsilon); |
| assert_approx_equals(text.dy.animVal.getItem(3).value, 10, epsilon); |
| assert_approx_equals(svg.viewBox.animVal.x, 0, epsilon); |
| assert_approx_equals(svg.viewBox.animVal.y, 0, epsilon); |
| assert_approx_equals(svg.viewBox.animVal.width, 200, epsilon); |
| assert_approx_equals(svg.viewBox.animVal.height, 200, epsilon); |
| assert_equals(polyline.animatedPoints.numberOfItems, 4); |
| assert_approx_equals(polyline.animatedPoints.getItem(0).x, 0, epsilon); |
| assert_approx_equals(polyline.animatedPoints.getItem(0).y, 0, epsilon); |
| assert_approx_equals(polyline.animatedPoints.getItem(1).x, 20, epsilon); |
| assert_approx_equals(polyline.animatedPoints.getItem(1).y, 10, epsilon); |
| assert_approx_equals(polyline.animatedPoints.getItem(1).x, 20, epsilon); |
| assert_approx_equals(polyline.animatedPoints.getItem(1).y, 10, epsilon); |
| assert_approx_equals(polyline.animatedPoints.getItem(2).x, 0, epsilon); |
| assert_approx_equals(polyline.animatedPoints.getItem(2).y, 20, epsilon); |
| assert_equals(path.transform.animVal.numberOfItems, 2); |
| assert_equals(path.transform.animVal.getItem(0).type, SVGTransform.SVG_TRANSFORM_ROTATE); |
| assert_equals(path.transform.animVal.getItem(0).angle, 45); |
| assert_equals(path.transform.animVal.getItem(1).type, SVGTransform.SVG_TRANSFORM_ROTATE); |
| assert_approx_equals(path.transform.animVal.getItem(1).angle, -45, epsilon); |
| expectFillColor(rect, 0, 128, 0); |
| checkBaseVal(); |
| } |
| |
| smil_async_test((t) => { |
| marker = rootSVGElement.ownerDocument.getElementsByTagName("marker")[0]; |
| filter = rootSVGElement.ownerDocument.getElementsByTagName("filter")[0]; |
| feConvolveMatrix = rootSVGElement.ownerDocument.getElementsByTagName("feConvolveMatrix")[0]; |
| rect = rootSVGElement.ownerDocument.getElementsByTagName("rect")[0]; |
| svg = rootSVGElement.ownerDocument.getElementsByTagName("svg")[0]; |
| path = rootSVGElement.ownerDocument.getElementsByTagName("path")[0]; |
| polyline = rootSVGElement.ownerDocument.getElementsByTagName("polyline")[0]; |
| text = rootSVGElement.ownerDocument.getElementsByTagName("text")[0]; |
| |
| const expectedValues = [ |
| // [animationId, time, sampleCallback] |
| ["an1", 0.0, sample1], |
| ["an1", 2.0, sample2], |
| ["an1", 4.001, sample3] |
| ]; |
| |
| runAnimationTest(t, expectedValues); |
| }); |
| |
| window.animationStartsImmediately = true; |
| |
| </script> |