animate-elem-78-t ← index → animate-elem-81-t

SVG Image | PNG Image

#### Operator script (click here to toggle)

Run the test. No interaction required.

#### Pass Criteria

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.

animate-elem-78-t ← index → animate-elem-81-t