htmloptionscollection.html (7136B)
1 <!doctype html> 2 <title>HTMLOptionsCollection</title> 3 <script src="/resources/testharness.js"></script> 4 <script src="/resources/testharnessreport.js"></script> 5 <link rel="help" href="https://html.spec.whatwg.org/multipage/#htmloptionscollection-0"> 6 <select id=a> 7 <option>1</option> 8 <option>2</option> 9 <option>3</option> 10 <!--Note whitespace is important--> 11 <option>4</option> 12 <option>5</option> 13 </select> 14 15 <select id=b> 16 <option id=b1>1</option> 17 <option name=b2>2</option> 18 <option id=b3>3</option> 19 <option id=b3>4</option> 20 <option name=b4>5</option> 21 <option name=b4>6</option> 22 <option id=b5>7</option> 23 <option name=b5>8</option> 24 <option id=b6 name=b7>9</option> 25 <option id=b6 name=b6>10</option> 26 <option id=b8 name=b9>11</option> 27 </select> 28 29 <script> 30 var a; 31 var a_opts; 32 var a_original_innerHTML; 33 var b; 34 var b_opts; 35 36 setup(function() { 37 a = document.getElementById("a"); 38 a_opts = a.options; 39 a_original_innerHTML = a.innerHTML; 40 a.innerHTML = a_original_innerHTML; 41 b = document.getElementById("b"); 42 b_opts = b.options; 43 b_original_innerHTML = b.innerHTML; 44 b.innerHTML = b_original_innerHTML; 45 }) 46 47 function assert_values_equals(coll, expected_values, message) { 48 actual = []; 49 for (var i=0; i<coll.length; i++) { 50 actual.push(coll[i].value); 51 } 52 assert_array_equals(actual, expected_values, message); 53 } 54 55 test(function() { 56 assert_equals(5, a_opts.length); 57 }, "Original length"); 58 59 test(function() { 60 a.innerHTML = a_original_innerHTML; 61 a_opts.value = "3"; 62 a_opts.length = 5; 63 assert_equals(a_opts.length, 5); 64 assert_equals(a_opts.value, "3"); 65 }, "Setting length to original value has no effect"); 66 67 test(function() { 68 a.innerHTML = a_original_innerHTML; 69 a.value = 3; 70 a_opts.length = 3; 71 assert_equals(3, a_opts.length, "Correct length"); 72 assert_values_equals(a_opts, ["1","2","3"], "Correct elements remain") 73 assert_equals(a_opts.value, "3", "Correct value set"); 74 assert_equals(a.childNodes.length, 11, "Correct number of child nodes") 75 }, "Setting length to shorter value"); 76 77 test(function() { 78 a.innerHTML = a_original_innerHTML; 79 a.value = 3; 80 a_opts.length = 7; 81 assert_equals(a_opts.length, 7, "Correct length"); 82 assert_values_equals(a_opts, ["1","2","3","4","5","",""], "Correct elements inserted") 83 assert_equals(a.value, "3", "Correct value set"); 84 assert_equals(a.childNodes.length, 15, "Correct number of child nodes") 85 }, "Setting length to longer value"); 86 87 test(function() { 88 a.innerHTML = a_original_innerHTML; 89 var newChild = document.createElement("p"); 90 var newOption = document.createElement("option"); 91 newOption.textContent = "6"; 92 newChild.appendChild(newOption); 93 a.appendChild(newChild); 94 a.value = 3; 95 assert_equals(a_opts.length, 6, "Correct length"); 96 assert_values_equals(a_opts, ["1","2","3","4","5","6"], "Correct elements inserted") 97 assert_equals(a.value, "3", "Correct value set"); 98 }, "Insert <p><option>6</option></p> into <select>"); 99 100 test(function() { 101 a.innerHTML = a_original_innerHTML; 102 var newChild = document.createElement("select"); 103 var newOption = document.createElement("option"); 104 newOption.textContent = "6"; 105 newChild.appendChild(newOption); 106 a.appendChild(newChild); 107 a.value = 3; 108 assert_equals(a_opts.length, 5, "Correct length"); 109 assert_values_equals(a_opts, ["1","2","3","4","5"], "Correct elements inserted") 110 assert_equals(a.value, "3", "Correct value set"); 111 }, "Insert <select><option>6</option></select> into <select>"); 112 113 test(function() { 114 //This tests the spec but it is probably wrong here; see bug 12665 115 a.innerHTML = a_original_innerHTML; 116 var newChild = document.createElement("optgroup"); 117 var newOption = document.createElement("option"); 118 newOption.textContent = "6"; 119 newChild.appendChild(newOption); 120 a.appendChild(newChild); 121 a.value = 3; 122 assert_equals(a_opts.length, 6, "Correct length"); 123 assert_values_equals(a_opts, ["1","2","3","4","5", "6"], "Correct elements inserted") 124 assert_equals(a.value, "3", "Correct value set"); 125 }, "Insert <optgroup><option>6</option></optgroup> into <select>"); 126 127 test(function() { 128 a.innerHTML = a_original_innerHTML; 129 var newChild = document.createElement("optgroup"); 130 var newChild1 = document.createElement("optgroup"); 131 var newOption = document.createElement("option"); 132 newOption.textContent = "6"; 133 newChild.appendChild(newChild1); 134 newChild1.appendChild(newOption); 135 a.appendChild(newChild); 136 a.value = 3; 137 assert_equals(a_opts.length, 5, "Correct length"); 138 assert_values_equals(a_opts, ["1","2","3","4","5"], "Correct elements inserted") 139 assert_equals(a.value, "3", "Correct value set"); 140 }, "Insert <optgroup><optgroup><option>6</option></optgroup></optgroup> into <select>"); 141 142 test(function() { 143 assert_equals(b_opts.namedItem("b1").value, "1"); 144 }, "namedItem id attribute"); 145 146 test(function() { 147 assert_equals(b_opts.namedItem("b2").value, "2"); 148 }, "namedItem name attribute"); 149 150 test(function() { 151 assert_equals(b_opts.namedItem("c"), null); 152 }, "namedItem doesn't match anything"); 153 154 test(function() { 155 assert_equals(b_opts.namedItem("b3").value, "3"); 156 }, "namedItem multiple IDs"); 157 158 test(function() { 159 assert_equals(b_opts.namedItem("b4").value, "5"); 160 }, "namedItem multiple names"); 161 162 test(function() { 163 assert_equals(b_opts.namedItem("b5").value, "7"); 164 }, "namedItem multiple name and ID"); 165 166 test(function() { 167 assert_equals(b_opts.namedItem("b6").value, "9"); 168 }, "namedItem multiple name and ID with multiple attributes"); 169 170 test(function() { 171 assert_equals(b_opts.namedItem("b8").value, "11"); 172 }, "namedItem id attribute multiple attributes one element"); 173 174 test(function() { 175 assert_equals(b_opts.namedItem("b9").value, "11"); 176 }, "namedItem name attribute multiple attributes one element"); 177 178 test(function() { 179 assert_true(b_opts[0] instanceof HTMLOptionElement); 180 assert_equals(b_opts[0].innerHTML, "1"); 181 }, "HTMLOptionsCollection [index] method return the item with index"); 182 183 test(function() { 184 assert_true(b_opts["b2"] instanceof HTMLOptionElement); 185 assert_equals(b_opts["b2"].innerHTML, "2"); 186 }, "HTMLOptionsCollection [name] method return the item with name"); 187 188 test(function() { 189 assert_true(b_opts.item(0) instanceof HTMLOptionElement); 190 assert_equals(b_opts.item(0).innerHTML, "1"); 191 }, "HTMLOptionsCollection.item(index) method return the item with index"); 192 193 test(function() { 194 assert_true(b_opts.item("b2") instanceof HTMLOptionElement); 195 assert_equals(b_opts.item("b2").innerHTML, "1"); 196 }, "HTMLOptionsCollection.item(name) method return the item with index 0"); 197 198 test(function() { 199 var b_opts_length = b_opts.length; 200 b_opts.add(new Option("2", "2")); 201 assert_equals(b_opts[b_opts_length].value, "2"); 202 }, "HTMLOptionsCollection.add method insert HTMLOptionElement Option element"); 203 204 test(function() { 205 var b_opts_length = b_opts.length; 206 b_opts.remove(0); 207 assert_equals(b_opts.length, b_opts_length - 1); 208 }, "HTMLOptionsCollection.remove method remove Option element by index"); 209 210 test(function() { 211 var add = document.createElement("p"); 212 assert_throws_js(TypeError, function() {b_opts.add(add);}); 213 }, "Add non-option to collection"); 214 215 </script> 216 <div id=log></div>