third_party/WebKit/LayoutTests/fast/forms/radionodelist-whose-form-element-detached-from-domtree.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <meta charset="utf-8">
   5 <script src="../../resources/js-test.js"></script>
   6 </head>
   7 <body>
   8 <div id="container">
   9 <form id="testForm">
  10     Radio button array:
  11     <input type="radio" name="type1" value="value1">
  12     <input type="radio" name="type1" value="value2">
  13     <input type="radio" name="type2" value="value4">
  14     <input type="radio" name="type2" value="value5">
  15     <br>
  16     Single checkbox:
  17     <input type="checkbox" name="chkbox" value="chkboxvalue">
  18     <br>
  19 </form>
  20 <div id="external-elements">
  21 <input type="radio" form="testForm" name="type1" value="value3">
  22 <input type="radio" form="testForm" name="type2" value="value6">
  23 </div>
  24 </div>
  25 <div id="console"></div>
  26 <script>
  27
  28 description("RadioNodeList should be rooted at form itself if detached from dom tree");
  29 debug("");
  30 var owner = document.getElementById('testForm');
  31 var radioNodeList1 = owner.elements['type1'];
  32 var radioNodeList2 = owner.elements['type2'];
  33 var container = document.getElementById('container');
  34
  35 function testRadioNodeList(expectedNumberOfItems) {
  36     shouldBe('radioNodeList1.length', expectedNumberOfItems + '');
  37     shouldBe('radioNodeList2.length', expectedNumberOfItems + '');
  38
  39     shouldBe('radioNodeList1[0].value', "'value1'");
  40     shouldBe('radioNodeList1[1].value', "'value2'");
  41     if (expectedNumberOfItems == 3)
  42         shouldBe('radioNodeList1[2].value', "'value3'");
  43     shouldBe('radioNodeList2[0].value', "'value4'");
  44     shouldBe('radioNodeList2[1].value', "'value5'");
  45     if (expectedNumberOfItems == 3)
  46         shouldBe('radioNodeList2[2].value', "'value6'");
  47 }
  48
  49 debug("form in dom tree");
  50 testRadioNodeList(3);
  51
  52 debug("Check RadioNodeList.value");
  53 shouldBe('radioNodeList1.value', '""');
  54 shouldBe('radioNodeList2.value', '""');
  55 shouldBe('radioNodeList1[2].checked = true; radioNodeList1.value', "'value3'");
  56
  57 container.removeChild(owner);
  58
  59 debug("");
  60 debug("form detached from dom tree");
  61 testRadioNodeList(2);
  62
  63 debug("Check RadioNodeList.value");
  64 shouldBe('radioNodeList1[1].checked = true; radioNodeList1.value', "'value2'");
  65
  66 container.appendChild(owner);
  67 var externalElements = document.getElementById('external-elements');
  68 externalElements.parentNode.removeChild(externalElements);
  69 container.appendChild(externalElements);
  70
  71 debug("");
  72 debug("form again added to dom tree");
  73 testRadioNodeList(3);
  74
  75 container.parentNode.removeChild(container);
  76
  77 debug("");
  78 debug("form's ancestor detached from dom tree");
  79 testRadioNodeList(2);
  80
  81 debug("Check RadioNodeList.value");
  82 shouldBe('radioNodeList1[1].checked = true; radioNodeList1.value', "'value2'");
  83
  84 document.body.appendChild(container);
  85
  86 debug("");
  87 debug("form again added to dom tree");
  88 testRadioNodeList(3);
  89
  90 container.parentNode.removeChild(container);
  91 </script>
  92 </body>
  93 </html>