<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title>DOM CSS Rule Rematching: changing attributes</title>
  <style type="text/css">
  <![CDATA[
    /* provide some supporting style information */
    #test[title="before"] { background: red; color: yellow; }
    #test[title="after"] { background: green; color: white; }
  ]]>
  </style>
  <script type="text/javascript">
  <![CDATA[
    function test() {
      /* perform the attribute change */
      var test = document.getElementById('test');
      test.setAttribute('title', 'after');

      /* report on the results */
      var console = document.getElementById('console');
      console.appendChild(document.createTextNode("Test element now looks like:\n"));
      console.appendChild(document.createTextNode('<'+test.tagName));
      for (i = 0; i < document.getElementById('test').attributes.length; i++) {
        console.appendChild(document.createTextNode(' '+
            test.attributes.item(i).nodeName + '="' + 
            test.attributes.item(i).nodeValue + '"'));
      }
      console.appendChild(document.createTextNode('>...</'+test.tagName+'>'));
    }
  ]]>
  </script>
 </head>
 <body onload="window.setTimeout(test, 300)">
   <p title="before" id="test">This text should be green.</p>
   <pre id="console"></pre>
 </body>
</html>
