| <!doctype html> |
| <title>HTMLOptionsCollection</title> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <link rel="help" href="https://html.spec.whatwg.org/multipage/#htmloptionscollection-0"> |
| <select id=a> |
| <option>1</option> |
| <option>2</option> |
| <option>3</option> |
| <!--Note whitespace is important--> |
| <option>4</option> |
| <option>5</option> |
| </select> |
| |
| <select id=b> |
| <option id=b1>1</option> |
| <option name=b2>2</option> |
| <option id=b3>3</option> |
| <option id=b3>4</option> |
| <option name=b4>5</option> |
| <option name=b4>6</option> |
| <option id=b5>7</option> |
| <option name=b5>8</option> |
| <option id=b6 name=b7>9</option> |
| <option id=b6 name=b6>10</option> |
| <option id=b8 name=b9>11</option> |
| </select> |
| |
| <script> |
| var a; |
| var a_opts; |
| var a_original_innerHTML; |
| var b; |
| var b_opts; |
| |
| setup(function() { |
| a = document.getElementById("a"); |
| a_opts = a.options; |
| a_original_innerHTML = a.innerHTML; |
| a.innerHTML = a_original_innerHTML; |
| b = document.getElementById("b"); |
| b_opts = b.options; |
| b_original_innerHTML = b.innerHTML; |
| b.innerHTML = b_original_innerHTML; |
| }) |
| |
| function assert_values_equals(coll, expected_values, message) { |
| actual = []; |
| for (var i=0; i<coll.length; i++) { |
| actual.push(coll[i].value); |
| } |
| assert_array_equals(actual, expected_values, message); |
| } |
| |
| test(function() { |
| assert_equals(5, a_opts.length); |
| }, "Original length"); |
| |
| test(function() { |
| a.innerHTML = a_original_innerHTML; |
| a_opts.value = "3"; |
| a_opts.length = 5; |
| assert_equals(a_opts.length, 5); |
| assert_equals(a_opts.value, "3"); |
| }, "Setting length to original value has no effect"); |
| |
| test(function() { |
| a.innerHTML = a_original_innerHTML; |
| a.value = 3; |
| a_opts.length = 3; |
| assert_equals(3, a_opts.length, "Correct length"); |
| assert_values_equals(a_opts, ["1","2","3"], "Correct elements remain") |
| assert_equals(a_opts.value, "3", "Correct value set"); |
| assert_equals(a.childNodes.length, 11, "Correct number of child nodes") |
| }, "Setting length to shorter value"); |
| |
| test(function() { |
| a.innerHTML = a_original_innerHTML; |
| a.value = 3; |
| a_opts.length = 7; |
| assert_equals(a_opts.length, 7, "Correct length"); |
| assert_values_equals(a_opts, ["1","2","3","4","5","",""], "Correct elements inserted") |
| assert_equals(a.value, "3", "Correct value set"); |
| assert_equals(a.childNodes.length, 15, "Correct number of child nodes") |
| }, "Setting length to longer value"); |
| |
| test(function() { |
| a.innerHTML = a_original_innerHTML; |
| var newChild = document.createElement("p"); |
| var newOption = document.createElement("option"); |
| newOption.textContent = "6"; |
| newChild.appendChild(newOption); |
| a.appendChild(newChild); |
| a.value = 3; |
| assert_equals(a_opts.length, 5, "Correct length"); |
| assert_values_equals(a_opts, ["1","2","3","4","5"], "Correct elements inserted") |
| assert_equals(a.value, "3", "Correct value set"); |
| }, "Insert <p><option>6</option></p> into <select>"); |
| |
| test(function() { |
| a.innerHTML = a_original_innerHTML; |
| var newChild = document.createElement("select"); |
| var newOption = document.createElement("option"); |
| newOption.textContent = "6"; |
| newChild.appendChild(newOption); |
| a.appendChild(newChild); |
| a.value = 3; |
| assert_equals(a_opts.length, 5, "Correct length"); |
| assert_values_equals(a_opts, ["1","2","3","4","5"], "Correct elements inserted") |
| assert_equals(a.value, "3", "Correct value set"); |
| }, "Insert <select><option>6</option></select> into <select>"); |
| |
| test(function() { |
| //This tests the spec but it is probably wrong here; see bug 12665 |
| a.innerHTML = a_original_innerHTML; |
| var newChild = document.createElement("optgroup"); |
| var newOption = document.createElement("option"); |
| newOption.textContent = "6"; |
| newChild.appendChild(newOption); |
| a.appendChild(newChild); |
| a.value = 3; |
| assert_equals(a_opts.length, 6, "Correct length"); |
| assert_values_equals(a_opts, ["1","2","3","4","5", "6"], "Correct elements inserted") |
| assert_equals(a.value, "3", "Correct value set"); |
| }, "Insert <optgroup><option>6</option></optgroup> into <select>"); |
| |
| test(function() { |
| a.innerHTML = a_original_innerHTML; |
| var newChild = document.createElement("optgroup"); |
| var newChild1 = document.createElement("optgroup"); |
| var newOption = document.createElement("option"); |
| newOption.textContent = "6"; |
| newChild.appendChild(newChild1); |
| newChild1.appendChild(newOption); |
| a.appendChild(newChild); |
| a.value = 3; |
| assert_equals(a_opts.length, 5, "Correct length"); |
| assert_values_equals(a_opts, ["1","2","3","4","5"], "Correct elements inserted") |
| assert_equals(a.value, "3", "Correct value set"); |
| }, "Insert <optgroup><optgroup><option>6</option></optgroup></optgroup> into <select>"); |
| |
| test(function() { |
| assert_equals(b_opts.namedItem("b1").value, "1"); |
| }, "namedItem id attribute"); |
| |
| test(function() { |
| assert_equals(b_opts.namedItem("b2").value, "2"); |
| }, "namedItem name attribute"); |
| |
| test(function() { |
| assert_equals(b_opts.namedItem("c"), null); |
| }, "namedItem doesn't match anything"); |
| |
| test(function() { |
| assert_equals(b_opts.namedItem("b3").value, "3"); |
| }, "namedItem multiple IDs"); |
| |
| test(function() { |
| assert_equals(b_opts.namedItem("b4").value, "5"); |
| }, "namedItem multiple names"); |
| |
| test(function() { |
| assert_equals(b_opts.namedItem("b5").value, "7"); |
| }, "namedItem multiple name and ID"); |
| |
| test(function() { |
| assert_equals(b_opts.namedItem("b6").value, "9"); |
| }, "namedItem multiple name and ID with multiple attributes"); |
| |
| test(function() { |
| assert_equals(b_opts.namedItem("b8").value, "11"); |
| }, "namedItem id attribute multiple attributes one element"); |
| |
| test(function() { |
| assert_equals(b_opts.namedItem("b9").value, "11"); |
| }, "namedItem name attribute multiple attributes one element"); |
| |
| test(function() { |
| assert_true(b_opts[0] instanceof HTMLOptionElement); |
| assert_equals(b_opts[0].innerHTML, "1"); |
| }, "HTMLOptionsCollection [index] method return the item with index"); |
| |
| test(function() { |
| assert_true(b_opts["b2"] instanceof HTMLOptionElement); |
| assert_equals(b_opts["b2"].innerHTML, "2"); |
| }, "HTMLOptionsCollection [name] method return the item with name"); |
| |
| test(function() { |
| assert_true(b_opts.item(0) instanceof HTMLOptionElement); |
| assert_equals(b_opts.item(0).innerHTML, "1"); |
| }, "HTMLOptionsCollection.item(index) method return the item with index"); |
| |
| test(function() { |
| assert_true(b_opts.item("b2") instanceof HTMLOptionElement); |
| assert_equals(b_opts.item("b2").innerHTML, "1"); |
| }, "HTMLOptionsCollection.item(name) method return the item with index 0"); |
| |
| test(function() { |
| var b_opts_length = b_opts.length; |
| b_opts.add(new Option("2", "2")); |
| assert_equals(b_opts[b_opts_length].value, "2"); |
| }, "HTMLOptionsCollection.add method insert HTMLOptionElement Option element"); |
| |
| test(function() { |
| var b_opts_length = b_opts.length; |
| b_opts.remove(0); |
| assert_equals(b_opts.length, b_opts_length - 1); |
| }, "HTMLOptionsCollection.remove method remove Option element by index"); |
| |
| test(function() { |
| var add = document.createElement("p"); |
| assert_throws(new TypeError(), function() {b_opts.add(add);}); |
| }, "Add non-option to collection"); |
| |
| </script> |
| <div id=log></div> |
