round-mod-rem-computed.html (11787B)
1 <!DOCTYPE html> 2 <link rel="help" href="https://drafts.csswg.org/css-values-4/#round-func"> 3 <link rel="help" href="https://drafts.csswg.org/css-values-4/#numbers"> 4 <link rel="help" href="https://drafts.csswg.org/css-values-4/#calc-type-checking"> 5 <link rel="author" title="Apple Inc"> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <script src="../support/numeric-testcommon.js"></script> 9 <div style="width: 75px;"> 10 <div id="target"></div> 11 </div> 12 <script> 13 // Simple tests 14 test_math_used('round(10,10)', '10', {type:'number'}); 15 test_math_used('mod(1,1)', '0', {type:'number'}); 16 test_math_used('rem(1,1)', '0', {type:'number'}); 17 18 // Test basic round 19 test_math_used('calc(round(100,10))', '100', {type:'number'}); 20 test_math_used('calc(round(up, 101,10))', '110', {type:'number'}); 21 test_math_used('calc(round(down, 106,10))', '100', {type:'number'}); 22 test_math_used('calc(round(to-zero, 105, 10))', '100', {type:'number'}); 23 test_math_used('calc(round(to-zero, -105, 10))', '-100', {type:'number'}); 24 test_math_used('calc(round(-100, 10))', '-100', {type:'number'}); 25 test_math_used('calc(round(up, -103, 10))', '-100', {type:'number'}); 26 27 // Test round when first number is a multiple of the second number. 28 for (let number of [0, 5, -5, 10, -10, 20, -20]) { 29 test_math_used(`round(up, ${number}, 5)`, `${number}`, {type:'number'}); 30 test_math_used(`round(down, ${number}, 5)`, `${number}`, {type:'number'}); 31 test_math_used(`round(nearest, ${number}, 5)`, `${number}`, {type:'number'}); 32 test_math_used(`round(to-zero, ${number}, 5)`, `${number}`, {type:'number'}); 33 } 34 35 // Test basic mod/rem 36 test_math_used('mod(18,5)', '3', {type:'number'}); 37 test_math_used('rem(18,5)', '3', {type:'number'}); 38 test_math_used('mod(-140,-90)', '-50', {type:'number'}); 39 test_math_used('mod(-18,5)', '2', {type:'number'}); 40 test_math_used('rem(-18,5)', '-3', {type:'number'}); 41 test_math_used('mod(140,-90)', '-40', {type:'number'}); 42 test_math_used('rem(140,-90)', '50', {type:'number'}); 43 44 // Test basic calculations 45 test_math_used('calc(round(round(100,10), 10))', '100', {type:'number'}); 46 test_math_used('calc(round(up, round(100,10) + 1,10))', '110', {type:'number'}); 47 test_math_used('calc(round(down, round(100,10) + 2 * 3,10))', '100', {type:'number'}); 48 test_math_used('calc(round(to-zero,round(100,10) * 2 - 95, 10))', '100', {type:'number'}); 49 test_math_used('calc(round(round(100,10)* -1,10))', '-100', {type:'number'}); 50 test_math_used('calc(round(up, -103 + -103 / -103 - 1,10))', '-100', {type:'number'}); 51 test_math_used('calc(mod(18,5) * 2 + mod(17,5))', '8', {type:'number'}); 52 test_math_used('calc(rem(mod(18,5),5))', '3', {type:'number'}); 53 test_math_used('calc(rem(mod(18,5),mod(17,5)))', '1', {type:'number'}); 54 test_math_used('calc(mod(-140,-90))', '-50', {type:'number'}); 55 test_math_used('calc(mod(rem(1,18)* -1,5))', '4', {type:'number'}); 56 57 // Type check 58 test_math_used('round(10px,6px)', '12px'); 59 test_math_used('round(10cm,6cm)', '12cm'); 60 test_math_used('round(10mm,6mm)', '12mm'); 61 test_math_used('round(10Q, 6Q)', '12Q'); 62 test_math_used('round(10in,6in)', '12in'); 63 test_math_used('round(10pc,6pc)', '12pc'); 64 test_math_used('round(10pt,6pt)', '12pt'); 65 test_math_used('round(10em,6em)', '12em'); 66 test_math_used('round(10ex,6ex)', '12ex'); 67 test_math_used('round(10ch,6ch)', '12ch'); 68 test_math_used('round(10rem,6rem)', '12rem'); 69 test_math_used('round(10vh,6vh)', '12vh'); 70 test_math_used('round(10vw,6vw)', '12vw'); 71 test_math_used('round(10vmin,6vmin)', '12vmin'); 72 test_math_used('round(10vmax,6vmax)', '12vmax'); 73 test_math_used('round(10s,6s)', '12s', {type:'time'}); 74 test_math_used('round(10ms,6ms)', '12ms', {type:'time'}); 75 test_math_used('round(10deg,6deg)', '12deg', {type:'angle', approx:0.1}); 76 test_math_used('round(10grad,6grad)', '12grad', {type:'angle', approx:0.1}); 77 test_math_used('round(10rad,6rad)', '12rad',{type:'angle', approx:0.1}); 78 test_math_used('round(10turn,6turn)', '12turn',{type:'angle', approx:0.1}); 79 80 test_math_used('mod(10px,6px)', '4px'); 81 test_math_used('mod(10cm,6cm)', '4cm'); 82 test_math_used('mod(10mm,6mm)', '4mm'); 83 test_math_used('mod(10Q, 6Q)', '4Q'); 84 test_math_used('mod(10in,6in)', '4in'); 85 test_math_used('mod(10pc,6pc)', '4pc'); 86 test_math_used('mod(10em,6em)', '4em'); 87 test_math_used('mod(10ex,6ex)', '4ex'); 88 test_math_used('mod(10ch,6ch)', '4ch'); 89 test_math_used('mod(10rem,6rem)', '4rem'); 90 test_math_used('mod(10vh,6vh)', '4vh', {approx: 0.1}); 91 test_math_used('mod(10vw,6vw)', '4vw', {approx: 0.1}); 92 test_math_used('mod(10vmin,6vmin)', '4vmin', {approx: 0.1}); 93 test_math_used('mod(10vmax,6vmax)', '4vmax', {approx: 0.1}); 94 test_math_used('mod(10s,6s)', '4s', {type:'time'}); 95 test_math_used('mod(10ms,6ms)', '4ms', {type:'time'}); 96 test_math_used('mod(10deg,6deg)', '4deg', {type:'angle', approx:0.1}); 97 test_math_used('mod(10grad,6grad)', '4grad', {type:'angle', approx:0.1}); 98 test_math_used('mod(10rad,6rad)', '4rad',{type:'angle', approx:0.1}); 99 test_math_used('mod(10turn,6turn)', '4turn',{type:'angle', approx:0.1}); 100 101 test_math_used('rem(10px,6px)', '4px'); 102 test_math_used('rem(10cm,6cm)', '4cm'); 103 test_math_used('rem(10mm,6mm)', '4mm'); 104 test_math_used('rem(10Q, 6Q)', '4Q'); 105 test_math_used('rem(10in,6in)', '4in'); 106 test_math_used('rem(10pc,6pc)', '4pc'); 107 test_math_used('rem(10em,6em)', '4em'); 108 test_math_used('rem(10ex,6ex)', '4ex'); 109 test_math_used('rem(10ch,6ch)', '4ch'); 110 test_math_used('rem(10rem,6rem)', '4rem'); 111 test_math_used('rem(10vh,6vh)', '4vh', {approx: 0.1}); 112 test_math_used('rem(10vw,6vw)', '4vw', {approx: 0.1}); 113 test_math_used('rem(10vmin,6vmin)', '4vmin', {approx: 0.1}); 114 test_math_used('rem(10vmax,6vmax)', '4vmax', {approx: 0.1}); 115 test_math_used('rem(10s,6s)', '4s', {type:'time'}); 116 test_math_used('rem(10ms,6ms)', '4ms', {type:'time'}); 117 test_math_used('rem(10deg,6deg)', '4deg', {type:'angle', approx:0.1}); 118 test_math_used('rem(10grad,6grad)', '4grad', {type:'angle', approx:0.1}); 119 test_math_used('rem(10rad,6rad)', '4rad',{type:'angle', approx:0.1}); 120 test_math_used('rem(10turn,6turn)', '4turn',{type:'angle', approx:0.1}); 121 122 //Test percentage and mixed units 123 test_math_used('round(10%,1px)', '8px'); 124 test_math_used('round(10%,5px)', '10px'); 125 test_math_used('round(2rem,5px)', '30px'); 126 test_math_used('round(100px,1rem)', '96px'); 127 test_math_used('round(10s,6000ms)', '12s', {type:'time'}); 128 test_math_used('round(10000ms,6s)', '12s', {type:'time'}); 129 130 test_math_used('mod(10%,1px)', '0.5px'); 131 test_math_used('mod(10%,5px)', '2.5px'); 132 test_math_used('mod(2rem,5px)', '2px'); 133 test_math_used('mod(100px,1rem)', '4px'); 134 test_math_used('mod(10s,6000ms)', '4s', {type:'time'}); 135 test_math_used('mod(10000ms,6s)', '4s', {type:'time'}); 136 test_math_used('mod(18px,100% / 15)', '3px', {approx: 0.1}); 137 test_math_used('mod(-18px,100% / 10)', '4.5px'); 138 test_math_used('mod(18%,5%)', '3%'); 139 test_math_used('mod(-19%,5%)', '1%'); 140 test_math_used('mod(18vw,5vw)', '3vw'); 141 test_math_used('mod(-18vw,5vw)', '2vw', {approx: 0.1}); 142 143 test_math_used('rem(10%,1px)', '0.5px'); 144 test_math_used('rem(10%,5px)', '2.5px'); 145 test_math_used('rem(2rem,5px)', '2px'); 146 test_math_used('rem(100px,1rem)', '4px'); 147 test_math_used('rem(10s,6000ms)', '4s', {type:'time'}); 148 test_math_used('rem(10000ms,6s)', '4s', {type:'time'}); 149 test_math_used('rem(18px,100% / 15)', '3px', {approx: 0.1}); 150 test_math_used('rem(-18px,100% / 15)', '-3px', {approx: 0.1}); 151 test_math_used('rem(18vw,5vw)', '3vw'); 152 test_math_used('rem(-18vw,5vw)', '-3vw'); 153 154 test_math_used('calc(round(1px + 0%, 1px + 0%))', '1px'); 155 test_math_used('calc(mod(3px + 0%, 2px + 0%))', '1px'); 156 test_math_used('calc(rem(3px + 0%, 2px + 0%))', '1px'); 157 158 test_math_used('round(1px + 0%, 1px)', '1px'); 159 test_math_used('mod(3px + 0%, 2px)', '1px'); 160 test_math_used('rem(3px + 0%, 2px)', '1px'); 161 162 // In round(A, B), if B is 0, the result is NaN. If A and B are both infinite, the result is NaN. 163 // In mod(A, B) or rem(A, B), if B is 0, the result is NaN. If A is infinite, the result is NaN. 164 for (let operator of ['round', 'mod', 'rem']) { 165 test_math_used(`${operator}(0, 0)`, 'calc(NaN)', {type: 'number'}); 166 test_math_used(`${operator}(-0, 0)`, 'calc(NaN)', {type: 'number'}); 167 test_math_used(`${operator}(Infinity, 0)`, 'calc(NaN)', {type: 'number'}); 168 test_math_used(`${operator}(-Infinity, 0)`, 'calc(NaN)', {type: 'number'}); 169 test_math_used(`${operator}(-4, 0)`, 'calc(NaN)', {type: 'number'}); 170 test_math_used(`${operator}(4, 0)`, 'calc(NaN)', {type: 'number'}); 171 test_math_used(`${operator}(Infinity, Infinity)`, 'calc(NaN)', {type: 'number'}); 172 test_math_used(`${operator}(-Infinity, -Infinity)`, 'calc(NaN)', {type: 'number'}); 173 test_math_used(`${operator}(Infinity, -Infinity)`, 'calc(NaN)', {type: 'number'}); 174 test_math_used(`${operator}(-Infinity, Infinity)`, 'calc(NaN)', {type: 'number'}); 175 } 176 177 // In round(A, B), if A is infinite but B is finite, the result is the same infinity. 178 for (let roundingStrategy of ['up', 'down', 'nearest', 'to-zero']) { 179 test_math_used(`round(${roundingStrategy}, Infinity, 4)`, 'calc(Infinity)', {type: 'number'}); 180 test_math_used(`round(${roundingStrategy}, -Infinity, 4)`, 'calc(-Infinity)', {type: 'number'}); 181 test_math_used(`round(${roundingStrategy}, Infinity, -4)`, 'calc(Infinity)', {type: 'number'}); 182 test_math_used(`round(${roundingStrategy}, -Infinity, -4)`, 'calc(-Infinity)', {type: 'number'}); 183 } 184 185 // If A is finite but B is infinite, the result depends on the <rounding-strategy> and the sign of A: 186 // nearest & to-zero: If A is positive or 0⁺, return 0⁺. Otherwise, return 0⁻. 187 for (let roundingStrategy of ['nearest', 'to-zero']) { 188 test_math_used(`round(${roundingStrategy}, 0, Infinity)`, '0', {type: 'number'}); 189 test_math_used(`round(${roundingStrategy}, 4, Infinity)`, '0', {type: 'number'}); 190 test_math_used(`round(${roundingStrategy}, -0, Infinity)`, 'calc(-0)', {type: 'number'}); 191 test_math_used(`round(${roundingStrategy}, -4, Infinity)`, 'calc(-0)', {type: 'number'}); 192 test_math_used(`round(${roundingStrategy}, 0, -Infinity)`, '0', {type: 'number'}); 193 test_math_used(`round(${roundingStrategy}, 4, -Infinity)`, '0', {type: 'number'}); 194 test_math_used(`round(${roundingStrategy}, -0, -Infinity)`, 'calc(-0)', {type: 'number'}); 195 test_math_used(`round(${roundingStrategy}, -4, -Infinity)`, 'calc(-0)', {type: 'number'}); 196 } 197 198 // up: If A is positive (not zero), return +∞. If A is 0⁺, return 0⁺. Otherwise, return 0⁻. 199 test_math_used('round(up, 1, Infinity)', 'calc(Infinity)', {type: 'number'}); 200 test_math_used('round(up, 0, Infinity)', '0', {type: 'number'}); 201 test_math_used('round(up, -1, Infinity)', 'calc(-0)', {type: 'number'}); 202 test_math_used('round(up, 1, -Infinity)', 'calc(Infinity)', {type: 'number'}); 203 test_math_used('round(up, 0, -Infinity)', '0', {type: 'number'}); 204 test_math_used('round(up, -1, -Infinity)', 'calc(-0)', {type: 'number'}); 205 // down: If A is negative (not zero), return −∞. If A is 0⁻, return 0⁻. Otherwise, return 0⁺. 206 test_math_used('round(down, 1, Infinity)', 'calc(-0)', {type: 'number'}); 207 test_math_used('round(down, 0, Infinity)', '0', {type: 'number'}); 208 test_math_used('round(down, -1, Infinity)', 'calc(-Infinity)', {type: 'number'}); 209 test_math_used('round(down, 1, -Infinity)', 'calc(-0)', {type: 'number'}); 210 test_math_used('round(down, 0, -Infinity)', '0', {type: 'number'}); 211 test_math_used('round(down, -1, -Infinity)', 'calc(-Infinity)', {type: 'number'}); 212 213 // In mod(A, B) only, if B is infinite and A has opposite sign to B (including an oppositely-signed zero), the result is NaN. 214 test_math_used('mod(-0, Infinity)', 'calc(NaN)', {type: 'number'}); 215 test_math_used('mod(0, -Infinity)', 'calc(NaN)', {type: 'number'}); 216 test_math_used('mod(-4, Infinity)', 'calc(NaN)', {type: 'number'}); 217 test_math_used('mod(4, -Infinity)', 'calc(NaN)', {type: 'number'}); 218 </script>