| OLD | NEW |
| (Empty) | |
| 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/#htmloptionscollec
tion-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 in
serted") |
| 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, 5, "Correct length"); |
| 96 assert_values_equals(a_opts, ["1","2","3","4","5"], "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 ins
erted") |
| 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 <se
lect>"); |
| 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 var add = document.createElement("p"); |
| 180 assert_throws(new TypeError(), function() {b_opts.add(add);}); |
| 181 }, "Add non-option to collection"); |
| 182 |
| 183 </script> |
| 184 <div id=log></div> |
| OLD | NEW |