test_input_number_rounding.html (4396B)
1 <!DOCTYPE HTML> 2 <html> 3 <!-- 4 https://bugzilla.mozilla.org/show_bug.cgi?id=783607 5 --> 6 <head> 7 <title>Test rounding behaviour for <input type='number'></title> 8 <script src="/tests/SimpleTest/SimpleTest.js"></script> 9 <script src="/tests/SimpleTest/EventUtils.js"></script> 10 <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/> 11 <meta charset="UTF-8"> 12 </head> 13 <body> 14 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=783607">Mozilla Bug 783607</a> 15 <p id="display"></p> 16 <div id="content"> 17 <input id=number type=number value=0 step=0.01 max=1> 18 </div> 19 <pre id="test"> 20 <script type="application/javascript"> 21 22 /** 23 * Test for Bug 783607. 24 * This test checks that when <input type=number> has fractional step values, 25 * the values that a content author will see in their script will not have 26 * ugly rounding errors. 27 */ 28 SimpleTest.waitForExplicitFinish(); 29 SimpleTest.waitForFocus(function() { 30 test(); 31 SimpleTest.finish(); 32 }); 33 34 /** 35 * We can _NOT_ generate these values by looping and simply incrementing a 36 * variable by 0.01 and stringifying it, since we'll end up with strings like 37 * "0.060000000000000005" due to the inability of binary floating point numbers 38 * to accurately represent decimal values. 39 */ 40 var stepVals = [ 41 "0", "0.01", "0.02", "0.03", "0.04", "0.05", "0.06", "0.07", "0.08", "0.09", 42 "0.1", "0.11", "0.12", "0.13", "0.14", "0.15", "0.16", "0.17", "0.18", "0.19", 43 "0.2", "0.21", "0.22", "0.23", "0.24", "0.25", "0.26", "0.27", "0.28", "0.29", 44 "0.3", "0.31", "0.32", "0.33", "0.34", "0.35", "0.36", "0.37", "0.38", "0.39", 45 "0.4", "0.41", "0.42", "0.43", "0.44", "0.45", "0.46", "0.47", "0.48", "0.49", 46 "0.5", "0.51", "0.52", "0.53", "0.54", "0.55", "0.56", "0.57", "0.58", "0.59", 47 "0.6", "0.61", "0.62", "0.63", "0.64", "0.65", "0.66", "0.67", "0.68", "0.69", 48 "0.7", "0.71", "0.72", "0.73", "0.74", "0.75", "0.76", "0.77", "0.78", "0.79", 49 "0.8", "0.81", "0.82", "0.83", "0.84", "0.85", "0.86", "0.87", "0.88", "0.89", 50 "0.9", "0.91", "0.92", "0.93", "0.94", "0.95", "0.96", "0.97", "0.98", "0.99", 51 "1" 52 ]; 53 54 var pgUpDnVals = [ 55 "0", "0.1", "0.2", "0.3", "0.4", "0.5", "0.6", "0.7", "0.8", "0.9", "1" 56 ]; 57 58 function test() { 59 var elem = document.getElementById("number"); 60 61 elem.focus(); 62 63 /** 64 * TODO: 65 * When <input type='number'> widget will have a widge we should test PAGE_UP, 66 * PAGE_DOWN, UP and DOWN keys. For the moment, there is no widget so those 67 * keys do not have any effect. 68 * The tests using those keys as marked as todo_is() hoping that at least part 69 * of them will fail when the widget will be implemented. 70 */ 71 72 /* No other implementations implement this, so we don't either, for now. 73 Seems like it might be nice though. 74 75 for (var i = 1; i < pgUpDnVals.length; ++i) { 76 synthesizeKey("KEY_PageUp"); 77 todo_is(elem.value, pgUpDnVals[i], "Test KEY_PageUp"); 78 is(elem.validity.valid, true, "Check element is valid for value " + pgUpDnVals[i]); 79 } 80 81 for (var i = pgUpDnVals.length - 2; i >= 0; --i) { 82 synthesizeKey("KEY_PageDown"); 83 // TODO: this condition is there because the todo_is() below would pass otherwise. 84 if (stepVals[i] == 0) { continue; } 85 todo_is(elem.value, pgUpDnVals[i], "Test KEY_PageDown"); 86 is(elem.validity.valid, true, "Check element is valid for value " + pgUpDnVals[i]); 87 } 88 */ 89 90 for (var i = 1; i < stepVals.length; ++i) { 91 synthesizeKey("KEY_ArrowUp"); 92 is(elem.value, stepVals[i], "Test KEY_ArrowUp"); 93 is(elem.validity.valid, true, "Check element is valid for value " + stepVals[i]); 94 } 95 96 for (var i = stepVals.length - 2; i >= 0; --i) { 97 synthesizeKey("KEY_ArrowDown"); 98 // TODO: this condition is there because the todo_is() below would pass otherwise. 99 if (stepVals[i] == 0) { continue; } 100 is(elem.value, stepVals[i], "Test KEY_ArrowDown"); 101 is(elem.validity.valid, true, "Check element is valid for value " + stepVals[i]); 102 } 103 104 for (var i = 1; i < stepVals.length; ++i) { 105 elem.stepUp(); 106 is(elem.value, stepVals[i], "Test stepUp()"); 107 is(elem.validity.valid, true, "Check element is valid for value " + stepVals[i]); 108 } 109 110 for (var i = stepVals.length - 2; i >= 0; --i) { 111 elem.stepDown(); 112 is(elem.value, stepVals[i], "Test stepDown()"); 113 is(elem.validity.valid, true, "Check element is valid for value " + stepVals[i]); 114 } 115 } 116 117 </script> 118 </pre> 119 </body> 120 </html>