signs-abs-computed.html (12047B)
1 <!DOCTYPE html> 2 <link rel="help" href="https://drafts.csswg.org/css-values-4/#comp-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 id="container" style="font-size: 20px; width: 100px"> 10 <div id="target"></div> 11 </div> 12 <script> 13 function test_zero(expression, { is_negative }) { 14 test_math_used(`calc(${expression})`, '0', {type:'integer'}); 15 // to test zero sign, make it to negative infinity and clamp it between -1 and 1 16 test_math_used(`clamp(-1, calc( 1 / sign(${expression})), 1)`, (is_negative)? '-1' : '1', {type:'integer'}); 17 } 18 19 function test_length_equals(value, expected, msgExtra) { 20 test_math_used(value, expected, {msgExtra, type: 'integer'}); 21 } 22 23 // Identity tests 24 test_math_used('abs(1)', '1', {type:'integer'}); 25 test_math_used('sign(1)', '1', {type:'integer'}); 26 test_math_used('abs(-1)', '1', {type:'integer'}); 27 test_math_used('sign(-1)', '-1', {type:'integer'}); 28 29 // Nestings 30 test_math_used('abs(sign(1))', '1', {type:'integer'}); 31 test_math_used('abs(sign(sign(1)))', '1', {type:'integer'}); 32 test_math_used('sign(sign(sign(1) + sign(1)))', '1', {type:'integer'}); 33 34 // General calculations 35 test_math_used('calc(abs(0.1 + 0.2) + 0.05)', '0.35', {type:'number', approx:0.1}); 36 test_math_used('calc(sign(0.1 + 0.2) - 0.05)', '0.95', {type:'number', approx:0.1}); 37 test_math_used('calc(abs(0.1 + 0.2) * 2)', '0.6', {type:'number', approx:0.1}); 38 test_math_used('calc(abs(sign(0.1) + 0.2) / 2)', '0.6', {type:'number', approx:0.1}); 39 test_math_used('calc(abs(0.1 + 0.2) * -2)', '-0.6', {type:'number', approx:0.1}); 40 test_math_used('calc(sign(0.1 - 0.2) - 0.05)', '-1.05', {type:'number', approx:0.1}); 41 test_math_used('calc(sign(1) + sign(1) - 0.05)', '1.95', {type:'number', approx:0.1}); 42 43 // Test with <length-percentage> 44 test_math_used('abs(10px)', '10px', {type:'length'}); 45 test_math_used('abs(10%)', '10px', {type:'length'}); 46 test_math_used('abs(10px + 10%)', '20px', {type:'length'}); 47 test_math_used('calc(10px + abs(10%))', '20px', {type:'length'}); 48 test_math_used('abs(-10px)', '10px', {type:'length'}); 49 test_math_used('abs(-10%)', '10px', {type:'length'}); 50 // (20px + 1px) * (sign(20px - 10px - 10px) + 1) 51 test_math_used('calc((1em + 1px) * (sign(1em - 10px - 10%) + 1))', '21px', {type:'length'}); 52 53 // Test sign for zero 54 test_zero('calc(sign(-0))', {is_negative: true}); 55 test_zero('calc(sign(0))', {is_negative: false}); 56 57 // Test with NaN and inf 58 test_math_used('abs(infinity)', 'calc(infinity)', {type:'number'}); 59 test_math_used('abs(-infinity)', 'calc(infinity)', {type:'number'}); 60 test_math_used('abs(NaN)', 'calc(NaN)', {type:'number'}); 61 62 // Test abs/sign with negate 63 test_math_used('calc(20 - abs(-10))', '10', {type:'number'}); 64 test_math_used('calc(20 - abs(10))', '10', {type:'number'}); 65 test_math_used('calc(10 - abs(10 - abs(-30))', '-10', {type:'number'}); 66 test_math_used('calc(2 - sign(1))', '1', {type:'number'}); 67 test_math_used('calc(2 - sign(-1))', '3', {type:'number'}); 68 test_math_used('calc(2 - sign(1 - sign(-1)))', '1', {type:'number'}); 69 test_math_used('calc(10 - abs(20 - sign(2 - abs(-20))))', '-11', {type:'number'}); 70 71 // Type checking sign 72 test_math_used('sign(1px)', '1', {type:'integer'}); 73 test_math_used('sign(1cm)', '1', {type:'integer'}); 74 test_math_used('sign(1mm)', '1', {type:'integer'}); 75 test_math_used('sign(1Q)', '1', {type:'integer'}); 76 test_math_used('sign(1in)', '1', {type:'integer'}); 77 test_math_used('sign(1pc)', '1', {type:'integer'}); 78 test_math_used('sign(1pt)', '1', {type:'integer'}); 79 test_math_used('sign(1em)', '1', {type:'integer'}); 80 test_math_used('sign(1ex)', '1', {type:'integer'}); 81 test_math_used('sign(1ch)', '1', {type:'integer'}); 82 test_math_used('sign(1rem)', '1', {type:'integer'}); 83 test_math_used('sign(1vh)', '1', {type:'integer'}); 84 test_math_used('sign(1vw)', '1', {type:'integer'}); 85 test_math_used('sign(1vmin)', '1', {type:'integer'}); 86 test_math_used('sign(1vmax)', '1', {type:'integer'}); 87 test_math_used('sign(-1px)', '-1', {type:'integer'}); 88 test_math_used('sign(-1cm)', '-1', {type:'integer'}); 89 test_math_used('sign(-1mm)', '-1', {type:'integer'}); 90 test_math_used('sign(-1Q)', '-1', {type:'integer'}); 91 test_math_used('sign(-1in)', '-1', {type:'integer'}); 92 test_math_used('sign(-1pc)', '-1', {type:'integer'}); 93 test_math_used('sign(-1pt)', '-1', {type:'integer'}); 94 test_math_used('sign(-1em)', '-1', {type:'integer'}); 95 test_math_used('sign(-1ex)', '-1', {type:'integer'}); 96 test_math_used('sign(-1ch)', '-1', {type:'integer'}); 97 test_math_used('sign(-1rem)', '-1', {type:'integer'}); 98 test_math_used('sign(-1vh)', '-1', {type:'integer'}); 99 test_math_used('sign(-1vw)', '-1', {type:'integer'}); 100 test_math_used('sign(-1vmin)', '-1', {type:'integer'}); 101 test_math_used('sign(-1vmax)', '-1', {type:'integer'}); 102 test_math_used('sign(1s)', '1', {type:'integer'}); 103 test_math_used('sign(1ms)', '1', {type:'integer'}); 104 test_math_used('sign(-1s)', '-1', {type:'integer'}); 105 test_math_used('sign(-1ms)', '-1', {type:'integer'}); 106 test_math_used('sign(1deg)', '1', {type:'integer'}); 107 test_math_used('sign(1grad)', '1', {type:'integer'}); 108 test_math_used('sign(1rad)', '1', {type:'integer'}); 109 test_math_used('sign(1turn)', '1', {type:'integer'}); 110 test_math_used('sign(-1deg)', '-1', {type:'integer'}); 111 test_math_used('sign(-1grad)', '-1', {type:'integer'}); 112 test_math_used('sign(-1rad)', '-1', {type:'integer'}); 113 test_math_used('sign(-1turn)', '-1', {type:'integer'}); 114 test_zero('sign(0px)', {is_negative: false}); 115 test_zero('sign(0cm)', {is_negative: false}); 116 test_zero('sign(0mm)', {is_negative: false}); 117 test_zero('sign(0Q)', {is_negative: false}); 118 test_zero('sign(0in)', {is_negative: false}); 119 test_zero('sign(0pc)', {is_negative: false}); 120 test_zero('sign(0pt)', {is_negative: false}); 121 test_zero('sign(0em)', {is_negative: false}); 122 test_zero('sign(0ex)', {is_negative: false}); 123 test_zero('sign(0ch)', {is_negative: false}); 124 test_zero('sign(0rem)', {is_negative: false}); 125 test_zero('sign(0vh)', {is_negative: false}); 126 test_zero('sign(0vw)', {is_negative: false}); 127 test_zero('sign(0vmin)', {is_negative: false}); 128 test_zero('sign(0vmax)', {is_negative: false}); 129 test_zero('sign(-0px)', {is_negative: true}); 130 test_zero('sign(-0cm)', {is_negative: true}); 131 test_zero('sign(-0mm)', {is_negative: true}); 132 test_zero('sign(-0Q)', {is_negative: true}); 133 test_zero('sign(-0in)', {is_negative: true}); 134 test_zero('sign(-0pc)', {is_negative: true}); 135 test_zero('sign(-0pt)', {is_negative: true}); 136 test_zero('sign(-0em)', {is_negative: true}); 137 test_zero('sign(-0ex)', {is_negative: true}); 138 test_zero('sign(-0ch)', {is_negative: true}); 139 test_zero('sign(-0rem)', {is_negative: true}); 140 test_zero('sign(-0vh)', {is_negative: true}); 141 test_zero('sign(-0vw)', {is_negative: true}); 142 test_zero('sign(-0vmin)', {is_negative: true}); 143 test_zero('sign(-0vmax)', {is_negative: true}); 144 test_zero('sign(0s)', {is_negative: false}); 145 test_zero('sign(0ms)', {is_negative: false}); 146 test_zero('sign(-0s)', {is_negative: true}); 147 test_zero('sign(-0ms)', {is_negative: true}); 148 test_zero('sign(0deg)', {is_negative: false}); 149 test_zero('sign(0grad)', {is_negative: false}); 150 test_zero('sign(0rad)', {is_negative: false}); 151 test_zero('sign(0turn)', {is_negative: false}); 152 test_zero('sign(-0deg)', {is_negative: true}); 153 test_zero('sign(-0grad)', {is_negative: true}); 154 test_zero('sign(-0rad)', {is_negative: true}); 155 test_zero('sign(-0turn)', {is_negative: true}); 156 157 // Type checking abs 158 test_math_used('abs(1px)', '1px'); 159 test_math_used('abs(1cm)', '1cm'); 160 test_math_used('abs(1mm)', '1mm'); 161 test_math_used('abs(1Q)', '1Q'); 162 test_math_used('abs(1in)', '1in'); 163 test_math_used('abs(1pc)', '1pc'); 164 test_math_used('abs(1pt)', '1pt'); 165 test_math_used('abs(1em)', '1em'); 166 test_math_used('abs(1ex)', '1ex'); 167 test_math_used('abs(1ch)', '1ch'); 168 test_math_used('abs(1rem)', '1rem'); 169 test_math_used('abs(1vh)', '1vh'); 170 test_math_used('abs(1vw)', '1vw'); 171 test_math_used('abs(1vmin)', '1vmin'); 172 test_math_used('abs(1vmax)', '1vmax'); 173 test_math_used('abs(-1px)', '1px'); 174 test_math_used('abs(-1cm)', '1cm'); 175 test_math_used('abs(-1mm)', '1mm'); 176 test_math_used('abs(-1Q)', '1Q'); 177 test_math_used('abs(-1in)', '1in'); 178 test_math_used('abs(-1pc)', '1pc'); 179 test_math_used('abs(-1pt)', '1pt'); 180 test_math_used('abs(-1em)', '1em'); 181 test_math_used('abs(-1ex)', '1ex'); 182 test_math_used('abs(-1ch)', '1ch'); 183 test_math_used('abs(-1rem)', '1rem'); 184 test_math_used('abs(-1vh)', '1vh'); 185 test_math_used('abs(-1vw)', '1vw'); 186 test_math_used('abs(-1vmin)', '1vmin'); 187 test_math_used('abs(-1vmax)', '1vmax'); 188 test_math_used('abs(1s)', '1s', {type:'time'}); 189 test_math_used('abs(1ms)', '1ms', {type:'time'}); 190 test_math_used('abs(-1s)', '1s', {type:'time'}); 191 test_math_used('abs(-1ms)', '1ms', {type:'time'}); 192 test_math_used('abs(1deg)', '1deg', {type:'angle', approx:0.001}); 193 test_math_used('abs(1grad)', '1grad', {type:'angle', approx:0.001}); 194 test_math_used('abs(1rad)', '1rad', {type:'angle', approx:0.001}); 195 test_math_used('abs(1turn)', '1turn', {type:'angle', approx:0.001}); 196 test_math_used('abs(-1deg)', '1deg', {type:'angle', approx:0.001}); 197 test_math_used('abs(-1grad)', '1grad', {type:'angle', approx:0.001}); 198 test_math_used('abs(-1rad)', '1rad', {type:'angle', approx:0.001}); 199 test_math_used('abs(-1turn)', '1turn', {type:'angle', approx:0.001}); 200 201 // with relative length 202 document.getElementById('container').style.fontSize = '10px'; 203 test_length_equals('sign(10px - 1em)', '0', 'fontSize=10px'); 204 test_length_equals('sign(10px - 2em)', '-1', 'fontSize=10px'); 205 document.getElementById('container').style.fontSize = '20px'; 206 207 test_math_used('calc(sign(10%) * 100px)', '100px'); 208 209 // Basic tests (just px and em) for sign() interaction with units not 210 // otherwise used by the property. 211 test_math_used('calc(2.5 - sign(41px - 2em) / 2)', '2', {type:'number'}); 212 test_math_used('calc(2.5 - sign(40px - 2em) / 2)', '2.5', {type:'number'}); 213 test_math_used('calc(2.5 - sign(39px - 2em) / 2)', '3', {type:'number'}); 214 test_math_used('calc(3 + sign(42px - 2em))', '4', {type:'integer'}); 215 test_math_used('calc(3 + sign(40px - 2em))', '3', {type:'integer'}); 216 test_math_used('calc(3 + sign(38px - 2em))', '2', {type:'integer'}); 217 test_math_used('calc(50px + 100px * sign(42px - 2em))', '150px', {type:'length'}); 218 test_math_used('calc(50px + 100px * sign(40px - 2em))', '50px', {type:'length'}); 219 test_math_used('calc(50px + 100px * sign(38px - 2em))', '-50px', {type:'length'}); 220 test_math_used('calc(90deg + 30deg * sign(42px - 2em))', '120deg', {type:'angle'}); 221 test_math_used('calc(90deg + 30deg * sign(40px - 2em))', '90deg', {type:'angle'}); 222 test_math_used('calc(90deg + 30deg * sign(38px - 2em))', '60deg', {type:'angle'}); 223 test_math_used('calc(5s + 15s * sign(42px - 2em))', '20s', {type:'time'}); 224 test_math_used('calc(5s + 15s * sign(40px - 2em))', '5s', {type:'time'}); 225 test_math_used('calc(5s + 15s * sign(38px - 2em))', '-10s', {type:'time'}); 226 test_math_used('calc(100dpi + 20dpi * sign(42px - 2em))', '120dpi', {type:'resolution'}); 227 test_math_used('calc(100dpi + 20dpi * sign(40px - 2em))', '100dpi', {type:'resolution'}); 228 test_math_used('calc(100dpi + 20dpi * sign(38px - 2em))', '80dpi', {type:'resolution'}); 229 test_math_used('calc(3fr + 1fr * sign(42px - 2em))', '4fr', {type:'flex'}); 230 test_math_used('calc(3fr + 1fr * sign(40px - 2em))', '3fr', {type:'flex'}); 231 test_math_used('calc(3fr + 1fr * sign(38px - 2em))', '2fr', {type:'flex'}); 232 // repeat a few with px and rem 233 test_math_used('calc(2.5 - sign(33px - 2rem) / 2)', '2', {type:'number'}); 234 test_math_used('calc(2.5 - sign(32px - 2rem) / 2)', '2.5', {type:'number'}); 235 test_math_used('calc(2.5 - sign(31px - 2rem) / 2)', '3', {type:'number'}); 236 test_math_used('calc(50px + 100px * sign(34px - 2rem))', '150px', {type:'length'}); 237 test_math_used('calc(50px + 100px * sign(32px - 2rem))', '50px', {type:'length'}); 238 test_math_used('calc(50px + 100px * sign(30px - 2rem))', '-50px', {type:'length'}); 239 240 </script>