range.html (8647B)
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <title>Input Range</title> 6 <meta name=viewport content="width=device-width, maximum-scale=1.0, user-scalable=no" /> 7 <link rel="author" title="Fabrice Clari" href="mailto:f.clari@inno-group.com"> 8 <link rel="author" title="Dimitri Bocquet" href="mailto:Dimitri.Bocquet@mosquito-fp7.eu"> 9 <link rel="author" title="Tomoyuki SHIMIZU" href="mailto:tomoyuki.labs@gmail.com"> 10 <link rel="help" href="https://html.spec.whatwg.org/multipage/#the-input-element"> 11 <link rel="help" href="https://html.spec.whatwg.org/multipage/#dom-input-type"> 12 <link rel="help" href="https://html.spec.whatwg.org/multipage/#dom-input-min"> 13 <link rel="help" href="https://html.spec.whatwg.org/multipage/#dom-input-max"> 14 <link rel="help" href="https://html.spec.whatwg.org/multipage/#range-state-(type=range)"> 15 <link rel="help" href="https://html.spec.whatwg.org/multipage/#dom-input-stepup"> 16 <link rel="help" href="https://html.spec.whatwg.org/multipage/#dom-input-stepdown"> 17 <link rel="help" href="https://html.spec.whatwg.org/multipage/#best-representation-of-the-number-as-a-floating-point-number"> 18 <script src="/resources/testharness.js"></script> 19 <script src="/resources/testharnessreport.js"></script> 20 </head> 21 22 <body> 23 24 25 <h1>Input Range</h1> 26 <div style="display:none"> 27 <input type="range" id="range_basic" min=0 max=5 /> 28 <input type="range" id="value_smaller_than_min" min=0 max=5 value=-10 /> 29 <input type="range" id="value_larger_than_max" min=0 max=5 value=7 /> 30 <input type="range" id="empty_attributes" /> 31 <input type="range" id="value_not_specified" min=2 max=6 /> 32 <input type="range" id="control_step_mismatch" min=0 max=7 step=2 /> 33 <input type="range" id="max_smaller_than_min" min=2 max=-3 /> 34 <input type="range" id="default_step_scale_factor_1" min=5 max=12.6 value=6.7 /> 35 <input type="range" id="default_step_scale_factor_2" min=5.3 max=12 value=6.7 /> 36 <input type="range" id="float_step_scale_factor" min=5.3 max=12 step=0.5 value=6.7 /> 37 <input type="range" id="stepup" min=3 max=14 value=6 step=3 /> 38 <input type="range" id="stepdown" min=3 max=11 value=9 step=3 /> 39 <input type="range" id="stepup_beyond_max" min=3 max=14 value=9 step=3 /> 40 <input type="range" id="stepdown_beyond_min" min=3 max=11 value=6 step=3 /> 41 <input type="range" id="illegal_min_and_max" min="ab" max="f" /> 42 <input type="range" id="illegal_value_and_step" min=0 max=5 value="ppp" step="xyz" /> 43 <input type="range" id="should_skip_whitespace" value=" 123"/> 44 <input type="range" id="exponent_value1" value=""/> 45 <input type="range" id="exponent_value2" value=""/> 46 </div> 47 48 <div id="log"> 49 </div> 50 51 <script type="text/javascript"> 52 53 test( 54 function() { 55 assert_equals(document.getElementById('range_basic').type, "range"); 56 }, 57 "range type support on input element" 58 ); 59 60 test(function() { 61 assert_equals(getComputedStyle(document.getElementById('range_basic')).overflow, "visible"); 62 }, "range overflow styles"); 63 64 test( 65 function() { 66 assert_equals(document.getElementById('range_basic').min, "0") 67 }, 68 "min attribute support on input element" 69 ); 70 71 test( 72 function() { 73 assert_equals(document.getElementById('range_basic').max, "5") 74 }, 75 "max attribute support on input element" 76 ); 77 78 test( 79 function() { 80 assert_equals(document.getElementById('illegal_min_and_max').min, "ab") 81 }, 82 "Illegal value of min attribute" 83 ); 84 85 test( 86 function() { 87 assert_equals(document.getElementById('illegal_min_and_max').max, "f") 88 }, 89 "Illegal value of max attribute" 90 ); 91 92 test( 93 function() { 94 assert_equals(document.getElementById('illegal_value_and_step').value, "3") 95 }, 96 "Converting an illegal string to the default value" 97 ); 98 99 test( 100 function() { 101 assert_equals(document.getElementById('illegal_value_and_step').step, "xyz") 102 }, 103 "Illegal value of step attribute" 104 ); 105 106 test( 107 function() { 108 assert_equals(document.getElementById('value_smaller_than_min').value, "0") 109 }, 110 "the value is set to min when a smaller value than min attribute is given" 111 ); 112 113 test( 114 function() { 115 assert_equals(document.getElementById('value_larger_than_max').value, "5") 116 }, 117 "the value is set to max when a larger value than max attribute is given" 118 ); 119 120 test( 121 function() { 122 assert_equals(document.getElementById('empty_attributes').min, "") 123 }, 124 "default value of min attribute in input type=range" 125 ); 126 127 test( 128 function() { 129 assert_equals(document.getElementById('empty_attributes').max, "") 130 }, 131 "default value of max attribute in input type=range" 132 ); 133 134 test( 135 function() { 136 assert_equals(document.getElementById('value_not_specified').value, "4") 137 }, 138 "default value when min and max attributes are given (= min plus half the difference between min and max)" 139 ); 140 141 test( 142 function() { 143 assert_equals(document.getElementById('control_step_mismatch').value, "4") 144 }, 145 "default value with step control when both min and max attributes are given" 146 ); 147 148 // Chrome would result in different value out of the range between min and max. Why? 149 test( 150 function() { 151 assert_equals(document.getElementById('max_smaller_than_min').value, "2") 152 }, 153 "default value when both min and max attributes are given, while min > max" 154 ); 155 156 test( 157 function() { 158 assert_equals(document.getElementById('default_step_scale_factor_1').value, "7") 159 }, 160 "The default step scale factor is 1, unless min attribute has non-integer value" 161 ); 162 163 test( 164 function() { 165 assert_equals(document.getElementById('default_step_scale_factor_2').value, "6.3") 166 }, 167 "Step scale factor behavior when min attribute has integer value but max attribute is non-integer " 168 ); 169 170 test( 171 function() { 172 assert_equals(document.getElementById('float_step_scale_factor').value, "6.8") 173 }, 174 "Solving the step mismatch" 175 ); 176 177 // Firefox Nightly (24.0a1) would result in the possible maximum value in this range... (i.e. 12) 178 test( 179 function() { 180 var e = document.getElementById('stepup'); 181 e.stepUp(); 182 assert_equals(e.value, "9") 183 }, 184 "Performing stepUp()" 185 ); 186 187 // Firefox Nightly (24.0a1) would result in the possible minimum value in this range... (i.e. 3) 188 test( 189 function() { 190 var e = document.getElementById('stepdown'); 191 e.stepDown(); 192 assert_equals(e.value, "6") 193 }, 194 "Performing stepDown()" 195 ); 196 197 // Chrome and Opera would throw DOM Exception 11 (InvalidStateError) 198 // Firefox Nightly gives the correct result 199 test( 200 function() { 201 var e = document.getElementById('stepup_beyond_max'); 202 e.stepUp(2); 203 assert_equals(e.value, "12") 204 }, 205 "Performing stepUp() beyond the value of the max attribute" 206 ); 207 208 // Chrome and Opera would throw DOM Exception 11 (InvalidStateError) 209 // Firefox Nightly gives the correct result 210 test( 211 function() { 212 var e = document.getElementById('stepdown_beyond_min'); 213 e.stepDown(2); 214 assert_equals(e.value, "3") 215 }, "Performing stepDown() beyond the value of the min attribute" 216 ); 217 218 test( 219 function() { 220 var e = document.getElementById('should_skip_whitespace'); 221 assert_equals(e.value, "50") 222 }, "Input should be reset to the default value when value attribute has whitespace" 223 ); 224 225 test( 226 function() { 227 var e = document.getElementById('exponent_value1'); 228 e.value = 1e2; 229 assert_equals(e.value, "100") 230 }, "Multiply value by ten raised to the exponentth power with `e`" 231 ); 232 233 test( 234 function() { 235 var e = document.getElementById('exponent_value2'); 236 e.value = 1E2; 237 assert_equals(e.value, "100") 238 }, "Multiply value by ten raised to the exponentth power with `E`" 239 ); 240 241 </script> 242 243 </body> 244 245 </html>