test_meter_element.html (9162B)
1 <!DOCTYPE HTML> 2 <html> 3 <!-- 4 https://bugzilla.mozilla.org/show_bug.cgi?id=657938 5 --> 6 <head> 7 <title>Test for <meter></title> 8 <script src="/tests/SimpleTest/SimpleTest.js"></script> 9 <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/> 10 </head> 11 <body> 12 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=657938">Mozilla Bug 657938</a> 13 <p id="display"></p> 14 <iframe name="submit_frame" style="visibility: hidden;"></iframe> 15 <div id="content" style="visibility: hidden;"> 16 <form id='f' method='get' target='submit_frame' action='foo'> 17 <meter id='m' value=0.5></meter> 18 </form> 19 </div> 20 <pre id="test"> 21 <script type="application/javascript"> 22 23 /** Test for <meter> */ 24 25 function checkFormIDLAttribute(aElement) 26 { 27 is('form' in aElement, false, "<meter> shouldn't have a form attribute"); 28 } 29 30 function checkAttribute(aElement, aAttribute, aNewValue, aExpectedValueForIDL) 31 { 32 var expectedValueForIDL = aNewValue; 33 var expectedValueForContent = String(aNewValue); 34 35 if (aExpectedValueForIDL !== undefined) { 36 expectedValueForIDL = aExpectedValueForIDL; 37 } 38 39 if (aNewValue != null) { 40 aElement.setAttribute(aAttribute, aNewValue); 41 is(aElement.getAttribute(aAttribute), expectedValueForContent, 42 aAttribute + " content attribute should be " + expectedValueForContent); 43 is(aElement[aAttribute], expectedValueForIDL, 44 aAttribute + " IDL attribute should be " + expectedValueForIDL); 45 46 if (parseFloat(aNewValue) == aNewValue) { 47 aElement[aAttribute] = aNewValue; 48 is(aElement.getAttribute(aAttribute), expectedValueForContent, 49 aAttribute + " content attribute should be " + expectedValueForContent); 50 is(aElement[aAttribute], parseFloat(expectedValueForIDL), 51 aAttribute + " IDL attribute should be " + parseFloat(expectedValueForIDL)); 52 } 53 } else { 54 aElement.removeAttribute(aAttribute); 55 is(aElement.getAttribute(aAttribute), null, 56 aAttribute + " content attribute should be null"); 57 is(aElement[aAttribute], expectedValueForIDL, 58 aAttribute + " IDL attribute should be " + expectedValueForIDL); 59 } 60 } 61 62 function checkValueAttribute() 63 { 64 var tests = [ 65 // value has to be a valid float, its default value is 0.0 otherwise. 66 [ null, 0.0 ], 67 [ 'foo', 0.0 ], 68 // If value < 0.0, 0.0 is used instead. 69 [ -1.0, 0.0 ], 70 // If value >= max, max is used instead (max default value is 1.0). 71 [ 2.0, 1.0 ], 72 [ 1.0, 0.5, 0.5 ], 73 [ 10.0, 5.0, 5.0 ], 74 [ 13.37, 13.37, 42.0 ], 75 // If value <= min, min is used instead (min default value is 0.0). 76 [ 0.5, 1.0, 10.0 ,1.0 ], 77 [ 10.0, 13.37, 42.0 , 13.37], 78 // Regular reflection. 79 [ 0.0 ], 80 [ 0.5 ], 81 [ 1.0 ], 82 // Check double-precision value. 83 [ 0.234567898765432 ], 84 ]; 85 86 var element = document.createElement('meter'); 87 88 for (var test of tests) { 89 if (test[2]) { 90 element.setAttribute('max', test[2]); 91 } 92 93 if (test[3]) { 94 element.setAttribute('min', test[3]); 95 } 96 97 checkAttribute(element, 'value', test[0], test[1]); 98 99 element.removeAttribute('max'); 100 element.removeAttribute('min'); 101 } 102 } 103 104 function checkMinAttribute() 105 { 106 var tests = [ 107 // min default value is 0.0. 108 [ null, 0.0 ], 109 [ 'foo', 0.0 ], 110 // Regular reflection. 111 [ 0.5 ], 112 [ 1.0 ], 113 [ 2.0 ], 114 // Check double-precision value. 115 [ 0.234567898765432 ], 116 ]; 117 118 var element = document.createElement('meter'); 119 120 for (var test of tests) { 121 checkAttribute(element, 'min', test[0], test[1]); 122 } 123 } 124 125 function checkMaxAttribute() 126 { 127 var tests = [ 128 // max default value is 1.0. 129 [ null, 1.0 ], 130 [ 'foo', 1.0 ], 131 // If value <= min, min is used instead. 132 [ -1.0, 0.0 ], 133 [ 0.0, 0.5, 0.5 ], 134 [ 10.0, 15.0, 15.0 ], 135 [ 42, 42, 13.37 ], 136 // Regular reflection. 137 [ 0.5 ], 138 [ 1.0 ], 139 [ 2.0 ], 140 // Check double-precision value. 141 [ 0.234567898765432 ], 142 ]; 143 144 var element = document.createElement('meter'); 145 146 for (var test of tests) { 147 if (test[2]) { 148 element.setAttribute('min', test[2]); 149 } 150 151 checkAttribute(element, 'max', test[0], test[1]); 152 153 element.removeAttribute('min'); 154 } 155 } 156 157 function checkLowAttribute() 158 { 159 var tests = [ 160 // low default value is min (min default value is 0.0). 161 [ null, 0.0 ], 162 [ 'foo', 0.0 ], 163 [ 'foo', 1.0, 1.0], 164 // If low <= min, min is used instead. 165 [ -1.0, 0.0 ], 166 [ 0.0, 0.5, 0.5 ], 167 [ 10.0, 15.0, 15.0, 42.0 ], 168 [ 42.0, 42.0, 13.37, 100.0 ], 169 // If low >= max, max is used instead. 170 [ 2.0, 1.0 ], 171 [ 10.0, 5.0 , 0.5, 5.0 ], 172 [ 13.37, 13.37, 0.0, 42.0 ], 173 // Regular reflection. 174 [ 0.0 ], 175 [ 0.5 ], 176 [ 1.0 ], 177 // Check double-precision value. 178 [ 0.234567898765432 ], 179 ]; 180 181 var element = document.createElement('meter'); 182 183 for (var test of tests) { 184 if (test[2]) { 185 element.setAttribute('min', test[2]); 186 } 187 if (test[3]) { 188 element.setAttribute('max', test[3]); 189 } 190 191 checkAttribute(element, 'low', test[0], test[1]); 192 193 element.removeAttribute('min'); 194 element.removeAttribute('max'); 195 } 196 } 197 198 function checkHighAttribute() 199 { 200 var tests = [ 201 // high default value is max (max default value is 1.0). 202 [ null, 1.0 ], 203 [ 'foo', 1.0 ], 204 [ 'foo', 42.0, 0.0, 42.0], 205 // If high <= min, min is used instead. 206 [ -1.0, 0.0 ], 207 [ 0.0, 0.5, 0.5 ], 208 [ 10.0, 15.0, 15.0, 42.0 ], 209 [ 42.0, 42.0, 13.37, 100.0 ], 210 // If high >= max, max is used instead. 211 [ 2.0, 1.0 ], 212 [ 10.0, 5.0 , 0.5, 5.0 ], 213 [ 13.37, 13.37, 0.0, 42.0 ], 214 // Regular reflection. 215 [ 0.0 ], 216 [ 0.5 ], 217 [ 1.0 ], 218 // Check double-precision value. 219 [ 0.234567898765432 ], 220 ]; 221 222 var element = document.createElement('meter'); 223 224 for (var test of tests) { 225 if (test[2]) { 226 element.setAttribute('min', test[2]); 227 } 228 if (test[3]) { 229 element.setAttribute('max', test[3]); 230 } 231 232 checkAttribute(element, 'high', test[0], test[1]); 233 234 element.removeAttribute('min'); 235 element.removeAttribute('max'); 236 } 237 } 238 239 function checkOptimumAttribute() 240 { 241 var tests = [ 242 // opt default value is (max-min)/2 (thus default value is 0.5). 243 [ null, 0.5 ], 244 [ 'foo', 0.5 ], 245 [ 'foo', 2.0, 1.0, 3.0], 246 // If opt <= min, min is used instead. 247 [ -1.0, 0.0 ], 248 [ 0.0, 0.5, 0.5 ], 249 [ 10.0, 15.0, 15.0, 42.0 ], 250 [ 42.0, 42.0, 13.37, 100.0 ], 251 // If opt >= max, max is used instead. 252 [ 2.0, 1.0 ], 253 [ 10.0, 5.0 , 0.5, 5.0 ], 254 [ 13.37, 13.37, 0.0, 42.0 ], 255 // Regular reflection. 256 [ 0.0 ], 257 [ 0.5 ], 258 [ 1.0 ], 259 // Check double-precision value. 260 [ 0.234567898765432 ], 261 ]; 262 263 var element = document.createElement('meter'); 264 265 for (var test of tests) { 266 if (test[2]) { 267 element.setAttribute('min', test[2]); 268 } 269 if (test[3]) { 270 element.setAttribute('max', test[3]); 271 } 272 273 checkAttribute(element, 'optimum', test[0], test[1]); 274 275 element.removeAttribute('min'); 276 element.removeAttribute('max'); 277 } 278 } 279 280 function checkFormListedElement(aElement) 281 { 282 is(document.forms[0].elements.length, 0, "the form should have no element"); 283 } 284 285 function checkLabelable(aElement) 286 { 287 var content = document.getElementById('content'); 288 var label = document.createElement('label'); 289 290 content.appendChild(label); 291 label.appendChild(aElement); 292 is(label.control, aElement, "meter should be labelable"); 293 294 // Cleaning-up. 295 content.removeChild(label); 296 content.appendChild(aElement); 297 } 298 299 function checkNotResetableAndFormSubmission(aElement) 300 { 301 // Creating an input element to check the submission worked. 302 var form = document.forms[0]; 303 var input = document.createElement('input'); 304 305 input.name = 'a'; 306 input.value = 'tulip'; 307 form.appendChild(input); 308 309 // Setting values. 310 aElement.value = 42.0; 311 aElement.max = 100.0; 312 313 document.getElementsByName('submit_frame')[0].addEventListener("load", function() { 314 is(frames.submit_frame.location.href, 315 `${location.origin}/tests/dom/html/test/forms/foo?a=tulip`, 316 "The meter element value should not be submitted"); 317 318 checkNotResetable(); 319 }, {once: true}); 320 321 form.submit(); 322 } 323 324 function checkNotResetable() 325 { 326 // Try to reset the form. 327 var form = document.forms[0]; 328 var element = document.getElementById('m'); 329 330 element.value = 3.0; 331 element.max = 42.0; 332 333 form.reset(); 334 335 SimpleTest.executeSoon(function() { 336 is(element.value, 3.0, "meter.value should not have changed"); 337 is(element.max, 42.0, "meter.max should not have changed"); 338 339 SimpleTest.finish(); 340 }); 341 } 342 343 SimpleTest.waitForExplicitFinish(); 344 345 var m = document.getElementById('m'); 346 347 ok(m instanceof HTMLMeterElement, 348 "The meter element should be instance of HTMLMeterElement"); 349 is(m.constructor, HTMLMeterElement, 350 "The meter element constructor should be HTMLMeterElement"); 351 352 // There is no such attribute. 353 checkFormIDLAttribute(m); 354 355 checkValueAttribute(); 356 357 checkMinAttribute(); 358 359 checkMaxAttribute(); 360 361 checkLowAttribute(); 362 363 checkHighAttribute(); 364 365 checkOptimumAttribute(); 366 367 checkFormListedElement(m); 368 369 checkLabelable(m); 370 371 checkNotResetableAndFormSubmission(m); 372 373 </script> 374 </pre> 375 </body> 376 </html>