

<html xmlns:t ="urn:schemas-microsoft-com:time" >
<head>
<style>
.time    { behavior: url(#default#time2);}
DIV {border:1px solid black; height:100; width:100}
</style>
<?IMPORT namespace="t" implementation="#default#time2">
</head>
<BODY BGCOLOR=white>
<!-- Time Element for testing -->
<DIV id="timedElement" style="background:#ffffff;"></DIV>
<t:animateColor id="a1"
targetElement="timedElement"
attributeName="backgroundColor"
begin="1" dur="2s"
additive="replace"
values="#ff0000;#00ff00;#0000ff"
fill="remove"
calcmode="paced"
onend="Timer.endElement()"
/><BR>
<!--*******************************************************************************-->
<!--***************everything past this line is informational**********************-->
<!-- This is FOR verifing time -->
<B>TIME:</B><BR>
Timer:
<span id="Timer" class="time" dur=".01"  repeatCount="indefinite" fill="hold"
onrepeat="innerText=parseInt(document.body.currTimeState.activeTime);">0</span>
<br>
Backgroundcolor = <span id=ReadTop class="time" begin="a1.begin" timeAction="style" dur="0.02" repeatCount="indefinite" onrepeat="innerText=timedElement.runtimeStyle.backgroundColor">#ffffff</span>
<br><br>
<!-- Expectations, Sample Code, and Information -->
<B>EXPECTED BEHAVIOR:</B><br>
animateColor will begin at 1 second and have a duration of 2 seconds.<br>
At 0 seconds, the color will be WHITE - #FFFFFF.<br>
At 1 second, animateColor begins and the color will imediately start from RED - #FF0000.<SPAN style="background:#FF0000; font-size:10pt">     </SPAN><br>
At 1.5 seconds, the midpoint of animateColor, the color value will be GREEN - #00FF00.<SPAN style="background:#00FF00; font-size:10pt">     </SPAN><br>
At 3 seconds, the color should be BLUE - #0000FF and animateColor Ends.<SPAN style="background:#0000FF; font-size:10pt">     </SPAN><br>
After animateColor ends, the timedElement should REMOVE, leaving the original color, WHITE.<br>
**Note: calcmode="paced" each color value changes evenly over time duration
<br><br>
<B>SAMPLE CODE:</B><br>
<div id="timedElement" style="border:1px solid black;background:WHITE; width:100; height:100;"></div><br>
<t:animateColor targetElement="timedElement" attributeName="backgroundColor" begin="1s" dur="2s" values="#ff0000;#00ff00;#0000ff" fill="remove" calcmode="paced"></t:animateColor>
<br>
<br>
<B>INFORMATION:</B><br>
Copyright: Copyright 1998-2005  W3C (MIT, ERCIM, Keio), All Rights Reserved.
See http://www.w3.org/Consortium/Legal/.
Author: Debbie Newman, Microsoft<br>
Version: 10/09/2000<br>
Module: animation<br>
Feature: animateColor calcmode=paced, values list, fill=remove<br>
File Name: animateColor_values_remove_paced.htm<br>
Media Components: None<br><br>
</BODY>
</HTML>