<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title>Inserting stylesheets dynamically</title>
  <script type="text/javascript">

   var element;
   var step = 0;
   var errors = 0;
   var delay = 3000;
   var index = {};
   var steps = [
     { action: 'append',            type: 'link',  sheet: 1, result: 1, }, // 1
     { action: 'insert',  other: 1, type: 'link',  sheet: 2, result: 1, }, // 2 1
     { action: 'replace', other: 1, type: 'style', sheet: 3, result: 3, }, // 2 3
     { action: 'append',            type: 'meta',  sheet: 4, result: 4, }, // 2 3 4
     { action: 'delete',  other: 3,                          result: 4, }, // 2 4
     { action: 'delete',  other: 4,                          result: 2, }, // 4
     { action: 'append',            type: 'link',  sheet: 5, result: 5, }, // 4 5
     { action: 'append',            type: 'link',  sheet: 6, result: 6, }, // 4 5 6
     { action: 'append',            type: 'link',  sheet: 7, result: 7, }, // 4 5 6 7
     { action: 'move',    from:     type: 'link',  sheet: 1, result: 1, }, // 1
   ];

   function status(text) {
     element.firstChild.data = text;
   }

   function next() {
     if (step >= steps.length) {
       return done();
     }
     status('Test running: ' + step + ' of ' + steps.length);
     /* ... */
     window.setTimeout(check, delay);
   }

   function check() {
     /* ... */
     step += 1;
     next();
   }

   function done() {
     if (errors > 0) {
       status('FAILED: ' + errors + ' errors');
     } else {
       status('PASSED');
     }
   }

   function run() {
     element = document.getElementById('test');
     status('Test initialising...');
     window.setTimeout(next, delay);
   }

  </script>
 </head>
 <body onload="run()">
  <p id="test">Test not started.</p>
 </body>
</html>
