<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: 'FAIL' 'FAIL' '<a>'  '</a>' 'FAIL' 'FAIL' 'FAIL' 'FAIL' 'FAIL' 'FAIL' 'FAIL' 'FAIL' 'FAIL' 'FAIL'; background: blue; }
   b { quotes: 'FAIL' 'FAIL' 'FAIL' 'FAIL' '<b>'  '</b>' 'FAIL' 'FAIL' 'FAIL' 'FAIL' 'FAIL' 'FAIL' 'FAIL' 'FAIL'; background: green; }
   c { quotes: 'FAIL' 'FAIL' 'FAIL' 'FAIL' '<c>'  '</c>' 'FAIL' 'FAIL' 'FAIL' 'FAIL' 'FAIL' 'FAIL' 'FAIL' 'FAIL'; background: yellow; }
   d { quotes: '<d>'  '</d>' 'FAIL' 'FAIL' 'FAIL' 'FAIL' 'FAIL' 'FAIL' 'FAIL' 'FAIL' 'FAIL' 'FAIL' 'FAIL' 'FAIL'; background: fuchsia; }
   e { quotes: 'FAIL' 'FAIL' '<e>'  '</e>' 'FAIL' 'FAIL' 'FAIL' 'FAIL' 'FAIL' 'FAIL' 'FAIL' 'FAIL' 'FAIL' 'FAIL'; background: brown; }
   f { quotes: 'FAIL' 'FAIL' 'FAIL' 'FAIL' '<f>'  '</f>' 'FAIL' 'FAIL' 'FAIL' 'FAIL' 'FAIL' 'FAIL' 'FAIL' 'FAIL'; background: teal; }
   g { quotes: 'FAIL' 'FAIL' 'FAIL' 'FAIL' '<g>'  '</g>' 'FAIL' 'FAIL' 'FAIL' 'FAIL' 'FAIL' 'FAIL' 'FAIL' 'FAIL'; 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)">

 <h1>INCOMPLETE</h1>
   <p>The following two bars should look identical after completion (and obviously, not say FAIL):</p>
   <test xmlns="http://www.example.org/">
     <d>
       <e>
         <f/>
       </e>
       <a>
         <b/>
         <g/>
         <c/>
       </a>
     </d>
   </test>
   <pre id="console"></pre>
 </body>
</html>
