animate-elem-90-b.svg

This test uses the following elements : 'set', and 'animate'. It requires that CSS style sheets are supported.

The test shows a circle which is initially hidden, becomes visible and blue at 3s, abruptly changing to dark red at 5s. Two overlapping animations both animate the class attribute. The class attribute, as a string value, does not support linear interpolation so a discrete animation is produced, changing from the start to the end value midway through the animation duration.

The first animation starts at 2s and lasts for 4s so the mid point is at 3s. The second animation starts at 3s and lasts for 4s so the midpoint is at 5s. The file includes various guides that can be used to verify the correctness of the animation. The value of the class attribute at 02 is "start" so the first CSS rule matches. At 3s it becomes "midway" so the second rule matches. At 5s it becomes "final midway" so the second and third rules match; the third rule has higher specificity so determines the fill color.

The color of the large circle must match the colour of the smaller guide boxes on the left at times 0s, 3s and 5s. If the text "CSS not supported" is visible, the test does not apply.

Test that the class attribute is animatable and that style sheets select on the animated value.