Full version, Basic version, Tiny version

Specification link: 19.2 Animation elements

animate-elem-19-t ← index → animate-elem-21-t

# animate-elem-20-t
SVG Image | PNG Image

A quick animation test.

The assumption is that you will first click on "fade in" and then click on "fade out", each exactly once. The first time you select the link 'fade in', you should see a red square appearing, gradually and smoothly fading from white to red over the course of three seconds.

The rendered picture should match the reference image, (except for possible variations in the labeling text (per CSS2 rules)) after activating the link on the fade-in button the first time and waiting three seconds for the animation to compete. The picture should remain looking the same way indefinitely, until another link is activated.

With the second click on "fade in", however, the behavior might be different. In the case of having a first click on "fade in", waiting three seconds, and then immediately perform a first click on "fade out", waiting three seconds, and then immediately perform a second click on "fade in", you should see the following. After the first click on "fade in", the red square goes from white to red. After the first click on "fade out", the red square goes from red to white. After the second click on "fade in", however, the red square goes from white to red, and then goes back from red to white. This is because of the hyperlinking rules as they relate to resolved start times in the SMIL Animation specification.

animate-elem-19-t ← index → animate-elem-21-t

Distributed under both the W3C Test Suite License and the W3C 3-clause BSD License.
To contribute to a W3C Test Suite, see the policies and contribution forms.