<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title>DOM CSS: Typical Usage Test - animating 'clip'</title>
  <style type="text/css">
   #test { position: absolute; left: 4em; top: 4em; width: 130px; height: 30px; padding: 10px; }
   #test { background: teal; color: yellow; font: 900 30px/1 Impact, sans-serif; text-align: center; text-decoration: blink; }
  </style>
  <script type="text/javascript">
  <![CDATA[
 
   var threshold = 50;
   var increment = 5;
   var delay = 25;

   var index = 0;
   function step() {
     document.getElementById('test').style.clip = 'rect('+
        (index/4)+'px,'+ // top: 0..25
        (150-index*3/4)+'px,'+ // right: 75..150
        (50-index/4)+'px,'+ // bottom: 25..50
        (index*3/4)+'px)'; // left: 0..75
     //document.getElementById('result').childNodes[0].data = document.defaultView.getComputedStyle(document.getElementById('test'), '').clip;
     document.getElementById('result').childNodes[0].data = document.getElementById('test').style.clip;
     index += increment;
     if ((index <= 0) || (index >= threshold)) {
       increment = -increment;
     }
     setTimeout(step, delay);
   }

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