third_party/WebKit/LayoutTests/fast/forms/form-collection-radio-node-list.html

   1 <!DOCTYPE html>
   2 <html>
   3 <body>
   4 <script src="../../resources/js-test.js"></script>
   5 <p id="description"></p>
   6 <div id="divId">
   7 <form id="form1">
   8     <button id=button1></button>
   9     <fieldset id=fieldset1><legend id=legend1></legend></fieldset>
  10     <input id=inputhidden type=hidden>
  11     <input id=commoninput type=text>
  12     <input id=inputcommon type=search value=searching>
  13     <input id=inputCOMMON type=url>
  14     <input id=commoninput type=email>
  15     <input id=inputpassword type=password>
  16     <input id=inputdate type=date>
  17     <input id=numberId name=inputcommon type=number value=123>
  18     <input id=inputrange type=range>
  19     <input id=inputcolor type=color>
  20     <input id=inputcheckbox type=checkbox>
  21     <input id=inputcommon type=radio value="inputRadioValue">
  22     <input id=inputfile type=file>
  23     <input id=inputsubmit type=submit>
  24     <input id=inputcommon type=image>
  25     <input id=commoninput type=reset>
  26     <input id=inputcommon type=button value=buttonValue>
  27     <keygen id=keygen1></keygen>
  28     <label id=label1></label>
  29     <meter id=meter1></meter>
  30     <object id=object1></object>
  31     <output id=output1></output>
  32     <progress id=progress1></progress>
  33     <select id=select1 name=inputCOmmon>
  34         <optgroup id=optgroup1>group1</optgroup>
  35         <option id=option1>option1</option>
  36     </select>
  37     <textarea id=textarea1></textarea>
  38 </form>
  39 </div>
  40 <div id="console"></div>
  41 <script>
  42 description("This test is for RadioNodeList specified at http://www.whatwg.org/specs/web-apps/current-work/multipage/common-dom-interfaces.html#radionodelist ");
  43 debug("");
  44 var owner = document.getElementById('form1');
  45
  46 shouldBe('owner.elements.length', '23');
  47
  48 var elementsList = owner.elements;
  49 var radioNodeList = elementsList.namedItem("inputcommon");
  50 shouldBe('radioNodeList.length', '4');
  51
  52 shouldBe('radioNodeList[0].value', "'searching'");
  53 shouldBe('radioNodeList[1].value', "'123'");
  54 shouldBe('radioNodeList[2].value', "'inputRadioValue'");
  55 shouldBe('radioNodeList[3].value', "'buttonValue'");
  56
  57 debug("");
  58 debug("Changing the input value to check RadioNodeList is live view of FormCollection");
  59 document.getElementById("numberId").value = 456;
  60 shouldBe('radioNodeList[1].value', "'456'");
  61
  62 debug("");
  63 debug("Checking value IDL attribute on the RadioNodeList");
  64 shouldBe('radioNodeList.value', '""');
  65 shouldBe('radioNodeList.value = "inputRadioValue"; radioNodeList[2].checked', 'true');
  66 shouldBe('Object.prototype.toString.call(radioNodeList[2])', "'[object HTMLInputElement]'");
  67 shouldBe('radioNodeList[2].type', "'radio'");
  68
  69 radioNodeList[2].checked = false;
  70 shouldBe('radioNodeList.value', '""');
  71 shouldBe('radioNodeList[2].checked = true; radioNodeList.value', "'inputRadioValue'");
  72
  73 var newElement = document.createElement("input");
  74 newElement.setAttribute("type", "text");
  75 newElement.setAttribute("value", "new element");
  76 newElement.setAttribute("id", "inputcommon");
  77
  78 debug("");
  79 debug("Check RadioNodeList is updated after adding a new element");
  80 shouldBe('owner.appendChild(newElement); radioNodeList.length', '5');
  81 shouldBe('radioNodeList[4].value', "'new element'");
  82
  83 debug("");
  84 debug("Check RadioNodeList is updated after remove an element");
  85 shouldBe('owner.removeChild(newElement); radioNodeList.length', '4');
  86 shouldBe('radioNodeList[3].value', "'buttonValue'");
  87
  88 var nonSubtreeElement = document.createElement("input");
  89 nonSubtreeElement.setAttribute("type", "text");
  90 nonSubtreeElement.setAttribute("value", "non subtree element");
  91 nonSubtreeElement.setAttribute("id", "inputcommon");
  92 nonSubtreeElement.setAttribute("form", "form1");
  93
  94 var container = document.getElementById("divId");
  95
  96 debug("");
  97 debug("Check RadioNodeList is updated after adding a new element");
  98 shouldBe('container.appendChild(nonSubtreeElement); radioNodeList.length', '5');
  99 shouldBe('owner.elements.length', '24');
 100 shouldBe('radioNodeList[4].value', "'non subtree element'");
 101
 102 debug("");
 103 debug("Check RadioNodeList is updated after change in id, type and checked state of an element");
 104 shouldBe('radioNodeList.length', '5');
 105 debug("After changing the id");
 106 radioNodeList[4].id = "changedName";
 107 shouldBe('radioNodeList.length', '4');
 108
 109 shouldBe('elementsList[13].checked = false; radioNodeList.value', '""');
 110 shouldBe('elementsList[13].checked = true; radioNodeList.value', "'inputRadioValue'");
 111 shouldBe('elementsList[13].type = "date"; radioNodeList.value', "''");
 112
 113 debug("");
 114 debug("Check second RadioNodeList is also created properly");
 115 var radioNodeList2 = elementsList.namedItem("commoninput");
 116 shouldBe('radioNodeList2.length', '3');
 117
 118 shouldBe('radioNodeList2[0].type', "'text'");
 119 shouldBe('radioNodeList2[1].type', "'email'");
 120 shouldBe('radioNodeList2[2].type', "'reset'");
 121 radioNodeList2[2].id = "idChanged";
 122 debug("After changing the id");
 123 shouldBe('radioNodeList2.length', '2');
 124 debug("");
 125
 126 debug("Check that object element also reflects in RadioNodeList.");
 127 document.getElementById("object1").id = "inputcommon";
 128 shouldBe('radioNodeList.length', '5');
 129
 130 debug("");
 131 debug("Check that object element does not reflect in RadioNodeList if its owner form is not present.");
 132 var nonSubtreeObjectElement = document.createElement("object");
 133 nonSubtreeObjectElement.setAttribute("id", "inputcommon");
 134 shouldBe('container.appendChild(nonSubtreeObjectElement); radioNodeList.length', '5');
 135
 136 container.parentNode.removeChild(container);
 137 </script>
 138 </body>
 139 </html>