animate-elem-03-t.svg

Run the test. No interaction required.

The test has passed if:

• the topmost line shows the text "Sample 123" that animates its fill-color smoothly from blue to green over the course of six seconds
• the middle line shows the text "Sample 123" in a larger font-size than the first line, in blue fill-color that doesn't animate
• the bottommost line shows the text "Sample 123" in the same font-size as the topmost line, then smoothly animating the font-size to be larger than the middle line over the course of six seconds. At the same time the fill-color is smoothly animated from blue to green
• after six seconds the rendered result matches the reference image

Test inheritance of animated properties.

Three colored text strings appear. All three are inside of the same 'g' element. The 'g' element has its 'font-size' animated from 30 to 40, and its 'fill' from #00f (blue) to #070 (green).

The first colored 'text' element has the font-size set, so the animation of the parent 'g' only affects the fill color. The second has the fill set and font-size set, so no inherited values are used. The font-size and fill color stay constant. The third colored 'text' element has neither of these properties specified and thus inherits both animated values - the fill color changes and the text grows in size.