third_party/webdriver/test_data/ajaxy_page.html

   1 <!DOCTYPE html>
   2 <html>
   3 <body>
   4 <form action="javascript:updateDom()">
   5   <label for="typer">New label text:</label>
   6   <input name="typer" type="text"/>
   7   <br/>
   8   <label for="color">Select label color:</label>
   9   <input name="color" id="red" value="red" type="radio"/>Red
  10   <input name="color" id="green" value="green" type="radio"/>Green
  11   <br/>
  12   <input name="submit" type="submit" value="Add Label"/>
  13 </form>
  14 <div id="update_butter" style="display:none"></div>
  15 <script>
  16   var butter = document.getElementById('update_butter');
  17
  18   var textProperty = butter['innerText'] ? 'innerText' : 'textContent';
  19
  20   var listeners = [];
  21   function registerListener(fn) {
  22     listeners.push(fn);
  23   }
  24
  25   function updateDom() {
  26     butter.style.display = 'block';
  27     butter[textProperty] = 'Updating';
  28     disableForm();
  29     tick();
  30   }
  31
  32   function disableForm() {
  33     var inputs = document.getElementsByTagName('input');
  34     for (var i = 0, input; input = inputs[i]; ++i) {
  35       input.disabled = true;
  36     }
  37   }
  38
  39   function enableForm() {
  40     var inputs = document.getElementsByTagName('input');
  41     for (var i = 0, input; input = inputs[i]; ++i) {
  42       input.disabled = false;
  43     }
  44   }
  45
  46   function tick() {
  47     var length = butter[textProperty].substring('Updating'.length).length;
  48     if (length != 10) {
  49       butter[textProperty] += '.';
  50       window.setTimeout(tick, 500);
  51     } else {
  52       enableForm();
  53       var div = document.createElement('div');
  54       var colors = document.forms[0].color;
  55       for (var i = 0, color; color = colors[i]; ++i) {
  56         if (color.checked) {
  57           div.style.backgroundColor = color.value;
  58           break;
  59         }
  60       }
  61       div[textProperty] = document.forms[0].typer.value;
  62       div.className = 'label';
  63       document.forms[0].typer.value = '';
  64       document.body.appendChild(div);
  65
  66       butter[textProperty] = 'Done!';
  67
  68       window.setTimeout(function() {
  69         while (listeners.length) {
  70           try {
  71             listeners.shift()(div[textProperty]);
  72           } catch (e) {
  73             butter[textProperty] = "Exception seen: " + e;
  74           }
  75         }
  76       }, 500);
  77     }
  78   }
  79 </script>
  80 </body>
  81 </html>