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

   var delay = 125;

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

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