animate-elem-80-t.svg

Run the test. No interaction required.

The test has eight sub-tests, each of which consists of a brown shape being animated in some way with the animation starting two seconds after the document is loaded. Gray shapes are used to indicate points along the animation. The test passes if the brown shape in each of the sub-tests is animated correctly, according to the following descriptions:

• In the two "type=rotate" sub-tests, the brown line is rotated clockwise about one of its end points for one complete revolution, and then immediately performs the reverse animation where it is rotated anti-clockwise for one complete revolution. During the animation, whenever the other end point of the line coincides with one of the gray filled circles, the circle briefly glows yellow.
• In the "type=skewX" sub-test, the brown line continuously skewed. It starts off coinciding with the middle gray silhouette, and then over the course of the animation coincides with the left gray silhouette, the middle one, the right one and finally the middle one again. During the animation, whenever the brown line coincides with one of the gray silhouettes, the silhouette briefly glows yellow.
• In the "type=skewY" sub-test, the brown line continuously skewed. It starts off coinciding with the middle gray silhouette, and then over the course of the animation coincides with the top gray silhouette, the middle one, the bottom one and finally the middle one again. During the animation, whenever the brown line coincides with one of the gray silhouettes, the silhouette briefly glows yellow.
• In the two "type=translate" sub-tests, the brown circle is continuously translated. It starts off coinciding with the left-most gray circle, and over the course of the animation coincides each of the other gray circles from left to right. During the animation, whenever the brown circle coincides with one of the gray circles, the circle briefly glows yellow.
• In the two "type=scale" sub-tests, the brown circle is continuously scaled. There are four concentric gray stroked circles indicating the sizes the brown circle will take during the animation, although they are only all visible at the end of the animation. (Initially only the largest one is visible.) The brown circle starts off with a size coinciding with the largest gray circle, and over the course of the animation coincides each of the other gray circles from outside in. During the animation, whenever the brown circle coincides with one of the gray circles, the circle briefly glows yellow.

This test demonstrates validates the operation of the animateTransform element and validates the operation of the different type attribute values.

There are 5 possible values for the type attribute and there is one animateTransform for each type and two for the translate type.

For each transform type, the test has a corresponding animateTransform. The test uses references to show what the expected transform should be at different points in the animation. For example, the top left animateTransform, for type=rotate, shows circular markers which turn orange at the time of corresponding transform value should be set by the animateTransform. The marker elements show the expected transform value on reference markers in the test.