:root { font-size: calc(100vw / 35); } div { --width: calc(10% + 30px); width: calc(0px); line-height: calc(0); line-height: calc(2 + 3 * 4); line-height: calc((2 + 3) * 4); line-height: calc(-5 * 0); width: calc((100px + 100px)); width: calc( ( 100px + 100px ) ); width: calc( 100px + 100px ); width: calc(500px + 50%); width: calc(10% + 20%); width: calc(2pc + 3pt); width: calc(100% / 3 - 2 * 1em - 2 * 1px); width: calc(calc(50px)); width: calc(calc(60%) - 20px); width: calc(calc(3 * 25%)); width: calc(2 * var(--width)); width: calc(pow(pow(30px / 1px, 3), 1/3) * 1px); width: calc(infinity); width: calc(InFiNiTy); width: calc(-InFiNiTy); width: calc(NaN); width: calc((1 * 2) * (5px + 20em / 2) - 80% / (3 - 1) + 5px); } .bar { font-size: calc(1rem * pow(1.5, -1)); font-size: calc(1rem * pow(1.5, 0)); font-size: calc(1rem * pow(1.5, 1)); font-size: calc(1rem * pow(1.5, 2)); font-size: calc(1rem * pow(1.5, 3)); font-size: calc(1rem * pow(1.5, 4)); } .fade { background-image: linear-gradient(silver 0%, white 20px, white calc(100% - 20px), silver 100%); } div { /*height: -webkit-calc(9/16 * 100%)!important;*/ /*width: -moz-calc((50px - 50%)*2);*/ } div { width: calc(100% / 4); } div { margin-top: calc(-120% - 4px); } div { width: calc(50% - ( ( 4% ) * 0.5 ) ); } .fade { background-image: linear-gradient(silver 0%, white 20px, white calc(100% - 20px), silver 100%); } .type { /* Set font-size to 10x the average of vw and vh, but don’t let it go below 12px. */ font-size: max(10 * (1vw + 1vh) / 2, 12px); } .type { /* Force the font-size to stay between 12px and 100px */ font-size: clamp(12px, 10 * (1vw + 1vh) / 2, 100px); } .more { width: mod(18px, 5px); transform: rotate(mod(-140deg, -90deg)); transform: rotate(atan2(1, -1)); transform: rotate(tan(90deg)); transform: rotate(atan(tan(90deg))); font-size: hypot(2em); font-size: hypot(-2em); font-size: hypot(30px, 40px); background-position: sign(10%); width: calc(pow(e, pi) - pi); width: min(pi, 5, e); width: log(5); width: log(5, 5); width: round(var(--width), 50px); width: round(nearest, var(--width), 50px); width: round(up, var(--width), 50px); width: round(down, var(--width), 50px); width: round(to-zero, var(--width), 50px); } .min-max { width: min(10px, 20px, 40px, 100px); width: max(10px, 20px, 40px, 100px); width: min( 10px , 20px , 40px , 100px ); } .rem { width: rem(-18px, 5px); } .sin { transform: rotate(sin(45deg)); transform: rotate(sin(3.14159 / 4)); } .cos { transform: rotate(cos(45deg)); transform: rotate(cos(3.14159 / 4)); } .asin { transform: rotate(asin(45deg)); transform: rotate(asin(pi / 4)); } .acos { transform: rotate(acos(45deg)); transform: rotate(acos(pi / 4)); } .atan { transform: rotate(atan(1 / -1)); } .atan2 { transform: rotate(atan2(1, -1)); } .sqrt { size: sqrt(250); } .exp { size: exp(250 * 2); } .abs { background-position: calc(10% * abs(-10%)); } .sign { background-position: sign(10%); background-position: sign(10% * 2); background-position: sign( 10% * 2 ); background-position: sign(10%*2); background-position: sign( 10 + 10 ); background-position: sign( 10% ); width: calc( ( 100px + 100px ) * 2 ); }