third_party/WebKit/LayoutTests/fast/forms/form-collection-elements-order.html

   1 <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
   2 <html>
   3 <head>
   4 <script src="../../resources/js-test.js"></script>
   5 </head>
   6 <body>
   7 <p id="description"></p>
   8 <div id="console"></div>
   9 <script>
  10 description("This test examines the order of form associated elements which are classified as 'listed'.");
  11
  12 var container = document.createElement('div');
  13 document.body.appendChild(container);
  14 var owner;
  15
  16 function checkOrder(victims) {
  17     if (owner.elements.length != victims.length)
  18         return 'length mismatch, elements.length = ' + owner.elements.length +
  19                ', expected length = ' + victims.length;
  20     for (var i = 0; i < victims.length; ++i)
  21         if (owner.elements[i] != victims[i])
  22             return 'element mismatch at index ' + i;
  23     return 'OK';
  24 }
  25
  26 debug('- Checks the order of form associated elements.');
  27 container.innerHTML = '<form id=owner>' +
  28     '<button name=victim></button>' +
  29     '<fieldset name=victim>Test</fieldset>' +
  30     '<input name=victim/>' +
  31     '<keygen name=victim></keygen>' +
  32     '<label name=victim></label>' +
  33     '<meter name=victim></meter>' +
  34     '<object name=victim></object>' +
  35     '<output name=victim></output>' +
  36     '<progress name=victim></progress>' +
  37     '<select name=victim></select>' +
  38     '<textarea name=victim></textarea>'+
  39     '</form>';
  40 owner = document.getElementById('owner');
  41 var button = document.getElementsByTagName('button')[0];
  42 var fieldset = document.getElementsByTagName('fieldset')[0];
  43 var input = document.getElementsByTagName('input')[0];
  44 var keygen = document.getElementsByTagName('keygen')[0];
  45 var label = document.getElementsByTagName('label')[0];
  46 var meter = document.getElementsByTagName('meter')[0];
  47 var object = document.getElementsByTagName('object')[0];
  48 var output = document.getElementsByTagName('output')[0];
  49 var progress = document.getElementsByTagName('progress')[0];
  50 var select = document.getElementsByTagName('select')[0];
  51 var textarea = document.getElementsByTagName('textarea')[0];
  52 shouldBe('checkOrder([button, fieldset, input, keygen, object, output, select, textarea])', '"OK"');
  53
  54 debug('');
  55 debug('- Checks the order after some elements removed/inserted.');
  56 owner.removeChild(object);
  57 shouldBe('checkOrder([button, fieldset, input, keygen, output, select, textarea])', '"OK"');
  58 owner.removeChild(button);
  59 shouldBe('checkOrder([fieldset, input, keygen, output, select, textarea])', '"OK"');
  60 owner.insertBefore(object, fieldset);
  61 shouldBe('checkOrder([object, fieldset, input, keygen, output, select, textarea])', '"OK"');
  62 owner.appendChild(button);
  63 shouldBe('checkOrder([object, fieldset, input, keygen, output, select, textarea, button])', '"OK"');
  64
  65 debug('');
  66 debug('- Checks the order of form associated elements with form attribute.');
  67 container.innerHTML = '<button name=victim form=owner></button>' +
  68     '<fieldset name=victim form=owner>Test</fieldset>' +
  69     '<input name=victim form=owner />' +
  70     '<keygen name=victim form=owner></keygen>' +
  71     '<form id=owner>' +
  72     '<label name=victim></label>' +
  73     '<meter name=victim></meter>' +
  74     '<object name=victim></object>' +
  75     '</form>' +
  76     '<output name=victim form=owner></output>' +
  77     '<progress name=victim form=owner></progress>' +
  78     '<select name=victim form=owner></select>' +
  79     '<textarea name=victim form=owner></textarea>';
  80 owner = document.getElementById('owner');
  81 button = document.getElementsByTagName('button')[0];
  82 fieldset = document.getElementsByTagName('fieldset')[0];
  83 input = document.getElementsByTagName('input')[0];
  84 keygen = document.getElementsByTagName('keygen')[0];
  85 label = document.getElementsByTagName('label')[0];
  86 meter = document.getElementsByTagName('meter')[0];
  87 object = document.getElementsByTagName('object')[0];
  88 output = document.getElementsByTagName('output')[0];
  89 progress = document.getElementsByTagName('progress')[0];
  90 select = document.getElementsByTagName('select')[0];
  91 textarea = document.getElementsByTagName('textarea')[0];
  92 shouldBe('checkOrder([button, fieldset, input, keygen, object, output, select, textarea])', '"OK"');
  93
  94 debug('');
  95 debug('- Checks the order after some elements removed/inserted with form attribute.');
  96 owner.removeChild(object);
  97 shouldBe('checkOrder([button, fieldset, input, keygen, output, select, textarea])', '"OK"');
  98 container.removeChild(button);
  99 shouldBe('checkOrder([fieldset, input, keygen, output, select, textarea])', '"OK"');
 100 container.removeChild(textarea);
 101 shouldBe('checkOrder([fieldset, input, keygen, output, select])', '"OK"');
 102 owner.appendChild(object);
 103 shouldBe('checkOrder([fieldset, input, keygen, object, output, select])', '"OK"');
 104 container.insertBefore(textarea, fieldset);
 105 shouldBe('checkOrder([textarea, fieldset, input, keygen, object, output, select])', '"OK"');
 106 container.appendChild(button);
 107 shouldBe('checkOrder([textarea, fieldset, input, keygen, object, output, select, button])', '"OK"');
 108 </script>
 109 </body>
 110 </html>