<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title>DOM CSS and Quotes: Changing the DOM</title>
  <style type="text/css">
  <![CDATA[
   test { display: block; font-size: 3em; }
   test * { font-size: 0.7em; border: solid; padding: 0.05em; margin: 0.1em; vertical-align: 0.15em; }
   test *:before { content: open-quote; }
   test *:after { content: close-quote; }
   a { quotes: '<a>' '</a>'; background: blue; }
   b { quotes: '<b'    '/>'; background: green; }
   c { quotes: '<c'    '/>'; background: yellow; }
   d { quotes: '<d>' '</d>'; background: fuchsia; }
   e { quotes: '<e>' '</e>'; background: brown; }
   f { quotes: '<f'    '/>'; background: teal; }
   g { quotes: '<g'    '/>'; background: lime; }
   #console { font-size: 0.6em; }
  ]]>
  </style>
  <script type="text/javascript">
  <![CDATA[

    function say(text) {
      document.getElementById('console').appendChild(document.createTextNode(text+"\n"));
    }

    var e;
    var ns = 'http://www.example.org/';
    function test(step) {
      switch (step) {
        case 0: {
          say('Starting DOM construction...');
          e = document.getElementsByTagNameNS(ns, 'test')[0];
          e.appendChild(document.createElementNS(ns, 'a'));
          break; 
        }
        case 1: {
          e.firstChild.appendChild(document.createElementNS(ns, 'b'));
          break; 
        }
        case 2: {
          e.firstChild.appendChild(document.createElementNS(ns, 'c'));
          break; 
        }
        case 3: {
          e.appendChild(document.createElementNS(ns, 'd'));
          e.firstChild.nextSibling.appendChild(e.firstChild);
          break;
        }
        case 4: {
          e.firstChild.insertBefore(document.createElementNS(ns, 'e'), e.firstChild.firstChild);
          break;
        }
        case 5: {
          e.firstChild.firstChild.appendChild(document.createElementNS(ns, 'f'));
          break;
        }
        case 6: {
          e.firstChild.lastChild.insertBefore(document.createElementNS(ns, 'g'), e.firstChild.lastChild.lastChild);
          break;
        }
        default: {
          say('Test completed.');
          return;
        }
      }
      say('Step '+step+' completed.');
      window.setTimeout(test, 300, step+1);
    }

  ]]>
  </script>
 </head>
 <body onload="window.setTimeout(test, 300, 0)">
   <p>The following two bars should look identical after completion:</p>
   <test xmlns="http://www.example.org/"></test>
   <test xmlns="http://www.example.org/"><d><e><f/></e><a><b/><g/><c/></a></d></test>
   <pre id="console"></pre>
 </body>
</html>
