input-stepup.html (5135B)
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <title>StepUp() method of HTMLInputElement</title> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <link rel="author" title="Simon Wülker" href="mailto:simon.wuelker@arcor.de"> 8 <link rel="help" href="https://html.spec.whatwg.org/multipage/input.html#the-step-attribute"> 9 </head> 10 <body> 11 <script> 12 const INPUT_TYPES_THAT_CANT_STEP = [ 13 "button", 14 "checkbox", 15 "color", 16 "email", 17 "file", 18 "hidden", 19 "image", 20 "password", 21 "radio", 22 "reset", 23 "search", 24 "submit", 25 "tel", 26 "text", 27 "url" 28 ]; 29 const INPUT_TYPES_THAT_CAN_STEP = [ 30 "date", 31 "datetime-local", 32 "month", 33 "number", 34 "range", 35 "time", 36 "week", 37 ]; 38 39 for (input_type of INPUT_TYPES_THAT_CANT_STEP) { 40 test(() => { 41 let input = document.createElement("input"); 42 input.setAttribute("type", input_type); 43 assert_throws_dom("InvalidStateError", () => { 44 input.stepUp(); 45 }); 46 }, "Calling stepUp on input type=" + input_type + " should throw a DOMException") 47 } 48 49 test(() => { 50 let input = document.createElement("input"); 51 input.setAttribute("type", "number"); 52 input.setAttribute("step", "any"); 53 assert_throws_dom("InvalidStateError", () => { 54 input.stepUp(); 55 }); 56 }, "Calling stepUp when the step attribute is \"any\" should throw a DOMException") 57 58 const DEFAULT_STEP_SIZES = { 59 "date": 1, 60 "datetime-local": 60, 61 "month": 1, 62 "number": 1, 63 "time": 60, 64 "range": 1, 65 "week": 1, 66 }; 67 const STEP_SCALE_FACTORS = { 68 "date": 86400000, 69 "datetime-local": 1000, 70 "month": 1, 71 "number": 1, 72 "range": 1, 73 "time": 1000, 74 "week": 604800000, 75 }; 76 for (const input_type of INPUT_TYPES_THAT_CAN_STEP) { 77 const default_step_size = DEFAULT_STEP_SIZES[input_type]; 78 const step_scale_factor = STEP_SCALE_FACTORS[input_type]; 79 80 // Some input types (like "week") can't be reset with 81 // valueAsNumber=0 82 test(() => { 83 let input = document.createElement("input"); 84 input.setAttribute("type", input_type); 85 input.stepUp(); 86 87 const previous = input.valueAsNumber; 88 input.stepUp(); 89 assert_equals(input.valueAsNumber, previous + default_step_size * step_scale_factor); 90 }, "Step delta from stepUp on input type=" + input_type + " with no step attribute"); 91 92 for (step of ["0", "-2", "bogus"]) { 93 test(() => { 94 let input = document.createElement("input"); 95 input.setAttribute("type", input_type); 96 input.setAttribute("step", step); 97 input.stepUp(); 98 99 const previous = input.valueAsNumber; 100 input.stepUp(); 101 assert_equals(input.valueAsNumber, previous + default_step_size * step_scale_factor); 102 }, "Step delta from stepUp on input type=" + input_type + " with step=" + step); 103 } 104 105 test(() => { 106 let input = document.createElement("input"); 107 input.setAttribute("type", input_type); 108 input.setAttribute("step", "2"); 109 input.stepUp(); 110 111 const previous = input.valueAsNumber; 112 input.stepUp(); 113 assert_equals(input.valueAsNumber, previous + 2 * step_scale_factor); 114 }, "Step delta from stepUp on input type=" + input_type + " with step=2"); 115 } 116 117 test(() => { 118 let input = document.createElement("input"); 119 input.setAttribute("type", "number"); 120 input.valueAsNumber = 0; 121 input.min = 10; 122 input.max = 5; 123 input.stepUp(); 124 assert_equals(input.valueAsNumber, 0); 125 }, "stepUp should do nothing if the input minimum is larger than the input maximum") 126 127 test(() => { 128 let input = document.createElement("input"); 129 input.setAttribute("type", "number"); 130 input.valueAsNumber = 0; 131 input.step = 3; 132 input.max = 7; 133 input.stepUp(3); 134 assert_equals(input.valueAsNumber, 6); 135 }, "stepUp should clamp to the input maximum"); 136 </script> 137 </body> 138 139 </html>