animate-elem-40-t.svg

Run the test. No interaction required.

Over the course of four seconds, the positions and sizes of elements within the document are animated. The test passes if the following conditions are met:

• In the first four subtests, the shape, image or text moves clockwise once along the perimeter of a square whose corners are indicated by the small grey squares.
• In the fifth subtest ("x/y on <text>(2)"), the number "1" moves clockwise along the perimeter of a square as in the first four subtests, while the number "2" does the same except in an anti-clockise direction.
• In the sixth subtest, the width and height of the image are animated continously, from the initial square size, to the wide and short rectangle, to the narrow and tall rectangle, and back to the square. At each point when it reaches one of these key sizes, the yellow outline indicating the size is shown thicker momentarily. This animation takes only three seconds.
• In the seventh subtest, the gray rectangle's width and height are animated in the same way as the image in the sixth subtest.

This test validates that the x and y attributes can be animated on <use>, <image>, <rect> and <text> elements. The test also validates that the width and height attributes can be animated on <image> and <rect>

For x and y animation, each test shows the reference positions at specific points in the animation. These markers are highlighted at the time the target element's x/y position should match that of the marker. For the <text> element, there are two tests. The first one tests animating a single value on the text's x and y attributes. The second one tests animating x, y values where there are values for each of the text's characters. For that test (bottom left), there is a set of reference markers for each of the characters ('1' and '2').

For width and height animation (the two tests on the bottom right), the outline showing the expected width and height at given points in the animation is highlighted at the time the marker's width and height should match that of the target element.