SMIL 2.0 Testsuite

Animation Module

Editors:
Wo Chang (wchang@nist.gov),NIST/ITL
Thierry Michel (tmichel@w3.org),W3C

Modules: [All] [Animation] [Content] [Layout] [Linking] [Media] [Metadata] [Structure] [Timing] [Transition] [Time Manipulation] [Profile]

SMIL Animation Module (report template)
Test # Feature Test (test file) Expected Behavior  
1 basic  
1.1 animation-add-BE-05
(smil, source)
(xhtml+smil, source)
(svg, source)
  1. Nine red rectangles numbered 1 to 9 shrink to squares
  2. over 2s as follows:
  3. at 2s #1 shrinks.
  4. at 5s #2 shrinks, 1s after #1 completes
  5. #4 shrinks when it is clicked on.
  6. #5 shrinks 1s after it is clicked on.
  7. #6 shrinks 2s after it is clicked on.
  8. #7 shrinks when the accesskey '1' is pressed.
  9. #8 should be shrunk from 0s since it's wallclock time is in the past.
  10. #9 will not shrink unless a DOM call causes it to begin.
1.2 animation - tests different add and accumulate modes
(smil, source)
(xhtml+smil, source)
(svg, source)
  1. See underlay graphic.
  2. All these animations have a repeat count of 2,
  3. and all go from an animation value of 10 to 25.
  4. Rectangles #5-#8 have two simultaneous animations
  5. acting upon them.
1.3 animation-extRef-image1
(smil, source)
(xhtml+smil, source)
(svg, source)
  1. Three stacked colored bars grow to the right from 1s to 5s.
  2. Bars are frozen from 5s to 10s.
1.4 animation-extRef-image2
(smil, source)
(xhtml+smil, source)
(svg, source)
  1. Two of three stacked colored bars go from 120 to 240 pixels wide
  2. growing to the right from 1s to 5s.
  3. Bars are frozen from 5s to 10s.
1.5 animation-extRef-image3
(smil, source)
(xhtml+smil, source)
(svg, source)
  1. One of three stacked colored bars go from 240 to 356 pixels wide
  2. growing to the right from 1s to 5s.
  3. Bars are frozen from 5s to 10s.
1.6 animation - tests different add and accumulate modes
(smil, source)
(xhtml+smil, source)
  1. See underlay graphic.
  2. #4 uses an SVG specific feature as is not intended to work in SMIL.
1.7 animation-overall-BE-01
(smil, source)
(xhtml+smil, source)
(svg, source)
  1. green square grows large while little yellow square moves to the upper left.
  2. A 3s, blue rectangle appears,
  3. and then the rectangle follows a path from upper left to center while rectangle changes color to red.
1.8 animation-targElt-BE-03
(smil, source)
(xhtml+smil, source)
(svg, source)
  1. Two thick red bars 200 pixels high.
  2. Left bar shrinks from bottom starting at 3s.
  3. Stops shrinking at 6s when it is 50 pixels high.
  4. At 6s right bar begins to shrink.
  5. Stops shrinking at 9s when it is 50 pixels high.
1.9 animation-targElt-BE-04
(smil, source)
(xhtml+smil, source)
(svg, source)
  1. Two thick red squares 100 pixels on a side.
  2. Left squares shrinks from bottom starting at 3s.
  3. Stops shrinking at 6s when it is 50 pixelshigh.
  4. At 6s right squares begins to shrink.
  5. Stops shrinking at 9s when it is 50 pixels high.
1.10 animation - tests different calc modes (1)
(smil, source)
(xhtml+smil, source)
  1. See underlay graphic
1.11 animation - tests different calc modes (2)
(smil, source)
(xhtml+smil, source)
  1. See underlay graphic
1.12 animation - tests different calc modes (3)
(smil, source)
(xhtml+smil, source)
  1. See underlay graphic
3 animateColor_basic  
3.1 animateColor calcmode=discrete, additive=replace, fill=freeze
(smil, source)
(xhtml+smil, source)
  1. animateColor will begin at 1 second and have a duration of 2 seconds.
  2. At 0 seconds, the color will be GREEN - #00FF00.
  3. At 1 second, animateColor begins and the color will imediately jumps to color #00FFFF.
  4. At 2 seconds, the midpoint of animateColor, the color is still #00FFFF.
  5. At 3 seconds, the color is still #00FFFF and animateColor Ends.
  6. After animateColor ends, the timedElement should FREEZE on #00FFFF.
  7. **Note: calcmode="discrete" color values jump from one to the next without animation
3.2 animateColor calcmode=paced, additive=sum, fill=freeze
(smil, source)
(xhtml+smil, source)
  1. animateColor will begin at 1 second and have a duration of 2 seconds.
  2. At 0 seconds, the color will be GREEN - #00FF00.
  3. At 1 second, animateColor begins and the color will still be green.
  4. At 1.5 seconds, the midpoint of animateColor, the color value will be #00FF7F.
  5. At 3 seconds, the color will be #00FFFF and animateColor Ends.
  6. After animateColor ends, the timedElement should FREEZE on #00FFFF.
  7. **Note: calcmode="paced" each color value changes evenly over time duration
3.3 animateColor calcmode=discrete, additive=sum, fill=remove
(smil, source)
(xhtml+smil, source)
  1. animateColor will begin at 1 second and have a duration of 2 seconds.
  2. At 0 seconds, the color will be GREEN - #00FF00.
  3. At 1 second, animateColor begins and the color will be #00FFFF.
  4. At 1.5 seconds, the midpoint of animateColor, the color value will still be #00FFFF.
  5. At 3 seconds, the color will be #00FFFF and animateColor Ends.
  6. After animateColor ends, the timedElement should be REMOVE, displaying the color #00FF00.
  7. **Note: calcmode="discrete" color values jump from one to the next without animation
3.4 animateColor calcmode=linear, fill=remove
(smil, source)
(xhtml+smil, source)
  1. animateColor will begin at 1 second and have a duration of 2 seconds.
  2. At 0 seconds, the color will be BLACK - #000000.
  3. At 1 second, animateColor begins and the color animate towards BLUE - #0000FF.
  4. At 2 seconds, the midpoint of animateColor, the color will be #00007F.
  5. At 3 seconds, the color will be BLUE and animateColor Ends.
  6. After animateColor ends, the timedElement (BLUE) should be REMOVE, leaving the original (BLACK).
  7. **Note: calcmode="linear" color changes linear over time duration
