OLD | NEW |
(Empty) | |
| 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-sca
lable=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@mosq
uito-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-ele
ment"> |
| 11 <script src="../../../../../../resources/testharness.js"></script> |
| 12 <script src="../../../../../../resources/testharnessreport.js"></script> |
| 13 </head> |
| 14 |
| 15 <body> |
| 16 |
| 17 |
| 18 <h1>Input Range</h1> |
| 19 <div style="display:none"> |
| 20 <input type="range" id="range_basic" min=0 max=5 /> |
| 21 <input type="range" id="value_smaller_than_min" min=0 max=5 value=-10 /> |
| 22 <input type="range" id="value_larger_than_max" min=0 max=5 value=7 /> |
| 23 <input type="range" id="empty_attributes" /> |
| 24 <input type="range" id="value_not_specified" min=2 max=6 /> |
| 25 <input type="range" id="control_step_mismatch" min=0 max=7 step=2 /> |
| 26 <input type="range" id="max_smaller_than_min" min=2 max=-3 /> |
| 27 <input type="range" id="default_step_scale_factor_1" min=5 max=12.6 value=
6.7 /> |
| 28 <input type="range" id="default_step_scale_factor_2" min=5.3 max=12 value=
6.7 /> |
| 29 <input type="range" id="default_step_scale_factor_3"min=5 max=12.6 step=0.
5 value=6.7 /> |
| 30 <input type="range" id="float_step_scale_factor" min=5.3 max=12 step=0.5 v
alue=6.7 /> |
| 31 <input type="range" id="stepup" min=3 max=14 value=6 step=3 /> |
| 32 <input type="range" id="stepdown" min=3 max=11 value=9 step=3 /> |
| 33 <input type="range" id="stepup_beyond_max" min=3 max=14 value=9 step=3 /> |
| 34 <input type="range" id="stepdown_beyond_min" min=3 max=11 value=6 step=3 /
> |
| 35 <input type="range" id="illegal_min_and_max" min="ab" max="f" /> |
| 36 <input type="range" id="illegal_value_and_step" min=0 max=5 value="ppp" st
ep="xyz" /> |
| 37 </div> |
| 38 |
| 39 <div id="log"> |
| 40 </div> |
| 41 |
| 42 <script type="text/javascript"> |
| 43 |
| 44 test( |
| 45 function() { |
| 46 assert_equals(document.getElementById('range_basic').type, "range"); |
| 47 }, |
| 48 "range type support on input element", |
| 49 { |
| 50 "help" : "https://html.spec.whatwg.org/multipage/#dom-input-type" |
| 51 } |
| 52 ); |
| 53 |
| 54 test( |
| 55 function() { |
| 56 assert_equals(document.getElementById('range_basic').min, "0") |
| 57 }, |
| 58 "min attribute support on input element", |
| 59 { |
| 60 "help" : "https://html.spec.whatwg.org/multipage/#dom-input-min" |
| 61 } |
| 62 ); |
| 63 |
| 64 test( |
| 65 function() { |
| 66 assert_equals(document.getElementById('range_basic').max, "5") |
| 67 }, |
| 68 "max attribute support on input element", |
| 69 { |
| 70 "help" : "https://html.spec.whatwg.org/multipage/#dom-input-max" |
| 71 } |
| 72 ); |
| 73 |
| 74 // HTML5 spec says the default vaules of min and max attributes are 0 and
100 respectively, |
| 75 // however, Chrome, Opera and Firefox would not give any default value at
all... |
| 76 test( |
| 77 function() { |
| 78 assert_equals(document.getElementById('illegal_min_and_max').min, "0") |
| 79 }, |
| 80 "Illegal value of min attribute", |
| 81 { |
| 82 "help" : "https://html.spec.whatwg.org/multipage/#range-state-(type=ra
nge)" |
| 83 } |
| 84 ); |
| 85 |
| 86 test( |
| 87 function() { |
| 88 assert_equals(document.getElementById('illegal_min_and_max').max, "100
") |
| 89 }, |
| 90 "Illegal value of max attribute", |
| 91 { "help" : "https://html.spec.whatwg.org/multipage/#range-state-(type=ra
nge)" } |
| 92 ); |
| 93 |
| 94 test( |
| 95 function() { |
| 96 assert_equals(document.getElementById('illegal_value_and_step').value,
"3") |
| 97 }, |
| 98 "Converting an illegal string to the default value", |
| 99 { |
| 100 "help" : "https://html.spec.whatwg.org/multipage/#range-state-(type=ra
nge)" |
| 101 } |
| 102 ); |
| 103 |
| 104 test( |
| 105 function() { |
| 106 assert_equals(document.getElementById('illegal_value_and_step').step,
"1") |
| 107 }, |
| 108 "Converting an illegal string to the default step", |
| 109 { "help" : "https://html.spec.whatwg.org/multipage/#range-state-(type=ra
nge)" } |
| 110 ); |
| 111 |
| 112 test( |
| 113 function() { |
| 114 assert_equals(document.getElementById('value_smaller_than_min').value,
"0") |
| 115 }, |
| 116 "the value is set to min when a smaller value than min attribute is give
n", |
| 117 { |
| 118 "help" : "https://html.spec.whatwg.org/multipage/#range-state-(type=ra
nge)" |
| 119 } |
| 120 ); |
| 121 |
| 122 test( |
| 123 function() { |
| 124 assert_equals(document.getElementById('value_larger_than_max').value,
"5") |
| 125 }, |
| 126 "the value is set to max when a larger value than max attribute is given
", |
| 127 { |
| 128 "help" : "https://html.spec.whatwg.org/multipage/#range-state-(type=ra
nge)" |
| 129 } |
| 130 ); |
| 131 |
| 132 test( |
| 133 function() { |
| 134 assert_equals(document.getElementById('empty_attributes').min, "0") |
| 135 }, |
| 136 "default value of min attribute in input type=range", |
| 137 { "help" : "https://html.spec.whatwg.org/multipage/#dom-input-min" } |
| 138 ); |
| 139 |
| 140 test( |
| 141 function() { |
| 142 assert_equals(document.getElementById('empty_attributes').max, "100") |
| 143 }, |
| 144 "default value of max attribute in input type=range", |
| 145 { |
| 146 "help" : "https://html.spec.whatwg.org/multipage/#dom-input-max" |
| 147 } |
| 148 ); |
| 149 |
| 150 test( |
| 151 function() { |
| 152 assert_equals(document.getElementById('value_not_specified').value, "4
") |
| 153 }, |
| 154 "default value when min and max attributes are given (= min plus half th
e difference between min and max)", |
| 155 { |
| 156 "help" : "https://html.spec.whatwg.org/multipage/#range-state-(type=ra
nge)" |
| 157 } |
| 158 ); |
| 159 |
| 160 test( |
| 161 function() { |
| 162 assert_equals(document.getElementById('control_step_mismatch').value,
"4") |
| 163 }, |
| 164 "default value with step control when both min and max attributes are gi
ven", |
| 165 { |
| 166 "help" : "https://html.spec.whatwg.org/multipage/#range-state-(type=ra
nge)" |
| 167 } |
| 168 ); |
| 169 |
| 170 // Chrome would result in different value out of the range between min and
max. Why? |
| 171 test( |
| 172 function() { |
| 173 assert_equals(document.getElementById('max_smaller_than_min').value, "
2") |
| 174 }, |
| 175 "default value when both min and max attributes are given, while min > m
ax", |
| 176 { |
| 177 "help" : "https://html.spec.whatwg.org/multipage/#range-state-(type=ra
nge)" |
| 178 } |
| 179 ); |
| 180 |
| 181 test( |
| 182 function() { |
| 183 assert_equals(document.getElementById('default_step_scale_factor_1').v
alue, "7") |
| 184 }, |
| 185 "The default step scale factor is 1, unless min attribute has non-intege
r value", |
| 186 { |
| 187 "help" : "https://html.spec.whatwg.org/multipage/#range-state-(type=ra
nge)" |
| 188 } |
| 189 ); |
| 190 |
| 191 test( |
| 192 function() { |
| 193 assert_equals(document.getElementById('default_step_scale_factor_2').v
alue, "6.3") |
| 194 }, |
| 195 "Step scale factor behavior when min attribute has integer value but max
attribute is non-integer ", |
| 196 { |
| 197 "help" : "https://html.spec.whatwg.org/multipage/#range-state-(type=ra
nge)" } |
| 198 ); |
| 199 |
| 200 test( |
| 201 function() { |
| 202 assert_equals(document.getElementById('default_step_scale_factor_3').s
tep, "1") |
| 203 }, |
| 204 "The default scale factor is 1 even if step attribute is explicitly set
to non-integer value, unless min attribute has non-integer value", |
| 205 { |
| 206 "help" : "https://html.spec.whatwg.org/multipage/#range-state-(type=ra
nge)" |
| 207 } |
| 208 ); |
| 209 |
| 210 test( |
| 211 function() { |
| 212 assert_equals(document.getElementById('float_step_scale_factor').value
, "6.8") |
| 213 }, |
| 214 "Solving the step mismatch", |
| 215 { |
| 216 "help" : "https://html.spec.whatwg.org/multipage/#range-state-(type=ra
nge)" |
| 217 } |
| 218 ); |
| 219 |
| 220 // Firefox Nightly (24.0a1) would result in the possible maximum value in
this range... (i.e. 12) |
| 221 test( |
| 222 function() { |
| 223 var e = document.getElementById('stepup'); |
| 224 e.stepUp(); |
| 225 assert_equals(e.value, "9") |
| 226 }, |
| 227 "Performing stepUp()", |
| 228 { |
| 229 "help" : "https://html.spec.whatwg.org/multipage/#dom-input-stepup" |
| 230 } |
| 231 ); |
| 232 |
| 233 // Firefox Nightly (24.0a1) would result in the possible minimum value in
this range... (i.e. 3) |
| 234 test( |
| 235 function() { |
| 236 var e = document.getElementById('stepdown'); |
| 237 e.stepDown(); |
| 238 assert_equals(e.value, "6") |
| 239 }, |
| 240 "Performing stepDown()", |
| 241 { |
| 242 "help" : "https://html.spec.whatwg.org/multipage/#dom-input-stepdown" |
| 243 } |
| 244 ); |
| 245 |
| 246 // Chrome and Opera would throw DOM Exception 11 (InvalidStateError) |
| 247 // Firefox Nightly gives the correct result |
| 248 test( |
| 249 function() { |
| 250 var e = document.getElementById('stepup_beyond_max'); |
| 251 e.stepUp(2); |
| 252 assert_equals(e.value, "12") |
| 253 }, |
| 254 "Performing stepUp() beyond the value of the max attribute", |
| 255 { |
| 256 "help" : "https://html.spec.whatwg.org/multipage/#dom-input-stepup" |
| 257 } |
| 258 ); |
| 259 |
| 260 // Chrome and Opera would throw DOM Exception 11 (InvalidStateError) |
| 261 // Firefox Nightly gives the correct result |
| 262 test( |
| 263 function() { |
| 264 var e = document.getElementById('stepdown_beyond_min'); |
| 265 e.stepDown(2); |
| 266 assert_equals(e.value, "3") |
| 267 }, "Performing stepDown() beyond the value of the min attribute", { |
| 268 "help" : "https://html.spec.whatwg.org/multipage/#dom-input-stepdown" |
| 269 } |
| 270 ); |
| 271 |
| 272 </script> |
| 273 |
| 274 </body> |
| 275 |
| 276 </html> |
OLD | NEW |