Specification link: 19.2 Animation elements

animate-dom-02-f ← index → animate-elem-03-t

Tests that contain the draft-watermark are under development and may be incorrectly testing a feature.

# animate-elem-02-t.svg
SVG Image | PNG Image

## Operator Script

Run the test. No interaction required.

## Pass Criteria

The test has passed if the four green rectangles each animate their height according to the following:

The leftmost rect:

- when the animation starts the height of the green rect should make it align with the bottommost red indicator line
- after two seconds the height should jump to be 10% of the height of the gray rect it overlaps
- after four seconds the height should jump to make the green rect align with the bottommost red indicator line
- after six seconds the height should jump to its final position, 10% of the height of the gray rect

The next to leftmost rect:

- when the animation starts the height of the green rect should be 110% of the height of the gray rect
- after two seconds the height should jump to be 20% of the height of the gray rect
- after four seconds the height should jump to be 110% of the height of the gray rect
- after six seconds the height should jump to its final position, 20% of the height of the gray rect

The next to rightmost rect:

- when the animation starts the height of the green rect should make it align with the bottommost red indicator line
- after two seconds the height should jump to be 10% of the height of the gray rect
- after four seconds the height should jump to be 110% of the height of the gray rect
- after six seconds the height should jump to its final position, 20% of the height of the gray rect

The rightmost rect:

- when the animation starts the height of the green rect should be 110% of the height of the gray rect
- after two seconds the height should jump to be 20% of the height of the gray rect
- after four seconds the height should jump to be 120% of the height of the gray rect
- after six seconds the height should jump to its final position, 30% of the height of the gray rect

## Test Description

Test 'additive' and 'accumulate' attributes.

The four pictures show the effect with the four possible combinations of 'additive' (either 'replace' or 'sum') and 'accumulate' (either 'none' or 'sum'). Because two animations are animating the height, the effects of 'additive' and 'accumulate' are sometimes different than when there is only a single animation.

animate-dom-02-f ← index → animate-elem-03-t