<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title>DOM CSS: Typical Usage Test - animating 'color' again</title>
  <style type="text/css">
   #test { background: white; color: black; font: 900 30px/1 Impact, sans-serif; }
  </style>
  <script type="text/javascript">
  <![CDATA[

   var delay = 250;

   function step() {
     style = document.getElementById('test').style;
     if (style.color == 'black') {
       style.color = 'white';
     } else {
       style.color = 'black';
     }
     //document.getElementById('result').childNodes[0].data = document.defaultView.getComputedStyle(document.getElementById('test'), '').color;
     document.getElementById('result').childNodes[0].data = document.getElementById('test').style.color;
     setTimeout(step, delay);
   }

  ]]>
  </script>
 </head>
 <body onload="step();">
  <p>The big text below should blink continuously.</p>
  <p>The current value of 'color' is: <span id="result">unset</span> </p>
  <div id="test">WOW!</div>
 </body>
</html>
