meter.html (14633B)
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-element"> 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"></meter> 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" high="-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"></meter> 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, expectedLow: 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, optimum: 3, expectedOptimum: 3, testname: "Setting values to min, max, low, high and optimum"}, 45 {value: 0, expectedValue: 0, min: 0, expectedMin: 0, max: -1.0, expectedMax: 0, expectedLow: 0, expectedHigh: 0, expectedOptimum: 0, testname: "max < min"}, 46 {value: 0, expectedValue: 10, min: 10, expectedMin: 10, max: 20, expectedMax: 20, expectedLow: 10, expectedHigh: 20, expectedOptimum: 15, testname: "value < min"}, 47 {value: 30, expectedValue: 20, min: 10, expectedMin: 10, max: 20, expectedMax: 20, expectedLow: 10, expectedHigh: 20, expectedOptimum: 15, testname: "value > max"}, 48 {value: 15, expectedValue: 15, min: 10, expectedMin: 10, max: 20, expectedMax: 20, low: 5, expectedLow: 10, expectedHigh: 20, expectedOptimum: 15, testname: "low < min"}, 49 {value: 15, expectedValue: 15, min: 10, expectedMin: 10, max: 20, expectedMax: 20, low: 25, expectedLow: 20, expectedHigh: 20, expectedOptimum: 15, testname: "low > max"}, 50 {value: 15, expectedValue: 15, min: 10, expectedMin: 10, max: 20, expectedMax: 20, low: 12, expectedLow: 12, high: 10, expectedHigh: 12, expectedOptimum: 15, testname: "high < low"}, 51 {value: 15, expectedValue: 15, min: 10, expectedMin: 10, max: 20, expectedMax: 20, low: 10, expectedLow: 10, high: 22, expectedHigh: 20, expectedOptimum: 15, testname: "high > max"}, 52 {value: 15, expectedValue: 15, min: 10, expectedMin: 10, max: 20, expectedMax: 20, expectedLow: 10, expectedHigh: 20, optimum: 9, expectedOptimum: 10, testname: "optimum < min"}, 53 {value: 15, expectedValue: 15, min: 10, expectedMin: 10, max: 20, expectedMax: 20, expectedLow: 10, expectedHigh: 20, optimum: 21, expectedOptimum: 20, testname: "optimum > max"} 54 ]; 55 for (var i = 0; i < meters.length; i++) { 56 var m = meters[i]; 57 test(function() { 58 var meter = document.createElement("meter"); 59 meter.value = m.value; 60 if (m.min) meter.min= m.min; 61 if (m.max) meter.max = m.max; 62 if (m.low) meter.low = m.low; 63 if (m.high) meter.high = m.high; 64 if (m.optimum) meter.optimum = m.optimum; 65 assert_equals(meter.value, m.expectedValue, "meter value"); 66 assert_equals(meter.min, m.expectedMin, "min value"); 67 assert_equals(meter.max, m.expectedMax, "max value"); 68 assert_equals(meter.low, m.expectedLow, "low value"); 69 assert_equals(meter.high, m.expectedHigh, "high value"); 70 assert_equals(meter.optimum, m.expectedOptimum, "optimum value"); 71 }, m.testname); 72 } 73 test(function() { 74 var meter = document.createElement("meter"); 75 assert_throws_js(TypeError, function() { meter.value = "foobar"; }, "value attribute"); 76 assert_throws_js(TypeError, function() { meter.min = "foobar"; }, "min attribute"); 77 assert_throws_js(TypeError, function() { meter.max = "foobar"; }, "max attribute"); 78 assert_throws_js(TypeError, function() { meter.low = "foobar"; }, "low attribute"); 79 assert_throws_js(TypeError, function() { meter.high = "foobar"; }, "high attribute"); 80 assert_throws_js(TypeError, function() { meter.optimum = "foobar"; }, "optimum attribute"); 81 }, "Invalid floating-point number values"); 82 83 </script> 84 <script type="text/javascript"> 85 test(function() { 86 assert_equals(document.getElementById('meter_illegal_value').value, 0); 87 }, "value must be 0 when a string is given"); 88 89 test(function() { 90 assert_equals(document.getElementById('meter_without_min').min, 0); 91 }, "default value of min is 0"); 92 93 test(function() { 94 assert_equals(document.getElementById('meter_without_min').value, 0); 95 }, "If min is not specified and value is smaller than the default value of min (i.e. 0), the actual value must be 0"); 96 97 test(function() { 98 assert_equals(document.getElementById('meter_without_max').max, 1.0); 99 }, "default value of max is 1.0"); 100 101 test(function() { 102 assert_equals(document.getElementById('meter_without_max').value, 1.0); 103 }, "If max is not specified and value is larger than the default value of max (i.e. 1.0), the actual value must be 1.0"); 104 105 test(function() { 106 assert_equals(document.getElementById('meter_min_without_max_1').max, 1.0); 107 }, "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)"); 108 109 test(function() { 110 assert_equals(document.getElementById('meter_min_without_max_1').value, 1.0); 111 }, "If a value smaller than 1.0 is given to min, max is not specified, and value is larger than the default value of max (i.e. 1.0), the actual value must be 1.0"); 112 113 test(function() { 114 assert_equals(document.getElementById('meter_min_without_max_2').max, 12.1); 115 }, "If a value larger than or equal to 1.0 is given to min and max is not specified, max must be the same value as min"); 116 117 test(function() { 118 assert_equals(document.getElementById('meter_min_without_max_2').value, 12.1); 119 }, "If a value larger than or equal to 1.0 is given to min and max is not specified, the actual value must be the same value as min"); 120 121 test(function() { 122 assert_equals(document.getElementById('meter_max_without_min_1').min, 0); 123 }, "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)"); 124 125 test(function() { 126 assert_equals(document.getElementById('meter_max_without_min_1').max, 0); 127 }, "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)"); 128 129 test(function() { 130 assert_equals(document.getElementById('meter_max_without_min_1').value, 0); 131 }, "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)"); 132 133 test(function() { 134 assert_equals(document.getElementById('meter_max_without_min_2').max, 0); 135 }, "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)"); 136 137 test(function() { 138 assert_equals(document.getElementById('meter_max_without_min_2').min, 0); 139 }, "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)"); 140 141 test(function() { 142 assert_equals(document.getElementById('meter_max_without_min_2').value, 0); 143 }, "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)"); 144 145 test(function() { 146 assert_equals(document.getElementById('meter_illegal_min').min, 0); 147 }, "min must be 0 when a string is given"); 148 149 test(function() { 150 assert_equals(document.getElementById('meter_illegal_min').value, 0); 151 }, "If a string is given to min and value is smaller than the default value of min (i.e. 0), the actual value must be 0"); 152 153 test(function() { 154 assert_equals(document.getElementById('meter_illegal_max').max, 1.0); 155 }, "max must be 1.0 when a string is given"); 156 157 test(function() { 158 assert_equals(document.getElementById('meter_illegal_max').value, 1.0); 159 }, "If a string is given to max and value is larger than the default value of min (i.e. 1.0), the actual value must be 1.0"); 160 161 test(function() { 162 assert_equals(document.getElementById('meter_illegal_low_with_min').low, -10.3); 163 }, "giving a string to low must not affect the actual value"); 164 165 test(function() { 166 assert_equals(document.getElementById('meter_illegal_high_with_max').high, 1.5); 167 }, "high must equal max when a string is given to high"); 168 169 test(function() { 170 assert_equals(document.getElementById('meter_illegal_high_with_max').value, 1.5); 171 }, "giving a string to high must not affect the actual value"); 172 173 test(function() { 174 assert_equals(document.getElementById('meter_smaller_than_min').value, 4.5); 175 }, "value must not be smaller than min"); 176 177 test(function() { 178 assert_equals(document.getElementById('meter_larger_than_max').value, 52.02); 179 }, "value must not be larger than max"); 180 181 test(function() { 182 var e = document.getElementById('meter_default_low_and_high_1'); 183 assert_array_equals([e.low,e.high], [-12.3,3.4]); 184 }, "default low and high values equal min and max, respectively"); 185 186 test(function() { 187 var e = document.getElementById('meter_default_low_and_high_2'); 188 assert_array_equals([e.low,e.high], [0,1.0]); 189 }, "default low and high values equal 0 and 1.0 respectively, if both low and high are not specified"); 190 191 test(function() { 192 var e = document.getElementById('meter_low_smaller_than_min'); 193 assert_array_equals([e.low,e.min,e.value], [12.3,12.3,12.3]); 194 }, "low must not be smaller than min"); 195 196 test(function() { 197 var e = document.getElementById('meter_low_larger_than_max'); 198 assert_array_equals([e.low,e.max,e.value], [-34.5,-34.5,-34.5]); 199 }, "low must not be larger than max"); 200 201 test(function() { 202 var e = document.getElementById('meter_high_smaller_than_min'); 203 assert_array_equals([e.high,e.min,e.value], [12.3,12.3,12.3]); 204 }, "high must not be smaller than min"); 205 206 test(function() { 207 var e = document.getElementById('meter_high_larger_than_max'); 208 assert_array_equals([e.high,e.max,e.value], [-34.5,-34.5,-34.5]); 209 }, "high must not be larger than max"); 210 211 test(function() { 212 var e = document.getElementById('meter_low_without_min'); 213 assert_array_equals([e.low,e.min,e.value], [0,0,0]); 214 }, "If min is not specified, low must not be smaller than default value of min (i.e. 0)"); 215 216 test(function() { 217 var e = document.getElementById('meter_high_smaller_than_low'); 218 assert_array_equals([e.low,e.high,e.value], [-10.3,-10.3,-9]); 219 }, "If a value smaller than low is given to high, it must be set to the same value as low"); 220 221 test(function() { 222 var e = document.getElementById('meter_high_without_max'); 223 assert_array_equals([e.high,e.value], [1.0,1.0]); 224 }, "If max is not specified, high must not be larger than default value of max (i.e. 1.0)"); 225 226 test(function() { 227 assert_equals(document.getElementById('meter_optimum_smaller_than_min').optimum, 0); 228 }, "optimum smaller than min"); 229 230 test(function() { 231 var e = document.getElementById('meter_optimum_smaller_than_min'); 232 assert_array_equals([e.min,e.value], [0,0]); 233 }, "optimum (smaller than min) must not affect min and the actual value"); 234 235 test(function() { 236 assert_equals(document.getElementById('meter_optimum_larger_than_max').optimum, 1.0); 237 }, "optimum smaller than max"); 238 239 test(function() { 240 var e = document.getElementById('meter_optimum_larger_than_max'); 241 assert_array_equals([e.max,e.value], [1.0,1.0]); 242 }, "optimum (larger than max) must not affect max and the actual value"); 243 244 test(function() { 245 var e = document.getElementById('meter_default_optimum'); 246 assert_equals(e.optimum, (e.max + e.min) / 2); 247 }, "default optimum value is the midpoint between min and max"); 248 </script> 249 </body> 250 </html>