third_party/WebKit/LayoutTests/fast/forms/form-attribute-elements-order2.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 the elements attribute of a form element with form-associated elements with form attribute or witout form attibute.");
  11
  12 var container = document.createElement('div');
  13 document.body.appendChild(container);
  14
  15 debug('');
  16 debug('- Test for the case where some elements have form attribute but some others not.');
  17 container.innerHTML = '<form id=owner>' +
  18     '    <input id=input1 name=victim />' +
  19     '    <input id=input2 name=victim form=owner />' +
  20     '    <input id=input3 name=victim />' +
  21     '</form>';
  22 var owner = document.getElementById('owner');
  23 var input1 = document.getElementById('input1');
  24 var input2 = document.getElementById('input2');
  25 var input3 = document.getElementById('input3');
  26 shouldBe('owner.elements.length', '3');
  27 shouldBe('owner.elements[0]', 'input1');
  28 shouldBe('owner.elements[1]', 'input2');
  29 shouldBe('owner.elements[2]', 'input3');
  30
  31 container.innerHTML = '<form id=owner>' +
  32     '    <input id=input1 name=victim form=owner />' +
  33     '    <input id=input2 name=victim />' +
  34     '    <input id=input3 name=victim form=owner />' +
  35     '</form>';
  36 owner = document.getElementById('owner');
  37 input1 = document.getElementById('input1');
  38 input2 = document.getElementById('input2');
  39 input3 = document.getElementById('input3');
  40 shouldBe('owner.elements.length', '3');
  41 shouldBe('owner.elements[0]', 'input1');
  42 shouldBe('owner.elements[1]', 'input2');
  43 shouldBe('owner.elements[2]', 'input3');
  44
  45 debug('');
  46 debug('- Test for inserting/removing a form-associated element without form attribute.');
  47 container.innerHTML = '<input name=victim id=before form=owner />' +
  48     '<form id=owner action= method=GET>' +
  49     '    <input name=victim id=inner />' +
  50     '</form>' +
  51     '<input name=victim id=after form=owner />';
  52 owner = document.getElementById('owner');
  53 var before = document.getElementById('before');
  54 var inner = document.getElementById('inner');
  55 var after = document.getElementById('after');
  56
  57 var inner2 = document.createElement('input');
  58 inner2.name = 'victim';
  59 inner2.id = 'inner2';
  60 owner.appendChild(inner2);
  61 shouldBe('owner.elements.length', '4');
  62 shouldBe('owner.elements[0]', 'before');
  63 shouldBe('owner.elements[1]', 'inner');
  64 shouldBe('owner.elements[2]', 'inner2');
  65 shouldBe('owner.elements[3]', 'after');
  66
  67 owner.removeChild(inner);
  68 owner.insertBefore(inner, inner2);
  69 shouldBe('owner.elements.length', '4');
  70 shouldBe('owner.elements[0]', 'before');
  71 shouldBe('owner.elements[1]', 'inner');
  72 shouldBe('owner.elements[2]', 'inner2');
  73 shouldBe('owner.elements[3]', 'after');
  74
  75 debug('');
  76 debug('- Test for inserting/removing a form-associated element with form attribute.');
  77 var before2 = document.createElement('input');
  78 before2.name = 'victim';
  79 before2.id = 'before2';
  80 before2.setAttribute('form', 'owner');
  81 container.insertBefore(before2, owner);
  82 var after2 = document.createElement('input');
  83 after2.name = 'victim';
  84 after2.id = 'after2';
  85 after2.setAttribute('form', 'owner');
  86 container.appendChild(after2);
  87 shouldBe('owner.elements.length', '6');
  88 shouldBe('owner.elements[0]', 'before');
  89 shouldBe('owner.elements[1]', 'before2');
  90 shouldBe('owner.elements[2]', 'inner');
  91 shouldBe('owner.elements[3]', 'inner2');
  92 shouldBe('owner.elements[4]', 'after');
  93 shouldBe('owner.elements[5]', 'after2');
  94
  95 container.removeChild(before);
  96 container.removeChild(after);
  97 container.insertBefore(before, before2);
  98 container.insertBefore(after, after2);
  99 shouldBe('owner.elements.length', '6');
 100 shouldBe('owner.elements[0]', 'before');
 101 shouldBe('owner.elements[1]', 'before2');
 102 shouldBe('owner.elements[2]', 'inner');
 103 shouldBe('owner.elements[3]', 'inner2');
 104 shouldBe('owner.elements[4]', 'after');
 105 shouldBe('owner.elements[5]', 'after2');
 106 </script>
 107 </body>
 108 </html>