animate-elem-34-t.svg

Run the test. No interaction required.

The test is passed if all of the following conditions are met:

• The red path in the shape of the digit "1" morphs continuously over three seconds (from 1s to 4s in document time) to the shape of "2", "3" and then "4". The gray paths show the four shapes and positions that the red path takes as it morphs.
• Initially, when the document is loaded, of the four paths underneath each of the four digits, the second one is u-shaped, while the other three are square shaped. The first path is red, while the remaining three are gray.
• From 1s to 2s, the path below the "1" digit is red and square-shaped and the others are gray and u-shaped.
• From 2s to 3s, the path below the "2" digit is red and square-shaped and the others are gray and u-shaped.
• From 3s to 4s, the path below the "3" digit is red and square-shaped and the others are gray and u-shaped.
• From 4s onwards, the path below the "4" digit is red and square-shaped and the others are gray and u-shaped.

The purpose of this test is to test animation of attributes points and fill-rule.

The test consists of 2 sub-tests. The first test is a polygon shaped as a digit. The polygon has an animation on its vertex points which morphs the polygon between the numbers 1, 2, 3 and 4. The gray outlines indicates the expected position of the polygon at 1, 2, 3 and 4s. The second test is 4 paths in a u-shape. They have animated fill-rules. Their initial fill-rules are, from left to right, nonzero, evenodd, nonzero (by default value, no fill-rule attribute set) and nonzero (by default value, no fill-rule attribute set). This means, that the second path is initially u-shaped, and all other paths are initially rect-shaped. All four animations are set to evenodd as a last stage. The further expected result is that one path at a time is filled. The other three paths are not filled but have the u-shape. The fourth animation from evenodd to nonzero happens by going back to the initial state, because the fill attribute is not set to freeze. Which path that should be filled at which time is indicated by the number above it (indicating time in seconds). To enhance the difference between the filled path and the rest, the filled path should always have the same color as the morphing polygon. This is achieved by a discrete color animation.