<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title>DOM CSS: Typical Usage Test - animating an inherited 'color'</title>
  <style type="text/css">
   #test { margin: 1em 2em; font: 900 2.5em Verdana, sans-serif; }
   .bar { margin: 0; color: white; font: 900 1em Verdana, sans-serif; }
   .bar > span { padding: 0 0.2em; }
   #barR > span { background: maroon; }
   #barG > span { background: green; }
   #barB > span { background: navy; }
  </style>
  <script type="text/javascript">
  <![CDATA[
 
   var threshold = 0xFFFFFF+1;
   var step = 0x06;
   var delay = 50;
   var r = 1;
   var g = 3;
   var b = 5;

   function increment(scale, offset) {
     if (((((index & offset * 0xFF) / offset) + (scale * step)) > 0xFF) ||
         ((((index & offset * 0xFF) / offset) + (scale * step)) < 0x00)) {
       scale =- scale;
     }
     index += step*scale*offset;
     return scale;
   }

   var index = 0;
   function animate() {
     document.getElementById('test').style.color = 'rgb('+((index & 0xFF0000)/0x010000)+','+
                                                          ((index & 0x00FF00)/0x000100)+','+
                                                          ((index & 0x0000FF)/0x000001)+')';
     document.getElementById('barR').style.marginLeft = (index & 0xFF0000)/0x010000+'px';
     document.getElementById('barG').style.marginLeft = (index & 0x00FF00)/0x000100+'px';
     document.getElementById('barB').style.marginLeft = (index & 0x0000FF)/0x000001+'px';
     //document.getElementById('result').childNodes[0].data = document.defaultView.getComputedStyle(document.getElementById('test'), '').color;
     document.getElementById('result').childNodes[0].data = document.getElementById('test').style.color;
     r = increment(r, 0x010000);
     g = increment(g, 0x000100);
     b = increment(b, 0x000001);
     setTimeout(animate, delay);
   }

  ]]>
  </script>
 </head>
 <body onload="animate();">
  <p>The text below should continuously change colour.</p>
  <div id="test" style="color: red"><span>Animating Colour!</span></div>
  <p>The current color is: <span id="result">red</span> </p>
  <div class="bar" id="barR" style="margin-left: 255px"><span>R</span></div>
  <div class="bar" id="barG" style="margin-left: 0px"><span>G</span></div>
  <div class="bar" id="barB" style="margin-left: 0px"><span>B</span></div>
 </body>
</html>
