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

   var delay = 250;

   function step() {
     style = document.getElementById('test').style;
     /* check borderLeftStyle so that if the UA has a bug returning
        canonicalized shorthand properties, the rest of the test is
        not affected */
     if (style.borderLeftStyle == 'dotted') {
       style.borderStyle = 'solid';
     } else {
       style.borderStyle = 'dotted';
     }
     //document.getElementById('result').childNodes[0].data = document.defaultView.getComputedStyle(document.getElementById('test'), '').borderStyle;
     document.getElementById('result').childNodes[0].data = document.getElementById('test').style.borderStyle;
     setTimeout(step, delay);
   }

  ]]>
  </script>
 </head>
 <body onload="step();">
  <p>The big text below should switch between dotted and solid borders.</p>
  <p>The current value of 'border-style' is: <span id="result">unset</span> </p>
  <div id="test">WOW!</div>
 </body>
</html>
