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
4.54 to no from 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.55 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.56 calcMode="paced" 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
5 animate_basic  
5.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
5.2 discrete from by 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
5.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
5.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
5.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
5.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
5.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
5.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
5.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
5.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
5.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
5.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
5.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
5.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
5.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
5.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
5.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
5.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
5.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
5.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
5.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
5.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
5.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
5.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
5.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
5.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
5.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
5.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
5.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
5.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
5.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
5.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
5.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
5.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
5.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
5.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
5.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
5.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
5.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
5.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
5.41 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
5.42 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
5.43 to no from 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
5.44 animate attributeName=left
(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
5.45 calcMode="paced" 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
6 set  
6.1 attributeName=background-color, begin, dur
( smil, source)
( xhtml+smil, source)
  1. SET will begin at 2 seconds and have a duration of 2 seconds.
  2. At 1 second, blue div will appear.
  3. At 2 seconds, div turns red.
  4. At 4 seconds, red div is removed, leaving a blue div visable indefinitly.
  5. **Note: the set is a child element of the div so targetName is not needed.
6.2 attributeName=background-color, begin, dur
( smil, source)
( xhtml+smil, source)
  1. SET will begin at 2 seconds and have a duration of 2 seconds.
  2. At 1 second, blue div will appear.
  3. At 2 seconds, div turns red.
  4. At 4 seconds, red div is removed, leaving a blue div visable indefinitly.
  5. **Note: the set is a child element of the div so targetName is not needed.
6.3 attributeName=height, begin, dur
(smil, source)
(xhtml+smil, source)
  1. SET will begin at 2 seconds and have a duration of 2 seconds.
  2. At 1 second, blue div will appear.
  3. At 2 seconds, div turns red.
  4. At 4 seconds, red div is removed, leaving a blue div visable indefinitly.
  5. **Note: the set is a child element of the div so targetName is not needed.
6.4 attributeName=left, begin, dur, repeatCount, accumulate
( smil, source)
( xhtml+smil, source)
  1. SET will begin at 2 seconds and have a duration of 2 seconds.
  2. At 1 second, blue div will appear.
  3. At 2 seconds, div turns red.
  4. At 4 seconds, red div is removed, leaving a blue div visable indefinitly.
  5. **Note: the set is a child element of the div so targetName is not needed.
6.5 attributeName=left, begin, dur, autoReverse
( smil, source)
(xhtml+smil, source)
  1. SET will begin at 2 seconds and have a duration of 2 seconds.
  2. At 1 second, blue div will appear.
  3. At 2 seconds, div turns red.
  4. At 4 seconds, red div is removed, leaving a blue div visable indefinitly.
  5. **Note: the set is a child element of the div so targetName is not needed.
6.6 attributeName=left, begin, dur
(smil, source)
(xhtml+smil, source)
  1. SET will begin at 2 seconds and have a duration of 2 seconds.
  2. At 1 second, blue div will appear.
  3. At 2 seconds, div turns red.
  4. At 4 seconds, red div is removed, leaving a blue div visable indefinitly.
  5. **Note: the set is a child element of the div so targetName is not needed.
6.7 attributeName=left, targetElement, begin, dur, repeatCount
( smil, source)
( xhtml+smil, source)
  1. SET will begin at 2 seconds and have a duration of 2 seconds.
  2. At 1 second, blue div will appear.
  3. At 2 seconds, div turns red.
  4. At 4 seconds, red div is removed, leaving a blue div visable indefinitly.
  5. **Note: the set is a child element of the div so targetName is not needed.
6.8 attributeName=left, targetElement, begin, dur, repeatCount, accumulate
( smil, source)
( xhtml+smil, source)
  1. SET will begin at 2 seconds and have a duration of 2 seconds.
  2. At 1 second, blue div will appear.
  3. At 2 seconds, div turns red.
  4. At 4 seconds, red div is removed, leaving a blue div visable indefinitly.
  5. **Note: the set is a child element of the div so targetName is not needed.
6.9 attributeName=left, targetElement, begin, dur, repeatDur
( smil, source)
( xhtml+smil, source)
  1. SET will begin at 2 seconds and have a duration of 2 seconds.
  2. At 1 second, blue div will appear.
  3. At 2 seconds, div turns red.
  4. At 4 seconds, red div is removed, leaving a blue div visable indefinitly.
  5. **Note: the set is a child element of the div so targetName is not needed.
6.10 attributeName=src, begin, dur
(smil, source)
(xhtml+smil, source)
  1. SET will begin at 2 seconds and have a duration of 2 seconds.
  2. At 1 second, blue div will appear.
  3. At 2 seconds, div turns red.
  4. At 4 seconds, red div is removed, leaving a blue div visable indefinitly.
  5. **Note: the set is a child element of the div so targetName is not needed.
6.11 attributeName=src, begin, dur, repeatCount
( smil, source)
( xhtml+smil, source)
  1. SET will begin at 2 seconds and have a duration of 2 seconds.
  2. At 1 second, blue div will appear.
  3. At 2 seconds, div turns red.
  4. At 4 seconds, red div is removed, leaving a blue div visable indefinitly.
  5. **Note: the set is a child element of the div so targetName is not needed.
6.12 attributeName=top, begin, dur
(smil, source)
(xhtml+smil, source)
  1. SET will begin at 2 seconds and have a duration of 2 seconds.
  2. At 1 second, blue div will appear.
  3. At 2 seconds, div turns red.
  4. At 4 seconds, red div is removed, leaving a blue div visable indefinitly.
  5. **Note: the set is a child element of the div so targetName is not needed.
6.13 attributeName=width, begin, dur, repeatCount, additive
( smil, source)
( xhtml+smil, source)
  1. SET will begin at 2 seconds and have a duration of 2 seconds.
  2. At 1 second, blue div will appear.
  3. At 2 seconds, div turns red.
  4. At 4 seconds, red div is removed, leaving a blue div visable indefinitly.
  5. **Note: the set is a child element of the div so targetName is not needed.
6.14 attributeName=width, dur
(smil, source)
(xhtml+smil, source)
  1. SET will begin at 2 seconds and have a duration of 2 seconds.
  2. At 1 second, blue div will appear.
  3. At 2 seconds, div turns red.
  4. At 4 seconds, red div is removed, leaving a blue div visable indefinitly.
  5. **Note: the set is a child element of the div so targetName is not needed.
6.15 attributeName=width, begin, dur
(smil, source)
(xhtml+smil, source)
  1. SET will begin at 2 seconds and have a duration of 2 seconds.
  2. At 1 second, blue div will appear.
  3. At 2 seconds, div turns red.
  4. At 4 seconds, red div is removed, leaving a blue div visable indefinitly.
  5. **Note: the set is a child element of the div so targetName is not needed.
6.16 attributeName=width, targetElement, begin, dur
(smil, source)
(xhtml+smil, source)
  1. SET will begin at 2 seconds and have a duration of 2 seconds.
  2. At 1 second, blue div will appear.
  3. At 2 seconds, div turns red.
  4. At 4 seconds, red div is removed, leaving a blue div visable indefinitly.
  5. **Note: the set is a child element of the div so targetName is not needed.
6.17 attributeName=width, targetElement, begin, dur, autoReverse
( smil, source)
( xhtml+smil, source)
  1. SET will begin at 2 seconds and have a duration of 2 seconds.
  2. At 1 second, blue div will appear.
  3. At 2 seconds, div turns red.
  4. At 4 seconds, red div is removed, leaving a blue div visable indefinitly.
  5. **Note: the set is a child element of the div so targetName is not needed.
6.18 attributeName=zIndex, begin, dur
(smil, source)
(xhtml+smil, source)
  1. SET will begin at 2 seconds and have a duration of 2 seconds.
  2. At 1 second, blue div will appear.
  3. At 2 seconds, div turns red.
  4. At 4 seconds, red div is removed, leaving a blue div visable indefinitly.
  5. **Note: the set is a child element of the div so targetName is not needed.
7 animate_spline  
7.1 animate_spline_001.
(smil, source)
(xhtml+smil, source)
  1. SET will begin at 2 seconds and have a duration of 2 seconds.
  2. At 1 second, blue div will appear.
  3. At 2 seconds, div turns red.
  4. At 4 seconds, red div is removed, leaving a blue div visable indefinitly.
  5. **Note: the set is a child element of the div so targetName is not needed.
7.2 animate_spline_002.
(smil, source)
(xhtml+smil, source)
  1. SET will begin at 2 seconds and have a duration of 2 seconds.
  2. At 1 second, blue div will appear.
  3. At 2 seconds, div turns red.
  4. At 4 seconds, red div is removed, leaving a blue div visable indefinitly.
  5. **Note: the set is a child element of the div so targetName is not needed.
7.3 animate_spline_003.
(smil, source)
(xhtml+smil, source)
  1. SET will begin at 2 seconds and have a duration of 2 seconds.
  2. At 1 second, blue div will appear.
  3. At 2 seconds, div turns red.
  4. At 4 seconds, red div is removed, leaving a blue div visable indefinitly.
  5. **Note: the set is a child element of the div so targetName is not needed.
7.4 animate_spline_003_reverse.
(smil, source)
(xhtml+smil, source)
  1. SET will begin at 2 seconds and have a duration of 2 seconds.
  2. At 1 second, blue div will appear.
  3. At 2 seconds, div turns red.
  4. At 4 seconds, red div is removed, leaving a blue div visable indefinitly.
  5. **Note: the set is a child element of the div so targetName is not needed.
7.5 animate_spline_004.
(smil, source)
(xhtml+smil, source)
  1. SET will begin at 2 seconds and have a duration of 2 seconds.
  2. At 1 second, blue div will appear.
  3. At 2 seconds, div turns red.
  4. At 4 seconds, red div is removed, leaving a blue div visable indefinitly.
  5. **Note: the set is a child element of the div so targetName is not needed.
7.6 animate_spline_004_reverse.
(smil, source)
(xhtml+smil, source)
  1. SET will begin at 2 seconds and have a duration of 2 seconds.
  2. At 1 second, blue div will appear.
  3. At 2 seconds, div turns red.
  4. At 4 seconds, red div is removed, leaving a blue div visable indefinitly.
  5. **Note: the set is a child element of the div so targetName is not needed.
7.7 keyTime, begin, dur, calcMode=linear, values, targetElement, fill=freeze
(smil, source)
(xhtml+smil, source)
  1. Testing: keyTimes.
  2. At 0 seconds, the smile should be 50px wide.
  3. At 2 seconds, the smile will immediately increase its width to 150px.
  4. At 2-11 seconds, the smile will shrink back to its original width of 50px.
  5. At 11-12 seconds, the smile will increase its width to 250px and freeze.
7.8 autoReverse, keyTime, begin, dur, calcMode=linear, values, targetElement, fill=freeze
(smil, source)
(xhtml+smil, source)
  1. Testing: keyTimes, autoReverse.
  2. At 0 seconds, the smile should be 50px wide.
  3. At 2 seconds, the smile will immediately increase its width to 150px.
  4. At 2-11 seconds, the smile will shrink back to its original width of 50px.
  5. At 11-12 seconds, the smile will increase its width to 250px.
  6. At 12-13 seconds, the smile will decrease its width to 50px.
  7. At 13-22 seconds, the smile will increase its width to 150px and freeze.
8 animateColor_spline  
8.1 animateColor_spline_001.
(smil, source)
(xhtml+smil, source)
  1. Testing: keyTimes, autoReverse.
  2. At 0 seconds, the smile should be 50px wide.
  3. At 2 seconds, the smile will immediately increase its width to 150px.
  4. At 2-11 seconds, the smile will shrink back to its original width of 50px.
  5. At 11-12 seconds, the smile will increase its width to 250px.
  6. At 12-13 seconds, the smile will decrease its width to 50px.
  7. At 13-22 seconds, the smile will increase its width to 150px and freeze.
8.2 animateColor_spline_002.
(smil, source)
(xhtml+smil, source)
  1. Testing: keyTimes, autoReverse.
  2. At 0 seconds, the smile should be 50px wide.
  3. At 2 seconds, the smile will immediately increase its width to 150px.
  4. At 2-11 seconds, the smile will shrink back to its original width of 50px.
  5. At 11-12 seconds, the smile will increase its width to 250px.
  6. At 12-13 seconds, the smile will decrease its width to 50px.
  7. At 13-22 seconds, the smile will increase its width to 150px and freeze.
8.3 animateColor_spline_003.
(smil, source)
(xhtml+smil, source)
  1. Testing: keyTimes, autoReverse.
  2. At 0 seconds, the smile should be 50px wide.
  3. At 2 seconds, the smile will immediately increase its width to 150px.
  4. At 2-11 seconds, the smile will shrink back to its original width of 50px.
  5. At 11-12 seconds, the smile will increase its width to 250px.
  6. At 12-13 seconds, the smile will decrease its width to 50px.
  7. At 13-22 seconds, the smile will increase its width to 150px and freeze.
8.4 animateColor_spline_004.
(smil, source)
(xhtml+smil, source)
  1. Testing: keyTimes, autoReverse.
  2. At 0 seconds, the smile should be 50px wide.
  3. At 2 seconds, the smile will immediately increase its width to 150px.
  4. At 2-11 seconds, the smile will shrink back to its original width of 50px.
  5. At 11-12 seconds, the smile will increase its width to 250px.
  6. At 12-13 seconds, the smile will decrease its width to 50px.
  7. At 13-22 seconds, the smile will increase its width to 150px and freeze.
8.5 values keytimes
(smil, source)
(xhtml+smil, source)
  1. Testing: values, keyTimes.
  2. At 0 seconds, the box will be dark golden brown.
  3. At 1 seconds, the box will be orange.
  4. At 2 seconds, the box will be green-yellow.
  5. At 9 seconds, the box will be light purple.
  6. At 11 seconds, the animateColor is removed and the box will be dark golden brown again.
9 animateMotion_spline  
9.1 path implicit relative lineto
(smil, source)
(xhtml+smil, source)
  1. Testing: path.
  2. At 0 seconds, the green dot will be over the blue dot.
  3. At 1 seconds, the green dot will move from the blue dot to the yellow dot.
  4. At 2 seconds, the green dot will move from the yellow dot to the red dot.
  5. At 3-4 seconds, the green dot will move from the red dot to the orange dot.
  6. At 5 seconds, the green dot will move from the orange dot back to the blue dot.
9.2 path absolute curverto implicit absolute curveto
(smil, source)
(xhtml+smil, source)
  1. Testing: path.
  2. At 0 seconds, the green dot will be over top of the circle.
  3. At 2 seconds, the green dot will begin clockwise around the red path.
  4. At 6 seconds, the green dot will reach its original position.
9.3 calcMode =spline, keyTimes, keySplines, path
(smil, source)
(xhtml+smil, source)
  1. Testing: path.
  2. At 0 seconds, the green dot will be over top of the circle.
  3. At 2 seconds, the green dot will begin accerating clockwise around the red path.
  4. Around 4 seconds, the green dot will begin decelcerating continuing clockwise around the red path.
  5. At 6 seconds, the green dot will reach its original position.
9.4 path absolute lineto
(smil, source)
(xhtml+smil, source)
  1. Testing: path.
  2. At 0 seconds, the green dot will be over the blue dot.
  3. At 1 seconds, the green dot will move from the blue dot to the yellow dot.
  4. At 2 seconds, the green dot will move from the yellow dot to the red dot.
  5. At 3-4 seconds, the green dot will move from the red dot to the orange dot.
  6. At 5 seconds, the green dot will be removed back to its original position over the blue dot.
9.5 path implicit absolute lineto
(smil, source)
(xhtml+smil, source)
  1. Testing: path.
  2. At 0 seconds, the green dot will be over the blue dot.
  3. At 1 seconds, the green dot will move from the blue dot to the yellow dot.
  4. At 2 seconds, the green dot will move from the yellow dot to the red dot.
  5. At 3-4 seconds, the green dot will move from the red dot to the orange dot.
  6. At 5 seconds, the green dot will move from the orange dot back to the blue dot.
9.6 path, relative lineto implicit realtive lineto
(smil, source)
(xhtml+smil, source)
  1. Testing: path.
  2. At 0 seconds, the green dot will be over the blue dot.
  3. At 1 seconds, the green dot will move from the blue dot to the yellow dot.
  4. At 2-3 seconds, the green dot will move from the yellow dot to the red dot.
  5. At 4 seconds, the green dot will move from the red dot to the orange dot.
  6. At 5 seconds, the green dot will move freeze over the orange dot.
9.7 calcMode="spline", keySplines="0 0 1 1" keyTimes="0; 1"
(smil, source)
(xhtml+smil, source)
  1. Testing: keySplines, keyTimes.
  2. At 0 seconds, the red dot will be in the upper left corner of the graph.
  3. At 2 seconds, the red dot will start following the blue line from the lower left corner.
  4. At 7 seconds, the red dot will have reached the upper right corner of the blue line and move back to the upper left corner.
  5. **Note the keysplines should have no noticable effect and the red dot will move linearly.
9.8 calcMode="spline" keySplines=".5 0 .5 1" keyTimes="0; 1"
(smil, source)
(xhtml+smil, source)
  1. Testing: keySplines, keyTimes.
  2. At 0 seconds, the red dot will be in the upper left corner of the graph.
  3. At 2 seconds, the red dot will start following the blue line from the lower left corner.
  4. At 7 seconds, the red dot will have reached the upper right corner of the blue line and freeze.
9.9 calcMode="spline" keySplines="0 .75 .25 1" keyTimes="0; 1"
(smil, source)
(xhtml+smil, source)
  1. Testing: keySplines, keyTimes.
  2. At 0 seconds, the red dot will be in the upper left corner of the graph.
  3. At 2 seconds, the red dot will start following the blue line from the lower left corner.
  4. At 7 seconds, the red dot will have reached the upper right corner of the blue line and freeze.
9.10 calcMode="spline" keySplines="0 .75 .25 1" keyTimes="0; 1" autoreverse="true"
(smil, source)
(xhtml+smil, source)
  1. Testing: keySplines, keyTimes, autoReverse.
  2. At 0 seconds, the red dot will be in the upper left corner of the graph.
  3. At 2 seconds, the red dot will start following the blue line from the lower left corner.
  4. At 7 seconds, the red dot will have reached the upper right corner of the blue line and autoReverse.
  5. At 12 seconds, the red dot will have reached the starting position of the blue line and freeze
  6. **Note that the begin=2s is ignored on autoReverse causing the anamation to completed in 12 seconds.
9.11 calcMode="spline" keySplines="1 0 .25 .25" keyTimes="0; 1"
(smil, source)
(xhtml+smil, source)
  1. Testing: keySplines, keyTimes.
  2. At 0 seconds, the red dot will be in the upper left corner of the graph.
  3. At 2 seconds, the red dot will start animating from the lower left corner of the blue line.
  4. At 7 seconds, the red dot will have reached the upper right corner of the blue line and move back to the upper left corner.
9.12 autoreverse, calcMode="spline" keySplines="1 0 .25 .25" keyTimes="0; 1"
(smil, source)
(xhtml+smil, source)
  1. Testing: keySplines, keyTimes, autoReverse.
  2. At 0 seconds, the red dot will be in the upper left corner of the graph.
  3. At 2 seconds, the red dot will start following the blue line from the lower left corner.
  4. At 7 seconds, the red dot will have reached the upper right corner of the blue line and autorevese.
  5. At 12 seconds, the red dot will have reached the start postion of the blue line and move back to the upper left corner.
  6. **Note that the begin=2s is ignored on autoReverse causing the anamation to completed in 12 seconds.
9.13 values, keytimes,calcMode="linear"
(smil, source)
(xhtml+smil, source)
  1. Testing: keyTimes.
  2. At 0 seconds, the smile should be at 50px.
  3. At 2 seconds, the smile will immediately move to 150px.
  4. At 2-11 seconds, the smile will move back to its original position of 50px.
  5. At 11-12 seconds, the smile will move to 250px and freeze.
  6. **Note that the right side of the image is the reference point.
9.14 values, keytimes, autoreverse calcMode="linear"
(smil, source)
(xhtml+smil, source)
  1. Testing: keyTimes, autoReverse.
  2. At 0 seconds, the smile should be at 50px.
  3. At 2 seconds, the smile will immediately move to 150px.
  4. At 2-11 seconds, the smile will move back to its original position of 50px.
  5. At 11-12 seconds, the smile will move to 250px.
  6. At 12-13 seconds, the smile will move back to 50px.
  7. At 13-22 seconds, the smile will move to 150px and freeze.
  8. **Note that the right side of the image is the reference point.