Type | Expected | Actual
--- | --- | ---
translateX( calc(20 * 1px)) |  |
translateX( calc(2 * 1vmin)) |  |
translateX( calc(200 * 1%)) |  |
width: calc(50 * 1px) |  |
width: calc(6 * 1ch) |  |
rotate( calc(45 * 1deg)) |  |
rotate( calc(.125 * 1turn)) |  |
rotate( calc(45deg + .5turn)) |  |
opacity( calc(.25 * 1)) |  |
scaleX( calc(2 * 1)) |  |
font-size: calc(2 * 1rem) |  |
font-size: calc(200 * 1%) |  |
line-height: calc(3 * 1) |  |
linear-gradient(to right, #45cdd4 calc(30 * 1%), transparent) |  |
hsl( calc(50 * 2), 50%, 50%) |  |
hsl( 100, calc(100 * 1%), 50%) |  |
rgb( 80, calc(255 * 1), 80) |  |
rgba( 80, 255, 80, calc(1 * .5)) |  |
cubic-bezier( calc(0 + .25), 1, 0, 1) |  |
cubic-bezier( calc(1 * .25), 1, 0, 1) |  |
*-duration: calc(1000 * 1ms) |  |
blur( calc(.5 * 2px)) |  |
hue-rotate( calc(90 * 1deg)) |  |
Started this as I was seeing what appeared to be broken CSS Variables... but turned out to be a misunderstanding on how calc is implemented in browsers. Some properties allow you to take any unitless number and multiply it by a number+unit to get a final unit value... others do not. As of Firefox 57, everything in this test works except the colors. Safari and Chrome support all of the ones I've tested. Edge does fine with px, vmin, and other linear distance units... but does not seem to handle degrees, unitless, etc. (except in colors, interestingly)