3.5 animateColor calcmode=paced, fill=freeze
(smil, source)
(xhtml+smil, source)
  1. animateColor will begin at 1 second and have a duration of 2 seconds.
  2. At 0 seconds, the color will be WHITE (#FFFFFF).
  3. At 1 second, animateColor begins and the color will imediately turn RED (#FF0000).
  4. At 2 seconds, the midpoint of animateColor, the color will be #FF007F.
  5. At 3 seconds, the color should be #FF00FF and animateColor Ends.
  6. After animateColor ends, the timedElement should FREEZE on color #FF00FF.
  7. **Note: calcmode="paced" each color value changes evenly over time duration
3.6 animateColor calcmode=linear, additive=sum, fill=hold
(smil, source)
(xhtml+smil, source)
  1. animateColor will begin at 1 second and have a duration of 2 seconds.
  2. At 0 seconds, the color will be GREEN - #00FF00.
  3. At 1 second, animateColor begins and the color will imediately start from #FFFF00.
  4. At 1.5 seconds, the midpoint of animateColor, the color value will be #FFFF7F.
  5. At 3 seconds, the color will be WHITE (#FFFFFF) and animateColor Ends.
  6. After animateColor ends, the timedElement should HOLD on WHITE.
  7. **Note: calcmode="linear" color changes linear over time duration
3.7 animateColor calcmode=discrete, fill=remove
(smil, source)
(xhtml+smil, source)
  1. animateColor will begin at 1 second and have a duration of 2 seconds.
  2. At 0 seconds, the color will be WHITE - #FFFFFF.
  3. At 1 second, animateColor begins and the color will imediately turn RED - #FF0000.
  4. At 2 seconds, the midpoint of animateColor, the color jumps to #FF00FF.
  5. At 3 seconds, the color should be #FF00FF and animateColor Ends.
  6. After animateColor ends, the timedElement should be REMOVED, leaving the original value of #FFFFFF.
  7. **Note: calcmode="discrete" color values jump from one to the next without animation
3.8 animateColor calcmode=discrete, fill=freeze
(smil, source)
(xhtml+smil, source)
  1. animateColor will begin at 1 second and have a duration of 2 seconds.
  2. At 0 seconds, the color will be WHITE - #FFFFFF.
  3. At 1 second, animateColor begins and the color will imediately turn RED - #FF0000.
  4. At 2 seconds, the midpoint of animateColor, the color jumps to BLUE - #0000FF.
  5. At 3 seconds, the color should be BLUE and animateColor Ends.
  6. After animateColor ends, the timedElement should FREEZE on BLUE.
  7. **Note: calcmode="discrete" color values jump from one to the next without animation
3.9 animateColor calcmode=discrete, additive=sum, fill=freeze
( smil, source)
( xhtml+smil, source)
  1. animateColor will begin at 1 second and have a duration of 2 seconds.
  2. note additive=sum so that all color values have green value of FF.
  3. At 0 seconds, the color will be GREEN - #00FF00.
  4. At 1 second, animateColor begins and the color will imediately turn #FFFF00.
  5. At 2 seconds, the midpoint of animateColor, the color will still be #FFFF00.
  6. At 3 seconds, the color will turn #00FFFF and animateColor Ends.
  7. After animateColor ends, the timedElement should FREEZE on #00FFFF.
  8. **Note: calcmode="discrete" color values jump from one to the next without animation
3.10 animateColor calcmode=paced, fill=hold
(smil, source)
(xhtml+smil, source)
  1. animateColor will begin at 1 second and have a duration of 2 seconds.
  2. At 0 seconds, the color will be WHITE - #FFFFFF.
  3. At 1 second, animateColor begins and the color will imediately start from RED - #FF0000.
  4. At 2 seconds, the midpoint of animateColor, the color value will be #7F007F.
  5. At 3 seconds, the color should be BLUE - #0000FF - and animateColor Ends.
  6. After animateColor ends, the timedElement should HOLD on BLUE.
  7. **Note: calcmode="paced" each color value changes evenly over time duration
3.11 animateColor calcmode=linear, additive=sum, fill=hold
(smil, source)
(xhtml+smil, source)
  1. animateColor will begin at 1 second and have a duration of 2 seconds.
  2. note additive=sum so that all color values have green value of FF.
  3. At 0 seconds, the color will be GREEN - #00FF00.
  4. At 1 second, animateColor begins and the color will imediately start from #FFFF00.
  5. At 2 seconds, the midpoint of animateColor, the color value will be #7FFF7F.
  6. At 3 seconds, the color will be #00FFFF and animateColor Ends.
  7. After animateColor ends, the timedElement should HOLD on #00FFFF.
  8. **Note: calcmode="linear" color changes linear over time duration
3.12 animateColor calcmode=discrete, fill=remove
(smil, source)
(xhtml+smil, source)
  1. animateColor will begin at 1 second and have a duration of 2 seconds.
  2. At 0 seconds, the color will be BLACK - #000000.
  3. At 1 second, animateColor begins and the color will imediately turn BLUE - #0000FF.
  4. At 2 seconds, the midpoint of animateColor, the color stays BLUE.
  5. At 3 seconds, the color should still be BLUE and animateColor Ends.
  6. After animateColor ends, fill=remove should return the background-color to BLACK.
  7. **Note: calcmode="discrete" color values jump from one to the next without animation
3.13 animateColor calcmode=paced, additive=sum, fill=remove
(smil, source)
(xhtml+smil, source)
  1. animateColor will begin at 1 second and have a duration of 2 seconds.
  2. note additive=sum.
  3. At 0 seconds, the color will be GREEN - #00FF00.
  4. At 1 second, animateColor begins and the color will start at GREEN.
  5. At 1.5 seconds, the midpoint of animateColor, the color will be #007F7F.
  6. At 3 seconds, the color will be BLUE - #0000FF - and animateColor Ends.
  7. After animateColor ends, fill=remove should return the background-color to #00FF00.
  8. **Note: calcmode="paced" each color value changes evenly over time duration
3.14 animateColor calcmode=discrete, values list, fill=freeze
(smil, source)
(xhtml+smil, source)
  1. animateColor will begin at 1 second and have a duration of 3 seconds.
  2. At 0 seconds, the color will be WHITE - #FFFFFF.
  3. At 1 second, animateColor begins and the color will imediately turn RED - #FF0000.
  4. At 1.5 seconds, the midpoint of animateColor, the color will turn GREEN - #00FF00.
  5. At 3 seconds, the color will turn BLUE - #0000FF - and animateColor Ends.
  6. After animateColor ends, the timedElement should FREEZE on BLUE.
  7. **Note: calcmode="discrete" color values jump from one to the next without animation
3.15 animateColor calcmode=linear, values list, fill=hold
(smil, source)
(xhtml+smil, source)
  1. animateColor will begin at 1 second and have a duration of 2 seconds.
  2. At 0 seconds, the color will be WHITE - #FFFFFF.
  3. At 1 second, animateColor begins and the color will imediately start from RED - #FF0000.
  4. At 1.5 seconds, the midpoint of animateColor, the color value will be GREEN - #00FF00.
  5. At 3 seconds, the color should be BLUE - #0000FF - and animateColor Ends.
  6. After animateColor ends, the timedElement should HOLD on BLUE.
  7. **Note: calcmode="linear" color changes linear over time duration
3.16 animateColor calcmode=linear, values list, additive=sum, fill=hold
(smil, source)
(xhtml+smil, source)
  1. animateColor will begin at 1 second and have a duration of 2 seconds.
  2. note additive=sum so all colors have a red value of FF.
  3. At 0 seconds, the color will be RED - #FF0000.
  4. At 1 second, animateColor begins and the color will imediately start from RED.
  5. At 1.5 seconds, the midpoint of animateColor, the color value will be #FFFF00.
  6. At 3 seconds, the color should be #FF00FF and animateColor Ends.
  7. After animateColor ends, the timedElement should HOLD on #FF00FF.
  8. **Note: calcmode="linear" color changes linear over time duration
3.17 animateColor calcmode=discrete, values list, additive=sum, fill=remove
( smil, source)
( xhtml+smil, source)
  1. animateColor will begin at 1 second and have a duration of 2 seconds.
  2. note additive=sum so all colors have a red value of FF.
  3. At 0 seconds, the color will be RED - #FF0000.
  4. Just after 1 second, animateColor begins and the color will imediately turn to #FFFF00.
  5. At 1.5 seconds, the midpoint of animateColor, the color value will be #FF00FF.
  6. At 3 seconds, the color will still be #FF00FF and animateColor Ends.
  7. After animateColor ends, the timedElement should REMOVE, leaving the color RED.
  8. **Note: calcmode="discrete" color values jump from one to the next without animation
3.18 animateColor calcmode=paced, values list, fill=remove
(smil, source)
(xhtml+smil, source)
  1. animateColor will begin at 1 second and have a duration of 2 seconds.
  2. At 0 seconds, the color will be WHITE - #FFFFFF.
  3. At 1 second, animateColor begins and the color will imediately start from RED - #FF0000.
  4. At 1.5 seconds, the midpoint of animateColor, the color value will be GREEN - #00FF00.
  5. At 3 seconds, the color should be BLUE - #0000FF and animateColor Ends.
  6. After animateColor ends, the timedElement should REMOVE, leaving the original color, WHITE.
  7. **Note: calcmode="paced" each color value changes evenly over time duration
4 animateMotion_basic  
4.1 by with no from
(smil, source)
(xhtml+smil, source)
  1. animateColor will begin at 1 second and have a duration of 2 seconds.
  2. At 0 seconds, the color will be WHITE - #FFFFFF.
  3. At 1 second, animateColor begins and the color will imediately start from RED - #FF0000.
  4. At 1.5 seconds, the midpoint of animateColor, the color value will be GREEN - #00FF00.
  5. At 3 seconds, the color should be BLUE - #0000FF and animateColor Ends.
  6. After animateColor ends, the timedElement should REMOVE, leaving the original color, WHITE.
  7. **Note: calcmode="paced" each color value changes evenly over time duration
4.2 discrete from by additive=replace
(smil, source)
(xhtml+smil, source)
  1. top value is 45px,45px at 0s,
  2. animation begin at 2s (45px,10px)
  3. animation ends at 6s (45px, 420px)
  4. fill=remove and return to beginning value (45px,45px)
4.3 accumulate="none" repeatcount="3"
(smil, source)
(xhtml+smil, source)
  1. animateColor will begin at 1 second and have a duration of 2 seconds.
  2. At 0 seconds, the color will be WHITE - #FFFFFF.
  3. At 1 second, animateColor begins and the color will imediately start from RED - #FF0000.
  4. At 1.5 seconds, the midpoint of animateColor, the color value will be GREEN - #00FF00.
  5. At 3 seconds, the color should be BLUE - #0000FF and animateColor Ends.
  6. After animateColor ends, the timedElement should REMOVE, leaving the original color, WHITE.
  7. **Note: calcmode="paced" each color value changes evenly over time duration
4.4 from by
(smil, source)
(xhtml+smil, source)
  1. animateColor will begin at 1 second and have a duration of 2 seconds.
  2. At 0 seconds, the color will be WHITE - #FFFFFF.
  3. At 1 second, animateColor begins and the color will imediately start from RED - #FF0000.
  4. At 1.5 seconds, the midpoint of animateColor, the color value will be GREEN - #00FF00.
  5. At 3 seconds, the color should be BLUE - #0000FF and animateColor Ends.
  6. After animateColor ends, the timedElement should REMOVE, leaving the original color, WHITE.
  7. **Note: calcmode="paced" each color value changes evenly over time duration
4.5 accumulate="sum" repeatDur="8"
(smil, source)
(xhtml+smil, source)
  1. animateColor will begin at 1 second and have a duration of 2 seconds.
  2. At 0 seconds, the color will be WHITE - #FFFFFF.
  3. At 1 second, animateColor begins and the color will imediately start from RED - #FF0000.
  4. At 1.5 seconds, the midpoint of animateColor, the color value will be GREEN - #00FF00.
  5. At 3 seconds, the color should be BLUE - #0000FF and animateColor Ends.
  6. After animateColor ends, the timedElement should REMOVE, leaving the original color, WHITE.
  7. **Note: calcmode="paced" each color value changes evenly over time duration
4.6 from to additive="replace"
(smil, source)
(xhtml+smil, source)
  1. animateColor will begin at 1 second and have a duration of 2 seconds.
  2. At 0 seconds, the color will be WHITE - #FFFFFF.
  3. At 1 second, animateColor begins and the color will imediately start from RED - #FF0000.
  4. At 1.5 seconds, the midpoint of animateColor, the color value will be GREEN - #00FF00.
  5. At 3 seconds, the color should be BLUE - #0000FF and animateColor Ends.
  6. After animateColor ends, the timedElement should REMOVE, leaving the original color, WHITE.
  7. **Note: calcmode="paced" each color value changes evenly over time duration
4.7 values list calcmode="linear"
(smil, source)
(xhtml+smil, source)
  1. animateColor will begin at 1 second and have a duration of 2 seconds.
  2. At 0 seconds, the color will be WHITE - #FFFFFF.
  3. At 1 second, animateColor begins and the color will imediately start from RED - #FF0000.
  4. At 1.5 seconds, the midpoint of animateColor, the color value will be GREEN - #00FF00.
  5. At 3 seconds, the color should be BLUE - #0000FF and animateColor Ends.
  6. After animateColor ends, the timedElement should REMOVE, leaving the original color, WHITE.
  7. **Note: calcmode="paced" each color value changes evenly over time duration
4.8 by, calcmode="paced"
(smil, source)
(xhtml+smil, source)
  1. animateColor will begin at 1 second and have a duration of 2 seconds.
  2. At 0 seconds, the color will be WHITE - #FFFFFF.
  3. At 1 second, animateColor begins and the color will imediately start from RED - #FF0000.
  4. At 1.5 seconds, the midpoint of animateColor, the color value will be GREEN - #00FF00.
  5. At 3 seconds, the color should be BLUE - #0000FF and animateColor Ends.
  6. After animateColor ends, the timedElement should REMOVE, leaving the original color, WHITE.
  7. **Note: calcmode="paced" each color value changes evenly over time duration
4.9 repeatDur, accumulate="sum"
(smil, source)
(xhtml+smil, source)
  1. animateColor will begin at 1 second and have a duration of 2 seconds.
  2. At 0 seconds, the color will be WHITE - #FFFFFF.
  3. At 1 second, animateColor begins and the color will imediately start from RED - #FF0000.
  4. At 1.5 seconds, the midpoint of animateColor, the color value will be GREEN - #00FF00.
  5. At 3 seconds, the color should be BLUE - #0000FF and animateColor Ends.
  6. After animateColor ends, the timedElement should REMOVE, leaving the original color, WHITE.
  7. **Note: calcmode="paced" each color value changes evenly over time duration
4.10 to no from
(smil, source)
(xhtml+smil, source)
  1. animateColor will begin at 1 second and have a duration of 2 seconds.
  2. At 0 seconds, the color will be WHITE - #FFFFFF.
  3. At 1 second, animateColor begins and the color will imediately start from RED - #FF0000.
  4. At 1.5 seconds, the midpoint of animateColor, the color value will be GREEN - #00FF00.
  5. At 3 seconds, the color should be BLUE - #0000FF and animateColor Ends.
  6. After animateColor ends, the timedElement should REMOVE, leaving the original color, WHITE.
  7. **Note: calcmode="paced" each color value changes evenly over time duration
4.11 repeatCount accumulate="sum", to no from
(smil, source)
(xhtml+smil, source)
  1. animateColor will begin at 1 second and have a duration of 2 seconds.
  2. At 0 seconds, the color will be WHITE - #FFFFFF.
  3. At 1 second, animateColor begins and the color will imediately start from RED - #FF0000.
  4. At 1.5 seconds, the midpoint of animateColor, the color value will be GREEN - #00FF00.
  5. At 3 seconds, the color should be BLUE - #0000FF and animateColor Ends.
  6. After animateColor ends, the timedElement should REMOVE, leaving the original color, WHITE.
  7. **Note: calcmode="paced" each color value changes evenly over time duration
4.12 calcMode="paced" values
(smil, source)
(xhtml+smil, source)
  1. animateColor will begin at 1 second and have a duration of 2 seconds.
  2. At 0 seconds, the color will be WHITE - #FFFFFF.
  3. At 1 second, animateColor begins and the color will imediately start from RED - #FF0000.
  4. At 1.5 seconds, the midpoint of animateColor, the color value will be GREEN - #00FF00.
  5. At 3 seconds, the color should be BLUE - #0000FF and animateColor Ends.
  6. After animateColor ends, the timedElement should REMOVE, leaving the original color, WHITE.
  7. **Note: calcmode="paced" each color value changes evenly over time duration
4.13 begin="0s" calcMode="discrete"
(smil, source)
(xhtml+smil, source)
  1. animateColor will begin at 1 second and have a duration of 2 seconds.
  2. At 0 seconds, the color will be WHITE - #FFFFFF.
  3. At 1 second, animateColor begins and the color will imediately start from RED - #FF0000.
  4. At 1.5 seconds, the midpoint of animateColor, the color value will be GREEN - #00FF00.
  5. At 3 seconds, the color should be BLUE - #0000FF and animateColor Ends.
  6. After animateColor ends, the timedElement should REMOVE, leaving the original color, WHITE.
  7. **Note: calcmode="paced" each color value changes evenly over time duration
4.14 from by additive="sum"
(smil, source)
(xhtml+smil, source)
  1. animateColor will begin at 1 second and have a duration of 2 seconds.
  2. At 0 seconds, the color will be WHITE - #FFFFFF.
  3. At 1 second, animateColor begins and the color will imediately start from RED - #FF0000.
  4. At 1.5 seconds, the midpoint of animateColor, the color value will be GREEN - #00FF00.
  5. At 3 seconds, the color should be BLUE - #0000FF and animateColor Ends.
  6. After animateColor ends, the timedElement should REMOVE, leaving the original color, WHITE.
  7. **Note: calcmode="paced" each color value changes evenly over time duration
4.15 additive="sum",accumulate="sum" repeatCount
(smil, source)
(xhtml+smil, source)
  1. animateColor will begin at 1 second and have a duration of 2 seconds.
  2. At 0 seconds, the color will be WHITE - #FFFFFF.
  3. At 1 second, animateColor begins and the color will imediately start from RED - #FF0000.
  4. At 1.5 seconds, the midpoint of animateColor, the color value will be GREEN - #00FF00.
  5. At 3 seconds, the color should be BLUE - #0000FF and animateColor Ends.
  6. After animateColor ends, the timedElement should REMOVE, leaving the original color, WHITE.
  7. **Note: calcmode="paced" each color value changes evenly over time duration
4.16 from to additive="sum"
(smil, source)
(xhtml+smil, source)
  1. animateColor will begin at 1 second and have a duration of 2 seconds.
  2. At 0 seconds, the color will be WHITE - #FFFFFF.
  3. At 1 second, animateColor begins and the color will imediately start from RED - #FF0000.
  4. At 1.5 seconds, the midpoint of animateColor, the color value will be GREEN - #00FF00.
  5. At 3 seconds, the color should be BLUE - #0000FF and animateColor Ends.
  6. After animateColor ends, the timedElement should REMOVE, leaving the original color, WHITE.
  7. **Note: calcmode="paced" each color value changes evenly over time duration
4.17 to no from additive="sum"
(smil, source)
(xhtml+smil, source)
  1. animateColor will begin at 1 second and have a duration of 2 seconds.
  2. At 0 seconds, the color will be WHITE - #FFFFFF.
  3. At 1 second, animateColor begins and the color will imediately start from RED - #FF0000.
  4. At 1.5 seconds, the midpoint of animateColor, the color value will be GREEN - #00FF00.
  5. At 3 seconds, the color should be BLUE - #0000FF and animateColor Ends.
  6. After animateColor ends, the timedElement should REMOVE, leaving the original color, WHITE.
  7. **Note: calcmode="paced" each color value changes evenly over time duration
4.18 calcMode="discrete", values, additive="sum"
(smil, source)
(xhtml+smil, source)
  1. animateColor will begin at 1 second and have a duration of 2 seconds.
  2. At 0 seconds, the color will be WHITE - #FFFFFF.
  3. At 1 second, animateColor begins and the color will imediately start from RED - #FF0000.
  4. At 1.5 seconds, the midpoint of animateColor, the color value will be GREEN - #00FF00.
  5. At 3 seconds, the color should be BLUE - #0000FF and animateColor Ends.
  6. After animateColor ends, the timedElement should REMOVE, leaving the original color, WHITE.
  7. **Note: calcmode="paced" each color value changes evenly over time duration
4.19 additive="sum", by
(smil, source)
(xhtml+smil, source)
  1. animateColor will begin at 1 second and have a duration of 2 seconds.
  2. At 0 seconds, the color will be WHITE - #FFFFFF.
  3. At 1 second, animateColor begins and the color will imediately start from RED - #FF0000.
  4. At 1.5 seconds, the midpoint of animateColor, the color value will be GREEN - #00FF00.
  5. At 3 seconds, the color should be BLUE - #0000FF and animateColor Ends.
  6. After animateColor ends, the timedElement should REMOVE, leaving the original color, WHITE.
  7. **Note: calcmode="paced" each color value changes evenly over time duration
4.20 additive="sum", values, calcMode="linear"
(smil, source)
(xhtml+smil, source)
  1. animateColor will begin at 1 second and have a duration of 2 seconds.
  2. At 0 seconds, the color will be WHITE - #FFFFFF.
  3. At 1 second, animateColor begins and the color will imediately start from RED - #FF0000.
  4. At 1.5 seconds, the midpoint of animateColor, the color value will be GREEN - #00FF00.
  5. At 3 seconds, the color should be BLUE - #0000FF and animateColor Ends.
  6. After animateColor ends, the timedElement should REMOVE, leaving the original color, WHITE.
  7. **Note: calcmode="paced" each color value changes evenly over time duration
4.21 to no from additive="sum"
(smil, source)
(xhtml+smil, source)
  1. animateColor will begin at 1 second and have a duration of 2 seconds.
  2. At 0 seconds, the color will be WHITE - #FFFFFF.
  3. At 1 second, animateColor begins and the color will imediately start from RED - #FF0000.
  4. At 1.5 seconds, the midpoint of animateColor, the color value will be GREEN - #00FF00.
  5. At 3 seconds, the color should be BLUE - #0000FF and animateColor Ends.
  6. After animateColor ends, the timedElement should REMOVE, leaving the original color, WHITE.
  7. **Note: calcmode="paced" each color value changes evenly over time duration
4.22 to no from additive="sum" accumulate="none"
(smil, source)
(xhtml+smil, source)
  1. animateColor will begin at 1 second and have a duration of 2 seconds.
  2. At 0 seconds, the color will be WHITE - #FFFFFF.
  3. At 1 second, animateColor begins and the color will imediately start from RED - #FF0000.
  4. At 1.5 seconds, the midpoint of animateColor, the color value will be GREEN - #00FF00.
  5. At 3 seconds, the color should be BLUE - #0000FF and animateColor Ends.
  6. After animateColor ends, the timedElement should REMOVE, leaving the original color, WHITE.
  7. **Note: calcmode="paced" each color value changes evenly over time duration
4.23 calMode="linear" values
(smil, source)
(xhtml+smil, source)
  1. animateColor will begin at 1 second and have a duration of 2 seconds.
  2. At 0 seconds, the color will be WHITE - #FFFFFF.
  3. At 1 second, animateColor begins and the color will imediately start from RED - #FF0000.
  4. At 1.5 seconds, the midpoint of animateColor, the color value will be GREEN - #00FF00.
  5. At 3 seconds, the color should be BLUE - #0000FF and animateColor Ends.
  6. After animateColor ends, the timedElement should REMOVE, leaving the original color, WHITE.
  7. **Note: calcmode="paced" each color value changes evenly over time duration
4.24 from,by additive="sum"
(smil, source)
(xhtml+smil, source)
  1. animateColor will begin at 1 second and have a duration of 2 seconds.
  2. At 0 seconds, the color will be WHITE - #FFFFFF.
  3. At 1 second, animateColor begins and the color will imediately start from RED - #FF0000.
  4. At 1.5 seconds, the midpoint of animateColor, the color value will be GREEN - #00FF00.
  5. At 3 seconds, the color should be BLUE - #0000FF and animateColor Ends.
  6. After animateColor ends, the timedElement should REMOVE, leaving the original color, WHITE.
  7. **Note: calcmode="paced" each color value changes evenly over time duration
4.25 from to additive="sum"
(smil, source)
(xhtml+smil, source)
  1. animateColor will begin at 1 second and have a duration of 2 seconds.
  2. At 0 seconds, the color will be WHITE - #FFFFFF.
  3. At 1 second, animateColor begins and the color will imediately start from RED - #FF0000.
  4. At 1.5 seconds, the midpoint of animateColor, the color value will be GREEN - #00FF00.
  5. At 3 seconds, the color should be BLUE - #0000FF and animateColor Ends.
  6. After animateColor ends, the timedElement should REMOVE, leaving the original color, WHITE.
  7. **Note: calcmode="paced" each color value changes evenly over time duration
4.26 accumulate="sum" additive="sum" repeatDur
(smil, source)
(xhtml+smil, source)
  1. animateColor will begin at 1 second and have a duration of 2 seconds.
  2. At 0 seconds, the color will be WHITE - #FFFFFF.
  3. At 1 second, animateColor begins and the color will imediately start from RED - #FF0000.
  4. At 1.5 seconds, the midpoint of animateColor, the color value will be GREEN - #00FF00.
  5. At 3 seconds, the color should be BLUE - #0000FF and animateColor Ends.
  6. After animateColor ends, the timedElement should REMOVE, leaving the original color, WHITE.
  7. **Note: calcmode="paced" each color value changes evenly over time duration
4.27 paced values additive="sum"
(smil, source)
(xhtml+smil, source)
  1. animateColor will begin at 1 second and have a duration of 2 seconds.
  2. At 0 seconds, the color will be WHITE - #FFFFFF.
  3. At 1 second, animateColor begins and the color will imediately start from RED - #FF0000.
  4. At 1.5 seconds, the midpoint of animateColor, the color value will be GREEN - #00FF00.
  5. At 3 seconds, the color should be BLUE - #0000FF and animateColor Ends.
  6. After animateColor ends, the timedElement should REMOVE, leaving the original color, WHITE.
  7. **Note: calcmode="paced" each color value changes evenly over time duration
4.28 by no calcMode="discrete"
(smil, source)
(xhtml+smil, source)
  1. animateColor will begin at 1 second and have a duration of 2 seconds.
  2. At 0 seconds, the color will be WHITE - #FFFFFF.
  3. At 1 second, animateColor begins and the color will imediately start from RED - #FF0000.
  4. At 1.5 seconds, the midpoint of animateColor, the color value will be GREEN - #00FF00.
  5. At 3 seconds, the color should be BLUE - #0000FF and animateColor Ends.
  6. After animateColor ends, the timedElement should REMOVE, leaving the original color, WHITE.
  7. **Note: calcmode="paced" each color value changes evenly over time duration
4.29 by no calcMode="discrete" accumulate="sum"
(smil, source)
(xhtml+smil, source)
  1. animateColor will begin at 1 second and have a duration of 2 seconds.
  2. At 0 seconds, the color will be WHITE - #FFFFFF.
  3. At 1 second, animateColor begins and the color will imediately start from RED - #FF0000.
  4. At 1.5 seconds, the midpoint of animateColor, the color value will be GREEN - #00FF00.
  5. At 3 seconds, the color should be BLUE - #0000FF and animateColor Ends.
  6. After animateColor ends, the timedElement should REMOVE, leaving the original color, WHITE.
  7. **Note: calcmode="paced" each color value changes evenly over time duration
4.30 from by calcMode="discrete"
(smil, source)
(xhtml+smil, source)
  1. animateColor will begin at 1 second and have a duration of 2 seconds.
  2. At 0 seconds, the color will be WHITE - #FFFFFF.
  3. At 1 second, animateColor begins and the color will imediately start from RED - #FF0000.
  4. At 1.5 seconds, the midpoint of animateColor, the color value will be GREEN - #00FF00.
  5. At 3 seconds, the color should be BLUE - #0000FF and animateColor Ends.
  6. After animateColor ends, the timedElement should REMOVE, leaving the original color, WHITE.
  7. **Note: calcmode="paced" each color value changes evenly over time duration
4.31 from to calcmode="discrete"
(smil, source)
(xhtml+smil, source)
  1. animateColor will begin at 1 second and have a duration of 2 seconds.
  2. At 0 seconds, the color will be WHITE - #FFFFFF.
  3. At 1 second, animateColor begins and the color will imediately start from RED - #FF0000.
  4. At 1.5 seconds, the midpoint of animateColor, the color value will be GREEN - #00FF00.
  5. At 3 seconds, the color should be BLUE - #0000FF and animateColor Ends.
  6. After animateColor ends, the timedElement should REMOVE, leaving the original color, WHITE.
  7. **Note: calcmode="paced" each color value changes evenly over time duration
4.32 to no from calcMode="discrete"
(smil, source)
(xhtml+smil, source)
  1. animateColor will begin at 1 second and have a duration of 2 seconds.
  2. At 0 seconds, the color will be WHITE - #FFFFFF.
  3. At 1 second, animateColor begins and the color will imediately start from RED - #FF0000.
  4. At 1.5 seconds, the midpoint of animateColor, the color value will be GREEN - #00FF00.
  5. At 3 seconds, the color should be BLUE - #0000FF and animateColor Ends.
  6. After animateColor ends, the timedElement should REMOVE, leaving the original color, WHITE.
  7. **Note: calcmode="paced" each color value changes evenly over time duration
4.33 to no from calcMode="discrete" accumulate="sum"
(smil, source)
(xhtml+smil, source)
  1. animateColor will begin at 1 second and have a duration of 2 seconds.
  2. At 0 seconds, the color will be WHITE - #FFFFFF.
  3. At 1 second, animateColor begins and the color will imediately start from RED - #FF0000.
  4. At 1.5 seconds, the midpoint of animateColor, the color value will be GREEN - #00FF00.
  5. At 3 seconds, the color should be BLUE - #0000FF and animateColor Ends.
  6. After animateColor ends, the timedElement should REMOVE, leaving the original color, WHITE.
  7. **Note: calcmode="paced" each color value changes evenly over time duration
4.34 values calcMode="discrete"
(smil, source)
(xhtml+smil, source)
  1. animateColor will begin at 1 second and have a duration of 2 seconds.
  2. At 0 seconds, the color will be WHITE - #FFFFFF.
  3. At 1 second, animateColor begins and the color will imediately start from RED - #FF0000.
  4. At 1.5 seconds, the midpoint of animateColor, the color value will be GREEN - #00FF00.
  5. At 3 seconds, the color should be BLUE - #0000FF and animateColor Ends.
  6. After animateColor ends, the timedElement should REMOVE, leaving the original color, WHITE.
  7. **Note: calcmode="paced" each color value changes evenly over time duration
4.35 values calcMode="discrete" accumulate="sum"
(smil, source)
(xhtml+smil, source)
  1. animateColor will begin at 1 second and have a duration of 2 seconds.
  2. At 0 seconds, the color will be WHITE - #FFFFFF.
  3. At 1 second, animateColor begins and the color will imediately start from RED - #FF0000.
  4. At 1.5 seconds, the midpoint of animateColor, the color value will be GREEN - #00FF00.
  5. At 3 seconds, the color should be BLUE - #0000FF and animateColor Ends.
  6. After animateColor ends, the timedElement should REMOVE, leaving the original color, WHITE.
  7. **Note: calcmode="paced" each color value changes evenly over time duration
4.36 from by
(smil, source)
(xhtml+smil, source)
  1. animateColor will begin at 1 second and have a duration of 2 seconds.
  2. At 0 seconds, the color will be WHITE - #FFFFFF.
  3. At 1 second, animateColor begins and the color will imediately start from RED - #FF0000.
  4. At 1.5 seconds, the midpoint of animateColor, the color value will be GREEN - #00FF00.
  5. At 3 seconds, the color should be BLUE - #0000FF and animateColor Ends.
  6. After animateColor ends, the timedElement should REMOVE, leaving the original color, WHITE.
  7. **Note: calcmode="paced" each color value changes evenly over time duration
4.37 from to
(smil, source)
(xhtml+smil, source)
  1. animateColor will begin at 1 second and have a duration of 2 seconds.
  2. At 0 seconds, the color will be WHITE - #FFFFFF.
  3. At 1 second, animateColor begins and the color will imediately start from RED - #FF0000.
  4. At 1.5 seconds, the midpoint of animateColor, the color value will be GREEN - #00FF00.
  5. At 3 seconds, the color should be BLUE - #0000FF and animateColor Ends.
  6. After animateColor ends, the timedElement should REMOVE, leaving the original color, WHITE.
  7. **Note: calcmode="paced" each color value changes evenly over time duration
4.38 from to accumulate="sum"
(smil, source)
(xhtml+smil, source)
  1. animateColor will begin at 1 second and have a duration of 2 seconds.
  2. At 0 seconds, the color will be WHITE - #FFFFFF.
  3. At 1 second, animateColor begins and the color will imediately start from RED - #FF0000.
  4. At 1.5 seconds, the midpoint of animateColor, the color value will be GREEN - #00FF00.
  5. At 3 seconds, the color should be BLUE - #0000FF and animateColor Ends.
  6. After animateColor ends, the timedElement should REMOVE, leaving the original color, WHITE.
  7. **Note: calcmode="paced" each color value changes evenly over time duration
4.39 values calmode="linear"
(smil, source)
(xhtml+smil, source)
  1. animateColor will begin at 1 second and have a duration of 2 seconds.
  2. At 0 seconds, the color will be WHITE - #FFFFFF.
  3. At 1 second, animateColor begins and the color will imediately start from RED - #FF0000.
  4. At 1.5 seconds, the midpoint of animateColor, the color value will be GREEN - #00FF00.
  5. At 3 seconds, the color should be BLUE - #0000FF and animateColor Ends.
  6. After animateColor ends, the timedElement should REMOVE, leaving the original color, WHITE.
  7. **Note: calcmode="paced" each color value changes evenly over time duration
4.40 values accumulate="none"
(smil, source)
(xhtml+smil, source)
  1. animateColor will begin at 1 second and have a duration of 2 seconds.
  2. At 0 seconds, the color will be WHITE - #FFFFFF.
  3. At 1 second, animateColor begins and the color will imediately start from RED - #FF0000.
  4. At 1.5 seconds, the midpoint of animateColor, the color value will be GREEN - #00FF00.
  5. At 3 seconds, the color should be BLUE - #0000FF and animateColor Ends.
  6. After animateColor ends, the timedElement should REMOVE, leaving the original color, WHITE.
  7. **Note: calcmode="paced" each color value changes evenly over time duration
4.41 origin = default , from by accumulate="sum"
( smil, source)
( xhtml+smil, source)
  1. animateColor will begin at 1 second and have a duration of 2 seconds.
  2. At 0 seconds, the color will be WHITE - #FFFFFF.
  3. At 1 second, animateColor begins and the color will imediately start from RED - #FF0000.
  4. At 1.5 seconds, the midpoint of animateColor, the color value will be GREEN - #00FF00.
  5. At 3 seconds, the color should be BLUE - #0000FF and animateColor Ends.
  6. After animateColor ends, the timedElement should REMOVE, leaving the original color, WHITE.
  7. **Note: calcmode="paced" each color value changes evenly over time duration
4.42 origin = default from to calcmode="discrete"
(smil, source)
(xhtml+smil, source)
  1. animateColor will begin at 1 second and have a duration of 2 seconds.
  2. At 0 seconds, the color will be WHITE - #FFFFFF.
  3. At 1 second, animateColor begins and the color will imediately start from RED - #FF0000.
  4. At 1.5 seconds, the midpoint of animateColor, the color value will be GREEN - #00FF00.
  5. At 3 seconds, the color should be BLUE - #0000FF and animateColor Ends.
  6. After animateColor ends, the timedElement should REMOVE, leaving the original color, WHITE.
  7. **Note: calcmode="paced" each color value changes evenly over time duration
4.43 origin=default values accumulate="sum" repeatCount
( smil, source)
( xhtml+smil, source)
  1. animateColor will begin at 1 second and have a duration of 2 seconds.
  2. At 0 seconds, the color will be WHITE - #FFFFFF.
  3. At 1 second, animateColor begins and the color will imediately start from RED - #FF0000.
  4. At 1.5 seconds, the midpoint of animateColor, the color value will be GREEN - #00FF00.
  5. At 3 seconds, the color should be BLUE - #0000FF and animateColor Ends.
  6. After animateColor ends, the timedElement should REMOVE, leaving the original color, WHITE.
  7. **Note: calcmode="paced" each color value changes evenly over time duration
4.44 origin="default" by
(smil, source)
(xhtml+smil, source)
  1. animateColor will begin at 1 second and have a duration of 2 seconds.
  2. At 0 seconds, the color will be WHITE - #FFFFFF.
  3. At 1 second, animateColor begins and the color will imediately start from RED - #FF0000.
  4. At 1.5 seconds, the midpoint of animateColor, the color value will be GREEN - #00FF00.
  5. At 3 seconds, the color should be BLUE - #0000FF and animateColor Ends.
  6. After animateColor ends, the timedElement should REMOVE, leaving the original color, WHITE.
  7. **Note: calcmode="paced" each color value changes evenly over time duration
4.45 origin="default" accumulate="sum" repeatDur
(smil, source)
(xhtml+smil, source)
  1. animateColor will begin at 1 second and have a duration of 2 seconds.
  2. At 0 seconds, the color will be WHITE - #FFFFFF.
  3. At 1 second, animateColor begins and the color will imediately start from RED - #FF0000.
  4. At 1.5 seconds, the midpoint of animateColor, the color value will be GREEN - #00FF00.
  5. At 3 seconds, the color should be BLUE - #0000FF and animateColor Ends.
  6. After animateColor ends, the timedElement should REMOVE, leaving the original color, WHITE.
  7. **Note: calcmode="paced" each color value changes evenly over time duration
4.46 origin = "default" from to accumulate = "sum"
(smil, source)
(xhtml+smil, source)
  1. animateColor will begin at 1 second and have a duration of 2 seconds.
  2. At 0 seconds, the color will be WHITE - #FFFFFF.
  3. At 1 second, animateColor begins and the color will imediately start from RED - #FF0000.
  4. At 1.5 seconds, the midpoint of animateColor, the color value will be GREEN - #00FF00.
  5. At 3 seconds, the color should be BLUE - #0000FF and animateColor Ends.
  6. After animateColor ends, the timedElement should REMOVE, leaving the original color, WHITE.
  7. **Note: calcmode="paced" each color value changes evenly over time duration
4.47 origin="default" calcMode="linear" values
(smil, source)
(xhtml+smil, source)
  1. animateColor will begin at 1 second and have a duration of 2 seconds.
  2. At 0 seconds, the color will be WHITE - #FFFFFF.
  3. At 1 second, animateColor begins and the color will imediately start from RED - #FF0000.
  4. At 1.5 seconds, the midpoint of animateColor, the color value will be GREEN - #00FF00.
  5. At 3 seconds, the color should be BLUE - #0000FF and animateColor Ends.
  6. After animateColor ends, the timedElement should REMOVE, leaving the original color, WHITE.
  7. **Note: calcmode="paced" each color value changes evenly over time duration
4.48 origin="default" accumlate="sum" repeatDur
(smil, source)
(xhtml+smil, source)
  1. animateColor will begin at 1 second and have a duration of 2 seconds.
  2. At 0 seconds, the color will be WHITE - #FFFFFF.
  3. At 1 second, animateColor begins and the color will imediately start from RED - #FF0000.
  4. At 1.5 seconds, the midpoint of animateColor, the color value will be GREEN - #00FF00.
  5. At 3 seconds, the color should be BLUE - #0000FF and animateColor Ends.
  6. After animateColor ends, the timedElement should REMOVE, leaving the original color, WHITE.
  7. **Note: calcmode="paced" each color value changes evenly over time duration
4.49 origin="default" from by
(smil, source)
(xhtml+smil, source)
  1. animateColor will begin at 1 second and have a duration of 2 seconds.
  2. At 0 seconds, the color will be WHITE - #FFFFFF.
  3. At 1 second, animateColor begins and the color will imediately start from RED - #FF0000.
  4. At 1.5 seconds, the midpoint of animateColor, the color value will be GREEN - #00FF00.
  5. At 3 seconds, the color should be BLUE - #0000FF and animateColor Ends.
  6. After animateColor ends, the timedElement should REMOVE, leaving the original color, WHITE.
  7. **Note: calcmode="paced" each color value changes evenly over time duration
4.50 origin="default" to no from calcmode="discrete"
(smil, source)
(xhtml+smil, source)
  1. animateColor will begin at 1 second and have a duration of 2 seconds.
  2. At 0 seconds, the color will be WHITE - #FFFFFF.
  3. At 1 second, animateColor begins and the color will imediately start from RED - #FF0000.
  4. At 1.5 seconds, the midpoint of animateColor, the color value will be GREEN - #00FF00.
  5. At 3 seconds, the color should be BLUE - #0000FF and animateColor Ends.
  6. After animateColor ends, the timedElement should REMOVE, leaving the original color, WHITE.
  7. **Note: calcmode="paced" each color value changes evenly over time duration
4.51 origin="default" accumulate="sum" repeatCount values
(smil, source)
(xhtml+smil, source)
  1. animateColor will begin at 1 second and have a duration of 2 seconds.
  2. At 0 seconds, the color will be WHITE - #FFFFFF.
  3. At 1 second, animateColor begins and the color will imediately start from RED - #FF0000.
  4. At 1.5 seconds, the midpoint of animateColor, the color value will be GREEN - #00FF00.
  5. At 3 seconds, the color should be BLUE - #0000FF and animateColor Ends.
  6. After animateColor ends, the timedElement should REMOVE, leaving the original color, WHITE.
  7. **Note: calcmode="paced" each color value changes evenly over time duration
4.52 by no from calcMode="paced"
(smil, source)
(xhtml+smil, source)
  1. animateColor will begin at 1 second and have a duration of 2 seconds.
  2. At 0 seconds, the color will be WHITE - #FFFFFF.
  3. At 1 second, animateColor begins and the color will imediately start from RED - #FF0000.
  4. At 1.5 seconds, the midpoint of animateColor, the color value will be GREEN - #00FF00.
  5. At 3 seconds, the color should be BLUE - #0000FF and animateColor Ends.
  6. After animateColor ends, the timedElement should REMOVE, leaving the original color, WHITE.
  7. **Note: calcmode="paced" each color value changes evenly over time duration
4.53 to no from
(smil, source)
(xhtml+smil, source)
  1. animateColor will begin at 1 second and have a duration of 2 seconds.
  2. At 0 seconds, the color will be WHITE - #FFFFFF.
  3. At 1 second, animateColor begins and the color will imediately start from RED - #FF0000.
  4. At 1.5 seconds, the midpoint of animateColor, the color value will be GREEN - #00FF00.
  5. At 3 seconds, the color should be BLUE - #0000FF and animateColor Ends.
  6. After animateColor ends, the timedElement should REMOVE, leaving the original color, WHITE.
  7. **Note: calcmode="paced" each color value changes evenly over time duration