OLD | NEW |
(Empty) | |
| 1 <!DOCTYPE html> |
| 2 <html> |
| 3 <head> |
| 4 <title>The meter element</title> |
| 5 <link rel="author" title="Tomoyuki SHIMIZU" href="mailto:tomoyuki.labs@gmail
.com"> |
| 6 <link rel="author" title="Denis Ah-Kang" href="mailto:denis@w3.org"> |
| 7 <link rel="help" href="https://html.spec.whatwg.org/multipage/#the-meter-ele
ment"> |
| 8 <script src="../../../../../../resources/testharness.js"></script> |
| 9 <script src="../../../../../../resources/testharnessreport.js"></script> |
| 10 </head> |
| 11 <body> |
| 12 <h1>Meter Element</h1> |
| 13 <div id="log"></div> |
| 14 <div style="display: none;"> |
| 15 <meter id="meter_illegal_value" value="abc"></meter> |
| 16 <meter id="meter_without_min" value="-10"></meter> |
| 17 <meter id="meter_without_max" value="10"></meter> |
| 18 <meter id="meter_min_without_max_1" value="10" min="-3.1"></meter> |
| 19 <meter id="meter_min_without_max_2" value="210" min="12.1"></meter> |
| 20 <meter id="meter_max_without_min_1" value="-10" max="-5342.55"></meter> |
| 21 <meter id="meter_max_without_min_2" value="210" max="-9.9"></meter> |
| 22 <meter id="meter_illegal_min" value="-2" min="hugfe"></meter> |
| 23 <meter id="meter_illegal_max" value="2.4" max="min"></meter> |
| 24 <meter id="meter_illegal_low_with_min" value="-20" min="-10.3" low="ahuge
"></meter> |
| 25 <meter id="meter_illegal_high_with_max" value="2.4" high="old" max="1.5"><
/meter> |
| 26 <meter id="meter_smaller_than_min" value="-10" min="4.5"></meter> |
| 27 <meter id="meter_larger_than_max" value="2345.53" max="52.02"></meter> |
| 28 <meter id="meter_default_low_and_high_1" value="40" min="-12.3" max="3.4">
</meter> |
| 29 <meter id="meter_default_low_and_high_2" value="23"></meter> |
| 30 <meter id="meter_low_smaller_than_min" value="-4" min="12.3" low="34"></me
ter> |
| 31 <meter id="meter_low_larger_than_max" value="-1" min="-50" low="-5" max="-
34.5"></meter> |
| 32 <meter id="meter_high_smaller_than_min" value="-4" min="12.3" high="34"></
meter> |
| 33 <meter id="meter_high_larger_than_max" value="-1" min="-50" high="-5" max=
"-34.5"></meter> |
| 34 <meter id="meter_high_smaller_than_low" value="-9" min="-20" low="-10.3" h
igh="-15.2" max="-2"></meter> |
| 35 <meter id="meter_low_without_min" value="-1" low="-5"></meter> |
| 36 <meter id="meter_high_without_max" value="50000" high="4"></meter> |
| 37 <meter id="meter_optimum_smaller_than_min" value="-8" optimum="-4"></meter
> |
| 38 <meter id="meter_optimum_larger_than_max" value="324" optimum="4.6"></mete
r> |
| 39 <meter id="meter_default_optimum" value="10" min="-132.35" max="33.423"></
meter> |
| 40 </div> |
| 41 <script> |
| 42 var meters = [ |
| 43 {value: 0, expectedValue: 0, expectedMin: 0, expectedMax: 1.0, expectedL
ow: 0, expectedHigh: 1.0, expectedOptimum: 0.5, testname: "Default values"}, |
| 44 {value: 3, expectedValue: 3, min: -10.1, expectedMin: -10.1, max: 10.1,
expectedMax: 10.1, low: -9.1, expectedLow: -9.1, high: 9.1, expectedHigh: 9.1, o
ptimum: 3, expectedOptimum: 3, testname: "Setting values to min, max, low, high
and optimum"}, |
| 45 {value: "foobar", expectedValue: 0, min: "foobar", expectedMin: 0, max:
"foobar", expectedMax: 1.0, low: "foobar", expectedLow: 0, high: "foobar", expec
tedHigh: 1.0, optimum: "foobar", expectedOptimum: 0.5, testname: "Invalid floati
ng-point number values"}, |
| 46 {value: 0, expectedValue: 0, min: 0, expectedMin: 0, max: -1.0, expected
Max: 0, expectedLow: 0, expectedHigh: 0, expectedOptimum: 0, testname: "max < mi
n"}, |
| 47 {value: 0, expectedValue: 10, min: 10, expectedMin: 10, max: 20, expecte
dMax: 20, expectedLow: 10, expectedHigh: 20, expectedOptimum: 15, testname: "val
ue < min"}, |
| 48 {value: 30, expectedValue: 20, min: 10, expectedMin: 10, max: 20, expect
edMax: 20, expectedLow: 10, expectedHigh: 20, expectedOptimum: 15, testname: "va
lue > max"}, |
| 49 {value: 15, expectedValue: 15, min: 10, expectedMin: 10, max: 20, expect
edMax: 20, low: 5, expectedLow: 10, expectedHigh: 20, expectedOptimum: 15, testn
ame: "low < min"}, |
| 50 {value: 15, expectedValue: 15, min: 10, expectedMin: 10, max: 20, expect
edMax: 20, low: 25, expectedLow: 20, expectedHigh: 20, expectedOptimum: 15, test
name: "low > max"}, |
| 51 {value: 15, expectedValue: 15, min: 10, expectedMin: 10, max: 20, expect
edMax: 20, low: 12, expectedLow: 12, high: 10, expectedHigh: 12, expectedOptimum
: 15, testname: "high < low"}, |
| 52 {value: 15, expectedValue: 15, min: 10, expectedMin: 10, max: 20, expect
edMax: 20, low: 10, expectedLow: 10, high: 22, expectedHigh: 20, expectedOptimum
: 15, testname: "high > max"}, |
| 53 {value: 15, expectedValue: 15, min: 10, expectedMin: 10, max: 20, expect
edMax: 20, expectedLow: 10, expectedHigh: 20, optimum: 9, expectedOptimum: 10, t
estname: "optimum < min"}, |
| 54 {value: 15, expectedValue: 15, min: 10, expectedMin: 10, max: 20, expect
edMax: 20, expectedLow: 10, expectedHigh: 20, optimum: 21, expectedOptimum: 20,
testname: "optimum > max"} |
| 55 ]; |
| 56 for (var i = 0; i < meters.length; i++) { |
| 57 var m = meters[i]; |
| 58 test(function() { |
| 59 var meter = document.createElement("meter"); |
| 60 meter.value = m.value; |
| 61 if (m.min) meter.min= m.min; |
| 62 if (m.max) meter.max = m.max; |
| 63 if (m.low) meter.low = m.low; |
| 64 if (m.high) meter.high = m.high; |
| 65 if (m.optimum) meter.optimum = m.optimum; |
| 66 assert_equals(meter.value, m.expectedValue, "meter value"); |
| 67 assert_equals(meter.min, m.expectedMin, "min value"); |
| 68 assert_equals(meter.max, m.expectedMax, "max value"); |
| 69 assert_equals(meter.low, m.expectedLow, "low value"); |
| 70 assert_equals(meter.high, m.expectedHigh, "high value"); |
| 71 assert_equals(meter.optimum, m.expectedOptimum, "optimum value"); |
| 72 }, m.testname); |
| 73 } |
| 74 |
| 75 </script> |
| 76 <script type="text/javascript"> |
| 77 test(function() { |
| 78 assert_equals(document.getElementById('meter_illegal_value').value, 0)
; |
| 79 }, "value must be 0 when a string is given"); |
| 80 |
| 81 test(function() { |
| 82 assert_equals(document.getElementById('meter_without_min').min, 0); |
| 83 }, "default value of min is 0"); |
| 84 |
| 85 test(function() { |
| 86 assert_equals(document.getElementById('meter_without_min').value, 0); |
| 87 }, "If min is not specified and value is smaller than the default value
of min (i.e. 0), the actual value must be 0"); |
| 88 |
| 89 test(function() { |
| 90 assert_equals(document.getElementById('meter_without_max').max, 1.0); |
| 91 }, "default value of max is 1.0"); |
| 92 |
| 93 test(function() { |
| 94 assert_equals(document.getElementById('meter_without_max').value, 1.0)
; |
| 95 }, "If max is not specified and value is larger than the default value o
f max (i.e. 1.0), the actual value must be 1.0"); |
| 96 |
| 97 test(function() { |
| 98 assert_equals(document.getElementById('meter_min_without_max_1').max,
1.0); |
| 99 }, "If a value smaller than 1.0 is given to min and max is not specified
, max must be the same value as its default value (i.e. 1.0)"); |
| 100 |
| 101 test(function() { |
| 102 assert_equals(document.getElementById('meter_min_without_max_1').value
, 1.0); |
| 103 }, "If a value smaller than 1.0 is given to min, max is not specified, a
nd value is larger than the default value of max (i.e. 1.0), the actual value mu
st be 1.0"); |
| 104 |
| 105 test(function() { |
| 106 assert_equals(document.getElementById('meter_min_without_max_2').max,
12.1); |
| 107 }, "If a value larger than or equal to 1.0 is given to min and max is no
t specified, max must be the same value as min"); |
| 108 |
| 109 test(function() { |
| 110 assert_equals(document.getElementById('meter_min_without_max_2').value
, 12.1); |
| 111 }, "If a value larger than or equal to 1.0 is given to min and max is no
t specified, the actual value must be the same value as min"); |
| 112 |
| 113 test(function() { |
| 114 assert_equals(document.getElementById('meter_max_without_min_1').min,
0); |
| 115 }, "If a value smaller than 0 is given to max and min is not specified,
min must be be the same value as its default value (i.e. 0)"); |
| 116 |
| 117 test(function() { |
| 118 assert_equals(document.getElementById('meter_max_without_min_1').max,
0); |
| 119 }, "If a value smaller than 0 is given to max and min is not specified,
max must be be the same value as the default value of min (i.e. 0)"); |
| 120 |
| 121 test(function() { |
| 122 assert_equals(document.getElementById('meter_max_without_min_1').value
, 0); |
| 123 }, "If a value smaller than 0 is given to max and min is not specified,
the actual value must be be the same value as the default value of min (i.e. 0)"
); |
| 124 |
| 125 test(function() { |
| 126 assert_equals(document.getElementById('meter_max_without_min_2').max,
0); |
| 127 }, "If a value larger than or equal to 0 is given to max and min is not
specified, max must be the same value as the default value of min (i.e. 0)"); |
| 128 |
| 129 test(function() { |
| 130 assert_equals(document.getElementById('meter_max_without_min_2').min,
0); |
| 131 }, "If a value larger than or equal to 0 is given to max and min is not
specified, min must be the same value as its default value (i.e. 0)"); |
| 132 |
| 133 test(function() { |
| 134 assert_equals(document.getElementById('meter_max_without_min_2').value
, 0); |
| 135 }, "If a value larger than or equal to 0 is given to max and min is not
specified, the actual value must be the same value as the default value of min (
i.e. 0)"); |
| 136 |
| 137 test(function() { |
| 138 assert_equals(document.getElementById('meter_illegal_min').min, 0); |
| 139 }, "min must be 0 when a string is given"); |
| 140 |
| 141 test(function() { |
| 142 assert_equals(document.getElementById('meter_illegal_min').value, 0); |
| 143 }, "If a string is given to min and value is smaller than the default va
lue of min (i.e. 0), the actual value must be 0"); |
| 144 |
| 145 test(function() { |
| 146 assert_equals(document.getElementById('meter_illegal_max').max, 1.0); |
| 147 }, "max must be 1.0 when a string is given"); |
| 148 |
| 149 test(function() { |
| 150 assert_equals(document.getElementById('meter_illegal_max').value, 1.0)
; |
| 151 }, "If a string is given to max and value is larger than the default val
ue of min (i.e. 1.0), the actual value must be 1.0"); |
| 152 |
| 153 test(function() { |
| 154 assert_equals(document.getElementById('meter_illegal_low_with_min').lo
w, -10.3); |
| 155 }, "giving a string to low must not affect the actual value"); |
| 156 |
| 157 test(function() { |
| 158 assert_equals(document.getElementById('meter_illegal_high_with_max').h
igh, 1.5); |
| 159 }, "high must equal max when a string is given to high"); |
| 160 |
| 161 test(function() { |
| 162 assert_equals(document.getElementById('meter_illegal_high_with_max').v
alue, 1.5); |
| 163 }, "giving a string to high must not affect the actual value"); |
| 164 |
| 165 test(function() { |
| 166 assert_equals(document.getElementById('meter_smaller_than_min').value,
4.5); |
| 167 }, "value must not be smaller than min"); |
| 168 |
| 169 test(function() { |
| 170 assert_equals(document.getElementById('meter_larger_than_max').value,
52.02); |
| 171 }, "value must not be larger than max"); |
| 172 |
| 173 test(function() { |
| 174 var e = document.getElementById('meter_default_low_and_high_1'); |
| 175 assert_array_equals([e.low,e.high], [-12.3,3.4]); |
| 176 }, "default low and high values equal min and max, respectively"); |
| 177 |
| 178 test(function() { |
| 179 var e = document.getElementById('meter_default_low_and_high_2'); |
| 180 assert_array_equals([e.low,e.high], [0,1.0]); |
| 181 }, "default low and high values equal 0 and 1.0 respectively, if both lo
w and high are not specified"); |
| 182 |
| 183 test(function() { |
| 184 var e = document.getElementById('meter_low_smaller_than_min'); |
| 185 assert_array_equals([e.low,e.min,e.value], [12.3,12.3,12.3]); |
| 186 }, "low must not be smaller than min"); |
| 187 |
| 188 test(function() { |
| 189 var e = document.getElementById('meter_low_larger_than_max'); |
| 190 assert_array_equals([e.low,e.max,e.value], [-34.5,-34.5,-34.5]); |
| 191 }, "low must not be larger than max"); |
| 192 |
| 193 test(function() { |
| 194 var e = document.getElementById('meter_high_smaller_than_min'); |
| 195 assert_array_equals([e.high,e.min,e.value], [12.3,12.3,12.3]); |
| 196 }, "high must not be smaller than min"); |
| 197 |
| 198 test(function() { |
| 199 var e = document.getElementById('meter_high_larger_than_max'); |
| 200 assert_array_equals([e.high,e.max,e.value], [-34.5,-34.5,-34.5]); |
| 201 }, "high must not be larger than max"); |
| 202 |
| 203 test(function() { |
| 204 var e = document.getElementById('meter_low_without_min'); |
| 205 assert_array_equals([e.low,e.min,e.value], [0,0,0]); |
| 206 }, "If min is not specified, low must not be smaller than default value
of min (i.e. 0)"); |
| 207 |
| 208 test(function() { |
| 209 var e = document.getElementById('meter_high_smaller_than_low'); |
| 210 assert_array_equals([e.low,e.high,e.value], [-10.3,-10.3,-9]); |
| 211 }, "If a value smaller than low is given to high, it must be set to the
same value as low"); |
| 212 |
| 213 test(function() { |
| 214 var e = document.getElementById('meter_high_without_max'); |
| 215 assert_array_equals([e.high,e.value], [1.0,1.0]); |
| 216 }, "If max is not specified, high must not be larger than default value
of max (i.e. 1.0)"); |
| 217 |
| 218 test(function() { |
| 219 assert_equals(document.getElementById('meter_optimum_smaller_than_min'
).optimum, 0); |
| 220 }, "optimum smaller than min"); |
| 221 |
| 222 test(function() { |
| 223 var e = document.getElementById('meter_optimum_smaller_than_min'); |
| 224 assert_array_equals([e.min,e.value], [0,0]); |
| 225 }, "optimum (smaller than min) must not affect min and the actual value"
); |
| 226 |
| 227 test(function() { |
| 228 assert_equals(document.getElementById('meter_optimum_larger_than_max')
.optimum, 1.0); |
| 229 }, "optimum smaller than max"); |
| 230 |
| 231 test(function() { |
| 232 var e = document.getElementById('meter_optimum_larger_than_max'); |
| 233 assert_array_equals([e.max,e.value], [1.0,1.0]); |
| 234 }, "optimum (larger than max) must not affect max and the actual value")
; |
| 235 |
| 236 test(function() { |
| 237 var e = document.getElementById('meter_default_optimum'); |
| 238 assert_equals(e.optimum, (e.max + e.min) / 2); |
| 239 }, "default optimum value is the midpoint between min and max"); |
| 240 </script> |
| 241 </body> |
| 242 </html> |
OLD | NEW |