test_bug596511.html (6729B)
1 <!DOCTYPE HTML> 2 <html> 3 <!-- 4 https://bugzilla.mozilla.org/show_bug.cgi?id=596511 5 --> 6 <head> 7 <title>Test for Bug 596511</title> 8 <script src="/tests/SimpleTest/SimpleTest.js"></script> 9 <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/> 10 <style> 11 select:valid { background-color: green; } 12 select:invalid { background-color: red; } 13 </style> 14 </head> 15 <body> 16 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=596511">Mozilla Bug 596511</a> 17 <p id="display"></p> 18 <div id="content" style="display: none"> 19 </div> 20 <pre id="test"> 21 <script> 22 23 /** Test for Bug 596511 */ 24 25 function checkNotSufferingFromBeingMissing(element, aTodo) 26 { 27 if (aTodo) { 28 ok = todo; 29 is = todo_is; 30 } 31 32 ok(!element.validity.valueMissing, 33 "Element should not suffer from value missing"); 34 ok(element.validity.valid, "Element should be valid"); 35 ok(element.checkValidity(), "Element should be valid"); 36 37 is(element.validationMessage, "", 38 "Validation message should be the empty string"); 39 40 ok(element.matches(":valid"), ":valid pseudo-class should apply"); 41 is(window.getComputedStyle(element).getPropertyValue('background-color'), 42 "rgb(0, 128, 0)", ":valid pseudo-class should apply"); 43 44 if (aTodo) { 45 ok = SimpleTest.ok; 46 is = SimpleTest.is; 47 } 48 } 49 50 function checkSufferingFromBeingMissing(element, aTodo) 51 { 52 if (aTodo) { 53 ok = todo; 54 is = todo_is; 55 } 56 57 ok(element.validity.valueMissing, "Element should suffer from value missing"); 58 ok(!element.validity.valid, "Element should not be valid"); 59 ok(!element.checkValidity(), "Element should not be valid"); 60 61 is(element.validationMessage, "Please select an item in the list.", 62 "Validation message is wrong"); 63 64 is(window.getComputedStyle(element).getPropertyValue('background-color'), 65 "rgb(255, 0, 0)", ":invalid pseudo-class should apply"); 66 67 if (aTodo) { 68 ok = SimpleTest.ok; 69 is = SimpleTest.is; 70 } 71 } 72 73 function checkRequiredAttribute(element) 74 { 75 ok('required' in element, "select should have a required attribute"); 76 77 ok(!element.required, "select required attribute should be disabled"); 78 is(element.getAttribute('required'), null, 79 "select required attribute should be disabled"); 80 81 element.required = true; 82 ok(element.required, "select required attribute should be enabled"); 83 isnot(element.getAttribute('required'), null, 84 "select required attribute should be enabled"); 85 86 element.removeAttribute('required'); 87 element.setAttribute('required', ''); 88 ok(element.required, "select required attribute should be enabled"); 89 isnot(element.getAttribute('required'), null, 90 "select required attribute should be enabled"); 91 92 element.removeAttribute('required'); 93 ok(!element.required, "select required attribute should be disabled"); 94 is(element.getAttribute('required'), null, 95 "select required attribute should be disabled"); 96 } 97 98 function checkRequiredAndOptionalSelectors(element) 99 { 100 is(document.querySelector("select:optional"), element, 101 "select should be optional"); 102 is(document.querySelector("select:required"), null, 103 "select shouldn't be required"); 104 105 element.required = true; 106 107 is(document.querySelector("select:optional"), null, 108 "select shouldn't be optional"); 109 is(document.querySelector("select:required"), element, 110 "select should be required"); 111 112 element.required = false; 113 } 114 115 function checkInvalidWhenValueMissing(element) 116 { 117 checkNotSufferingFromBeingMissing(select); 118 119 element.required = true; 120 checkSufferingFromBeingMissing(select); 121 122 /** 123 * Non-multiple and size=1. 124 */ 125 select.appendChild(new Option()); 126 checkSufferingFromBeingMissing(select); 127 128 // When removing the required attribute, element should not be invalid. 129 element.required = false; 130 checkNotSufferingFromBeingMissing(select); 131 132 element.required = true; 133 select.options[0].textContent = "foo"; 134 // TODO: having that working would require us to add a mutation observer on 135 // the select element. 136 checkNotSufferingFromBeingMissing(select, true); 137 138 select.remove(0); 139 checkSufferingFromBeingMissing(select); 140 141 select.add(new Option("foo", "foo"), null); 142 checkNotSufferingFromBeingMissing(select); 143 144 select.add(new Option(), null); 145 checkNotSufferingFromBeingMissing(select); 146 147 // The placeholder label can only be the first option, so a selected empty second option is valid 148 select.options[1].selected = true; 149 checkNotSufferingFromBeingMissing(select); 150 151 select.selectedIndex = 0; 152 checkNotSufferingFromBeingMissing(select); 153 154 select.add(select.options[0]); 155 select.selectedIndex = 0; 156 checkSufferingFromBeingMissing(select); 157 158 select.remove(0); 159 checkNotSufferingFromBeingMissing(select); 160 161 select.options[0].disabled = true; 162 // TODO: having that working would require us to add a mutation observer on 163 // the select element. 164 checkSufferingFromBeingMissing(select, true); 165 166 select.options[0].disabled = false 167 select.remove(0); 168 checkSufferingFromBeingMissing(select); 169 170 var option = new Option("foo", "foo"); 171 option.disabled = true; 172 select.add(option, null); 173 select.add(new Option("bar"), null); 174 option.selected = true; 175 checkNotSufferingFromBeingMissing(select); 176 177 select.remove(0); 178 select.remove(0); 179 180 /** 181 * Non-multiple and size > 1. 182 * Everything should be the same except moving the selection. 183 */ 184 select.multiple = false; 185 select.size = 4; 186 checkSufferingFromBeingMissing(select); 187 188 // Setting defaultSelected to true should not make the option selected 189 select.add(new Option("", "", true), null); 190 checkSufferingFromBeingMissing(select); 191 select.remove(0); 192 193 select.add(new Option("", "", true, true), null); 194 checkNotSufferingFromBeingMissing(select); 195 196 select.add(new Option("foo", "foo"), null); 197 select.remove(0); 198 checkSufferingFromBeingMissing(select); 199 200 select.options[0].selected = true; 201 checkNotSufferingFromBeingMissing(select); 202 203 select.remove(0); 204 205 /** 206 * Multiple, any size. 207 * We can select more than one element and at least needs a value. 208 */ 209 select.multiple = true; 210 select.size = 4; 211 checkSufferingFromBeingMissing(select); 212 213 select.add(new Option("", "", true), null); 214 checkSufferingFromBeingMissing(select); 215 216 select.add(new Option("", "", true), null); 217 checkSufferingFromBeingMissing(select); 218 219 select.add(new Option("foo"), null); 220 checkSufferingFromBeingMissing(select); 221 222 select.options[2].selected = true; 223 checkNotSufferingFromBeingMissing(select); 224 } 225 226 var select = document.createElement("select"); 227 var content = document.getElementById('content'); 228 content.appendChild(select); 229 230 checkRequiredAttribute(select); 231 checkRequiredAndOptionalSelectors(select); 232 checkInvalidWhenValueMissing(select); 233 234 </script> 235 </pre> 236 </body> 237 </html>