<!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=522306 --> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="reftest-wait" onload="setTimeAndSnapshot(1, true)"> <title>Test animation of the 'd' attribute on the 'path' element</title> <script xlink:href="smil-util.js" type="text/javascript"/> <style type="text/css"> path { fill: none; stroke: blue; stroke-width: 1px; shape-rendering: crispEdges; } </style> <!-- The difference between respective numbers in the effective 'from' and 'to' path data below is carefully designed to be a factor of 3. That way our reference file (which checks against a one third complete animation) can contain whole numbers, which is necessary to avoid failure due to hard coded rounded numbers in the reference not matching platform specific rounding behaviour. --> <!-- Test 'to' animation. --> <path d="M10,10 L19,10 l-9,18 H19 V10 h9 v18 M80,10 C80,40 80,10 89,10 S98,40 98,10 m40,0 c0,30 0,0 9,0 s9,30 9,0 M220,10 Q220,20 229,19 T238,10 M290,10 q0,10 9,9 t9,-9 M360,19 A9,9 0 1 1 378,19 M410,19 a9,9 0 1 1 18,0 "> <animate attributeName="d" calcMode="linear" begin="0s" dur="3s" to="M10,10 L40,10 l-30,60 H40 V10 h30 v60 M80,10 C110,10 95,70 110,70 S110,10 140,10 m10,0 c30,0 15,60 30,60 s0,-60 30,-60 M220,40 Q235,98 250,40 T280,40 M290,40 q15,58 30,0 t30,0 M372,70 A30,15 -90 1 1 384,70 M410,70 a30,15 -90 1 1 12,0 " fill="freeze"/> </path> <!-- Test 'by' animation. --> <path transform="translate(0, 70)" d="M10,10 L19,10 l-9,18 H19 V10 h9 v18 M80,10 C80,40 80,10 89,10 S98,40 98,10 m40,0 c0,30 0,0 9,0 s9,30 9,0 M220,10 Q220,20 229,19 T238,10 M290,10 q0,10 9,9 t9,-9 M360,19 A9,9 0 1 1 378,19 M410,19 a9,9 0 1 1 18,0 "> <animate attributeName="d" calcMode="linear" begin="0s" dur="3s" by="M0,0 L21,0 l-21,42 H21 V0 h21 v42 M0,0 C30,-30 15,60 21,60 S12,-30 42,0 m-30,0 c30,-30 15,60 21,60 s-9,-90 21,-60 M0,30 Q15,78 21,21 T42,30 M0,30 q15,48 21,-9 t21,9 M12,51 A21,6 -90 1 1 6,51 M0,51 a21,6 -90 1 1 -6,0 " fill="freeze"/> </path> <!-- Test calcMode="paced". We don't currently support paced animation, so we're just testing that we don't do anything unexpected (that we behave as if calcMode="discrete"). --> <path transform="translate(0, 140)"> <animate attributeName="d" calcMode="paced" begin="0s" dur="3s" values=" M10,10 L19,10 l-9,18 H19 V10 h9 v18 M80,10 C80,40 80,10 89,10 S98,40 98,10 m40,0 c0,30 0,0 9,0 s9,30 9,0 M220,10 Q220,20 229,19 T238,10 M290,10 q0,10 9,9 t9,-9 M360,19 A9,9 0 1 1 378,19 M410,19 a9,9 0 1 1 18,0 ; M10,10 L33,10 l-23,46 H33 V10 h23 v46 M80,10 C100,20 90,50 103,50 S106,20 126,10 m20,0 c20,10 10,40 23,40 s3,-30 23,-40 M220,30 Q230,72 243,33 T266,30 M290,30 q10,42 23,3 t23,-3 M368,53 A23,13 -60 1 1 382,53 M410,53 a23,13 -60 1 1 14,0 ; M10,10 L40,10 l-30,60 H40 V10 h30 v60 M80,10 C110,10 95,70 110,70 S110,10 140,10 m10,0 c30,0 15,60 30,60 s0,-60 30,-60 M220,40 Q235,98 250,40 T280,40 M290,40 q15,58 30,0 t30,0 M372,70 A30,15 -90 1 1 384,70 M410,70 a30,15 -90 1 1 12,0 " fill="freeze"/> </path> <!-- Test calcMode="discrete". --> <path transform="translate(0, 210)" d="M10,10 L19,10 l-9,18 H19 V10 h9 v18 M80,10 C80,40 80,10 89,10 S98,40 98,10 m40,0 c0,30 0,0 9,0 s9,30 9,0 M220,10 Q220,20 229,19 T238,10 M290,10 q0,10 9,9 t9,-9 M360,19 A9,9 0 1 1 378,19 M410,19 a9,9 0 1 1 18,0 "> <animate attributeName="d" calcMode="discrete" begin="0s" dur="2s" to="M10,10 L40,10 l-30,60 H40 V10 h30 v60 M80,10 C110,10 95,70 110,70 S110,10 140,10 m10,0 c30,0 15,60 30,60 s0,-60 30,-60 M220,40 Q235,98 250,40 T280,40 M290,40 q15,58 30,0 t30,0 M372,70 A30,15 -90 1 1 384,70 M410,70 a30,15 -90 1 1 12,0 " fill="freeze"/> </path> </svg>