round-function.html (12548B)
1 <!doctype html> 2 <title>round() function</title> 3 <meta charset=utf-8> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <script src="../support/numeric-testcommon.js"></script> 7 8 <meta name=author content="Tab Atkins-Bittner"> 9 <link rel=help href="https://drafts.csswg.org/css-values-4/#round-func"> 10 11 <div id=target></div> 12 <script> 13 // No-op round should be same as nearest 14 test_math_used("round(23px, 10px)", "20px"); 15 test_math_used("round(18px, 10px)", "20px"); 16 test_math_used("round(15px, 10px)", "20px"); 17 test_math_used("round(13px, 10px)", "10px"); 18 test_math_used("round(-13px, 10px)", "-10px"); 19 test_math_used("round(-18px, 10px)", "-20px"); 20 21 test_math_used("round(23, 10)", "20", { type: "integer" }); 22 test_math_used("round(18, 10)", "20", { type: "integer" }); 23 test_math_used("round(15, 10)", "20", { type: "integer" }); 24 test_math_used("round(13, 10)", "10", { type: "integer" }); 25 test_math_used("round(-13, 10)", "-10", { type: "integer" }); 26 test_math_used("round(-18, 10)", "-20", { type: "integer" }); 27 28 // Test nearest 29 test_math_used("round(nearest, 23px, 10px)", "20px"); 30 test_math_used("round(nearest, 18px, 10px)", "20px"); 31 test_math_used("round(nearest, 15px, 10px)", "20px"); 32 test_math_used("round(nearest, 13px, 10px)", "10px"); 33 test_math_used("round(nearest, -13px, 10px)", "-10px"); 34 test_math_used("round(nearest, -18px, 10px)", "-20px"); 35 36 test_math_used("round(nearest, 23, 10)", "20", { type: "integer" }); 37 test_math_used("round(nearest, 18, 10)", "20", { type: "integer" }); 38 test_math_used("round(nearest, 15, 10)", "20", { type: "integer" }); 39 test_math_used("round(nearest, 13, 10)", "10", { type: "integer" }); 40 test_math_used("round(nearest, -13, 10)", "-10", { type: "integer" }); 41 test_math_used("round(nearest, -18, 10)", "-20", { type: "integer" }); 42 43 // Test down 44 test_math_used("round(down, 23px, 10px)", "20px"); 45 test_math_used("round(down, 18px, 10px)", "10px"); 46 test_math_used("round(down, 15px, 10px)", "10px"); 47 test_math_used("round(down, 13px, 10px)", "10px"); 48 test_math_used("round(down, -13px, 10px)", "-20px"); 49 test_math_used("round(down, -18px, 10px)", "-20px"); 50 51 test_math_used("round(down, 23, 10)", "20", { type: "integer" }); 52 test_math_used("round(down, 18, 10)", "10", { type: "integer" }); 53 test_math_used("round(down, 15, 10)", "10", { type: "integer" }); 54 test_math_used("round(down, 13, 10)", "10", { type: "integer" }); 55 test_math_used("round(down, -13, 10)", "-20", { type: "integer" }); 56 test_math_used("round(down, -18, 10)", "-20", { type: "integer" }); 57 58 // Test up 59 test_math_used("round(up, 23px, 10px)", "30px"); 60 test_math_used("round(up, 18px, 10px)", "20px"); 61 test_math_used("round(up, 15px, 10px)", "20px"); 62 test_math_used("round(up, 13px, 10px)", "20px"); 63 test_math_used("round(up, -13px, 10px)", "-10px"); 64 test_math_used("round(up, -18px, 10px)", "-10px"); 65 66 test_math_used("round(up, 23, 10)", "30", { type: "integer" }); 67 test_math_used("round(up, 18, 10)", "20", { type: "integer" }); 68 test_math_used("round(up, 15, 10)", "20", { type: "integer" }); 69 test_math_used("round(up, 13, 10)", "20", { type: "integer" }); 70 test_math_used("round(up, -13, 10)", "-10", { type: "integer" }); 71 test_math_used("round(up, -18, 10)", "-10", { type: "integer" }); 72 73 // Test to-zero 74 test_math_used("round(to-zero, 23px, 10px)", "20px"); 75 test_math_used("round(to-zero, 18px, 10px)", "10px"); 76 test_math_used("round(to-zero, 15px, 10px)", "10px"); 77 test_math_used("round(to-zero, 13px, 10px)", "10px"); 78 test_math_used("round(to-zero, -13px, 10px)", "-10px"); 79 test_math_used("round(to-zero, -18px, 10px)", "-10px"); 80 81 test_math_used("round(to-zero, 23, 10)", "20", { type: "integer" }); 82 test_math_used("round(to-zero, 18, 10)", "10", { type: "integer" }); 83 test_math_used("round(to-zero, 15, 10)", "10", { type: "integer" }); 84 test_math_used("round(to-zero, 13, 10)", "10", { type: "integer" }); 85 test_math_used("round(to-zero, -13, 10)", "-10", { type: "integer" }); 86 test_math_used("round(to-zero, -18, 10)", "-10", { type: "integer" }); 87 88 // Test a negative step 89 test_math_used("round(23px, -10px)", "20px"); 90 test_math_used("round(18px, -10px)", "20px"); 91 test_math_used("round(15px, -10px)", "20px"); 92 test_math_used("round(13px, -10px)", "10px"); 93 test_math_used("round(-13px, -10px)", "-10px"); 94 test_math_used("round(-18px, -10px)", "-20px"); 95 96 test_math_used("round(23, -10)", "20", { type: "integer" }); 97 test_math_used("round(18, -10)", "20", { type: "integer" }); 98 test_math_used("round(15, -10)", "20", { type: "integer" }); 99 test_math_used("round(13, -10)", "10", { type: "integer" }); 100 test_math_used("round(-13, -10)", "-10", { type: "integer" }); 101 test_math_used("round(-18, -10)", "-20", { type: "integer" }); 102 103 // Test with value that is an exact multiple of step 104 test_math_used("round(10px, 5px)", "10px"); 105 test_math_used("round(nearest, 10px, 5px)", "10px"); 106 test_math_used("round(down, 10px, 5px)", "10px"); 107 test_math_used("round(up, 10px, 5px)", "10px"); 108 test_math_used("round(to-zero, 10px, 5px)", "10px"); 109 110 test_math_used("round(10, 5)", "10", { type: "integer" }); 111 test_math_used("round(nearest, 10, 5)", "10", { type: "integer" }); 112 test_math_used("round(down, 10, 5)", "10", { type: "integer" }); 113 test_math_used("round(up, 10, 5)", "10", { type: "integer" }); 114 test_math_used("round(to-zero, 10, 5)", "10", { type: "integer" }); 115 116 test_math_used("round(-10px, 5px)", "-10px"); 117 test_math_used("round(nearest, -10px, 5px)", "-10px"); 118 test_math_used("round(down, -10px, 5px)", "-10px"); 119 test_math_used("round(up, -10px, 5px)", "-10px"); 120 test_math_used("round(to-zero, -10px, 5px)", "-10px"); 121 122 test_math_used("round(-10, 5)", "-10", { type: "integer" }); 123 test_math_used("round(nearest, -10, 5)", "-10", { type: "integer" }); 124 test_math_used("round(down, -10, 5)", "-10", { type: "integer" }); 125 test_math_used("round(up, -10, 5)", "-10", { type: "integer" }); 126 test_math_used("round(to-zero, -10, 5)", "-10", { type: "integer" }); 127 128 // Test negation of the round operation 129 test_math_used("calc(0px - round(23px, 10px))", "-20px"); 130 test_math_used("calc(0px - round(18px, 10px))", "-20px"); 131 test_math_used("calc(0px - round(15px, 10px))", "-20px"); 132 test_math_used("calc(0px - round(13px, 10px))", "-10px"); 133 test_math_used("calc(0px - round(-13px, 10px))", "10px"); 134 test_math_used("calc(0px - round(-18px, 10px))", "20px"); 135 136 test_math_used("calc(0 - round(23, 10))", "-20", { type: "integer" }); 137 test_math_used("calc(0 - round(18, 10))", "-20", { type: "integer" }); 138 test_math_used("calc(0 - round(15, 10))", "-20", { type: "integer" }); 139 test_math_used("calc(0 - round(13, 10))", "-10", { type: "integer" }); 140 test_math_used("calc(0 - round(-13, 10))", "10", { type: "integer" }); 141 test_math_used("calc(0 - round(-18, 10))", "20", { type: "integer" }); 142 143 // Test negation of nearest 144 test_math_used("calc(0px - round(nearest, 23px, 10px))", "-20px"); 145 test_math_used("calc(0px - round(nearest, 18px, 10px))", "-20px"); 146 test_math_used("calc(0px - round(nearest, 15px, 10px))", "-20px"); 147 test_math_used("calc(0px - round(nearest, 13px, 10px))", "-10px"); 148 test_math_used("calc(0px - round(nearest, -13px, 10px))", "10px"); 149 test_math_used("calc(0px - round(nearest, -18px, 10px))", "20px"); 150 151 test_math_used("calc(0 - round(nearest, 23, 10))", "-20", { type: "integer" }); 152 test_math_used("calc(0 - round(nearest, 18, 10))", "-20", { type: "integer" }); 153 test_math_used("calc(0 - round(nearest, 15, 10))", "-20", { type: "integer" }); 154 test_math_used("calc(0 - round(nearest, 13, 10))", "-10", { type: "integer" }); 155 test_math_used("calc(0 - round(nearest, -13, 10))", "10", { type: "integer" }); 156 test_math_used("calc(0 - round(nearest, -18, 10))", "20", { type: "integer" }); 157 158 // Test negation of down 159 test_math_used("calc(0px - round(down, 23px, 10px))", "-20px"); 160 test_math_used("calc(0px - round(down, 18px, 10px))", "-10px"); 161 test_math_used("calc(0px - round(down, 15px, 10px))", "-10px"); 162 test_math_used("calc(0px - round(down, 13px, 10px))", "-10px"); 163 test_math_used("calc(0px - round(down, -13px, 10px))", "20px"); 164 test_math_used("calc(0px - round(down, -18px, 10px))", "20px"); 165 166 test_math_used("calc(0 - round(down, 23, 10))", "-20", { type: "integer" }); 167 test_math_used("calc(0 - round(down, 18, 10))", "-10", { type: "integer" }); 168 test_math_used("calc(0 - round(down, 15, 10))", "-10", { type: "integer" }); 169 test_math_used("calc(0 - round(down, 13, 10))", "-10", { type: "integer" }); 170 test_math_used("calc(0 - round(down, -13, 10))", "20", { type: "integer" }); 171 test_math_used("calc(0 - round(down, -18, 10))", "20", { type: "integer" }); 172 173 // Test negation of up 174 test_math_used("calc(0px - round(up, 23px, 10px))", "-30px"); 175 test_math_used("calc(0px - round(up, 18px, 10px))", "-20px"); 176 test_math_used("calc(0px - round(up, 15px, 10px))", "-20px"); 177 test_math_used("calc(0px - round(up, 13px, 10px))", "-20px"); 178 test_math_used("calc(0px - round(up, -13px, 10px))", "10px"); 179 test_math_used("calc(0px - round(up, -18px, 10px))", "10px"); 180 181 test_math_used("calc(0 - round(up, 23, 10))", "-30", { type: "integer" }); 182 test_math_used("calc(0 - round(up, 18, 10))", "-20", { type: "integer" }); 183 test_math_used("calc(0 - round(up, 15, 10))", "-20", { type: "integer" }); 184 test_math_used("calc(0 - round(up, 13, 10))", "-20", { type: "integer" }); 185 test_math_used("calc(0 - round(up, -13, 10))", "10", { type: "integer" }); 186 test_math_used("calc(0 - round(up, -18, 10))", "10", { type: "integer" }); 187 188 // Test negation of to-zero 189 test_math_used("calc(0px - round(to-zero, 23px, 10px))", "-20px"); 190 test_math_used("calc(0px - round(to-zero, 18px, 10px))", "-10px"); 191 test_math_used("calc(0px - round(to-zero, 15px, 10px))", "-10px"); 192 test_math_used("calc(0px - round(to-zero, 13px, 10px))", "-10px"); 193 test_math_used("calc(0px - round(to-zero, -13px, 10px))", "10px"); 194 test_math_used("calc(0px - round(to-zero, -18px, 10px))", "10px"); 195 196 test_math_used("calc(0 - round(to-zero, 23, 10))", "-20", { type: "integer" }); 197 test_math_used("calc(0 - round(to-zero, 18, 10))", "-10", { type: "integer" }); 198 test_math_used("calc(0 - round(to-zero, 15, 10))", "-10", { type: "integer" }); 199 test_math_used("calc(0 - round(to-zero, 13, 10))", "-10", { type: "integer" }); 200 test_math_used("calc(0 - round(to-zero, -13, 10))", "10", { type: "integer" }); 201 test_math_used("calc(0 - round(to-zero, -18, 10))", "10", { type: "integer" }); 202 203 // Test omission of <step> argument 204 test_math_used("round(1.5)", "2", { type: "integer" }); 205 test_math_used("round(up, 1.5)", "2", { type: "integer" }); 206 test_math_used("round(down, 1.5)", "1", { type: "integer" }); 207 test_math_used("round(to-zero, 1.5)", "1", { type: "integer" }); 208 test_math_used("round(-1.5)", "-1", { type: "integer" }); 209 test_math_used("round(up, -1.5)", "-1", { type: "integer" }); 210 test_math_used("round(down, -1.5)", "-2", { type: "integer" }); 211 test_math_used("round(to-zero, -1.5)", "-1", { type: "integer" }); 212 213 // Extreme cases: 214 215 // 0 step is NaN 216 test_nan("round(5, 0)"); 217 // both infinite is NaN 218 test_nan("round(infinity, infinity)"); 219 test_nan("round(infinity, -infinity)"); 220 test_nan("round(-infinity, infinity)"); 221 test_nan("round(-infinity, -infinity)"); 222 223 // infinite value with finite step is the same infinity 224 test_plus_infinity("round(infinity, 5)"); 225 test_plus_infinity("round(infinity, -5)"); 226 test_minus_infinity("round(-infinity, 5)"); 227 test_minus_infinity("round(-infinity, -5)"); 228 229 // Finite value with infinite step depends on rounding strategy. 230 // 'nearest' and 'to-zero': pos and +0 go to +0, neg and -0 go to -0 231 test_plus_zero("round(5, infinity)"); 232 test_plus_zero("round(5, -infinity)"); 233 test_minus_zero("round(-5, infinity)"); 234 test_minus_zero("round(-5, -infinity)"); 235 test_plus_zero("round(to-zero, 5, infinity)"); 236 test_plus_zero("round(to-zero, 5, -infinity)"); 237 test_minus_zero("round(to-zero, -5, infinity)"); 238 test_minus_zero("round(to-zero, -5, -infinity)"); 239 // 'up': pos goes to +inf, 0+ goes to 0+, else 0- 240 test_plus_infinity("round(up, 1, infinity)"); 241 test_plus_zero("round(up, 0, infinity)"); 242 test_minus_zero("round(up, -1 * 0, infinity)"); 243 test_minus_zero("round(up, -1, infinity)"); 244 // 'down': neg goes to -inf, -0 goes to -0, else 0+ 245 test_minus_infinity("round(down, -1, infinity)"); 246 test_minus_zero("round(down, -1 * 0, infinity)"); 247 test_plus_zero("round(down, 0, infinity)"); 248 test_plus_zero("round(down, 1, infinity)"); 249 250 // In this test if the multiplication is factored into the sum first, the 251 // result of the round will be incorrect, because of floating point inprecision. 252 // round(down, 2.3333333 - 0.33333334, 1) = round(down, 1.99999996, 1) = 1 253 test_math_used('round(down, (7 - 1) / 3, 1)', '2', {type:'number'}); 254 </script>