test/configCases/css/minimize-calc/style.css - main - githubmirror/webpack

test/configCases/css/minimize-calc/style.css
292 строки13 KB
Alexander Akait
feat(css): four more value-level minify transforms (#21629)
07 авг 2026, 18:19
07 авг 2026, 18:19d0a9320
/* Every case is labelled with a `/*!` comment the minifier keeps, so the
   snapshot shows one case per entry. Each folded result was compared against
   headless Chromium's computed style for the unfolded expression. */

/*! calc: a sum of one unit is that unit */
.c01 { width: calc(1px + 2px) }
/*! calc: ...and subtraction the same way */
.c02 { width: calc(10px - 4px) }
/*! calc: a product by a plain number */
.c03 { width: calc(1px*2) }
/*! calc: ...on either side of the `*` */
.c04 { width: calc(3*4px) }
/*! calc: division by a plain number */
.c05 { width: calc(10px/4) }
/*! calc: parentheses group, and the group folds first */
.c06 { width: calc((1px + 2px)*3) }
/*! calc: a nested calc() is the parentheses it prints as */
.c07 { width: calc(calc(1px + 2px) + 3px) }
/*! calc: units fixed against each other are one term */
.c08 { width: calc(1in + 1px) }
/*! calc: ...and the result prints in a unit the expression was written with */
.c09 { width: calc(2in - 1in) }
/*! calc: ...the shortest of them where it was written with several */
.c10a { width: calc(1cm + 1mm) }
/*! calc: a longer chain */
.c10 { width: calc(1px + 2px + 3px) }
/*! calc: times convert too */
.c11 { transition-duration: calc(1s + 1ms) }
/*! calc: a percentage scales by a number */
.c12 { width: calc(50%*2) }
/*! calc: zero keeps the shorthand's zero-unit drop */
.c13 { width: calc(5px - 5px) }
/*! calc: one angle unit adds exactly, and survives the trig `rotate()` runs it
   through — checked in headless Chromium against the same matrix */
.c14 { rotate: calc(45deg + 45deg) }
/*! calc: ...in whichever unit it was written */
.c15 { rotate: calc(1turn - 0.5turn) }

/* A sum that does not collapse to one unit is still the sum it reduced to. */

/*! sum: a product distributes over the terms */
.t01 { width: calc((1em + 1px)*2) }
/*! sum: ...and so does a division */
.t02 { width: calc((100% + 1px)/2) }
/*! sum: terms of the same unit gather wherever they were written */
.t03 { width: calc(1px + 2em + 3px) }
/*! sum: a negative term is the subtraction it is */
.t04 { width: calc(1em - 2em + 1px) }
/*! sum: ...gathering through a nested calc() as well */
.t06 { width: calc(3rem + calc(1.5em + .75rem)) }
/*! kept: a zero term stays — which units may be added to which is a type rule,
   and dropping it would make an expression the engine rejects into one it takes */
.t05 { width: calc(1px + 1deg - 1deg) }

/* What the fold declines, and why. */

/*! declined: two units that only layout can add */
.d01 { width: calc(100% - 10px) }
/*! declined: a relative unit against an absolute one */
.d02 { width: calc(1em + 2px) }
/*! declined: a substitution could be anything */
.d03 { width: calc(var(--x) + 1px) }
/*! declined: mixed base types are invalid CSS, and folding would make them valid */
.d04 { width: calc(1px + 1deg) }
/*! declined: division by zero is not a number */
.d05 { width: calc(1px/0) }
/*! declined: past the range the rounding covers every digit carries, and all of
   them are longer than the expression */
.d06 { width: calc(123456px/1.1) }
/*! the fold prints a double back, so its result is rounded to six digits */
.f20 { width: calc(100%/3) }
/*! an angle keeps every digit — `rotate()` runs it through trig */
.f21 { rotate: calc(1turn/3) }
/*! declined: a math function other than calc() */
.d07 { width: min(1px + 2px, 4px) }
/*! declined: two angle units — only `deg`/`grad`/`turn` convert exactly, and
   nothing converts them here, so they stay two terms */
.d08 { rotate: calc(45deg + 0.125turn) }

/* Taking the parentheses off, and the two shapes where that changes the value. */

/*! unwrap: a positive dimension means the same bare */
.u01 { width: calc(3px) }
/*! unwrap: a percentage too — no `<integer>` carries one */
.u02 { width: calc(50%) }
/*! unwrap: an integer is an integer either way */
.u03 { z-index: calc(1 + 1) }
/*! unwrap: a fraction is safe where the property takes no `<integer>` */
.u04 { opacity: calc(.5) }
/*! unwrap: ...line-height likewise */
.u05 { line-height: calc(1.5) }
/*! kept: `z-index: 1.5` is dropped, `calc(1.5)` rounds to 2 */
.u06 { z-index: calc(1.5) }
/*! kept: `width: -5px` is dropped, `calc(-5px)` clamps to 0 */
.u07 { width: calc(-5px) }
/*! unwrap: ...but a negative is a value in its own right where the property
   takes one */
.u08 { margin-left: calc(0px - 5px) }
/*! unwrap: ...through a shorthand that defers to those longhands */
.u08a { margin: calc(0px - 5px) }
/*! unwrap: ...and where the negative is an integer */
.u08b { z-index: calc(1 - 3) }
/*! kept: a fraction is still a fraction where an `<integer>` is wanted */
.u08c { z-index: calc(1.5 - 3) }
/*! kept: `<line-width>` states no range, so nothing licenses the rewrite —
   `border-width: -5px` is dropped, `calc(-5px)` clamps to 0 */
.u08d { border-width: calc(1px - 6px) }
/*! kept: ...and a shorthand that states its own lengths is not its longhands */
.u08e { padding: calc(1px - 6px) }
/*! kept: `width: calc(0)` is a number and dropped, `width: 0` is a length */
.u09 { width: calc(1 - 1) }
/*! kept: a shorthand reaches `<integer>` through its longhands — `columns: 1.5`
   is dropped, `calc(1.5)` rounds to 2 columns */
.u10 { columns: calc(1.5) }
/*! ...beside the other value it sets */
.u11 { columns: calc(1.5) 20em }
/*! unwrap: an integer through that same longhand is still an integer */
.u12 { columns: calc(1 + 1) }

/* Where the fold must not run at all. */

/*! declined: a `@supports` condition is the syntax being tested */
@supports (width: calc(1px + 2px)) { .s01 { color: red } }
/*! declined: a custom property hands its text back through getPropertyValue() */
.s02 { --gap: calc(1px + 2px) }

/* min(), max() and clamp(). The set of math functions and how many arguments
   each takes come from the spec's own grammars; what each one means is written
   in the minifier, so a function with no meaning yet is left alone. */

/*! math: the smallest of a list of one unit */
.m01 { width: min(1px,2px) }
/*! math: ...and the largest */
.m02 { width: max(1px,2px) }
/*! math: however many arguments the grammar allows */
.m03 { width: min(3px,2px,1px) }
/*! math: units fixed against each other compare too, then print in a written one */
.m04 { width: min(1in,100px) }
/*! math: clamp() is the middle one */
.m05 { width: clamp(1px,5px,3px) }
/*! math: ...and the lower bound wins a contradictory pair (CSS Values 4 §10.4) */
.m06 { width: clamp(4px,1px,9px) }
/*! math: a nested calc() has already folded by the time this runs */
.m07 { width: min(calc(1px + 1px),3px) }
/*! math: times compare */
.m08 { transition-duration: max(1s,500ms) }
/*! math: so do plain numbers */
.m09 { opacity: max(.2,.5) }

/*! declined: a percentage basis can be negative (background-position against an
   oversized image), and picking the smaller of two depends on that sign */
.n01 { width: min(50%,60%) }
/*! declined: only layout knows which is smaller */
.n02 { width: min(1em,2px) }
/*! declined: a substitution could be anything */
.n03 { width: min(var(--x),1px) }
/*! declined: clamp() takes exactly three */
.n04 { width: clamp(1px,2px) }
/*! declined: calc-size() leads with a basis, which is an expression this does
   not evaluate, so it is the one math function with no arity to read */
.n05 { width: calc-size(auto,size) }
/*! declined: an irrational root is not a value a stylesheet can hold */
.n06 { width: calc(sqrt(2)*1px) }
/*! declined: ...nor a power that does not multiply back */
.n07 { width: calc(pow(2,.5)*1px) }
/*! kept: a negative folds but keeps the parentheses */
.n08 { width: min(-5px,-2px) }

/* abs(), sign() and hypot() — the same machinery, three more meanings. */

/*! math: abs() drops the sign */
.a01 { width: abs(-5px) }
/*! math: ...and leaves a positive alone */
.a02 { width: abs(5px) }
/*! math: sign() is the one that changes the unit — a sign is a number */
.a03 { z-index: sign(5px) }
/*! math: ...and a negative one keeps its parentheses */
.a04 { z-index: sign(-5px) }
/*! math: hypot() where the root is exact */
.a05 { width: hypot(3px,4px) }
/*! math: ...however many arguments, and in whichever unit */
.a06 { width: hypot(6px,8px,0px) }
/*! math: ...including units fixed against each other */
.a07 { width: hypot(3in,4in) }
/*! declined: hypot() is irrational for most inputs */
.a08 { width: hypot(1px,1px) }
/*! declined: abs() of a percentage depends on the basis sign */
.a09 { width: abs(-50%) }
/*! math: a relative unit still has a known sign — every length unit scales by
   a positive factor, so abs() only has to drop the minus */
.a10 { width: abs(-1em) }

/* round(), mod() and rem() — the stepped-value functions (CSS Values 4 §10.6).
   round()'s optional strategy is read off `<rounding-strategy>`, so the four
   keywords are the grammar's, not a list kept here. */

/*! stepped: round() to the nearest step, a tie going toward positive infinity */
.p01 { margin-left: round(5px,2px) }
/*! stepped: ...and each of the three named strategies */
.p02 { margin-left: round(up,4.5px,2px) }
/*! stepped: down is the floor, so a negative goes further from zero */
.p03 { margin-left: round(down,-4.5px,2px) }
/*! stepped: to-zero truncates instead */
.p04 { margin-left: round(to-zero,5.5px,2px) }
/*! stepped: nearest may be named explicitly */
.p05 { margin-left: round(nearest,5.5px,1px) }
/*! stepped: mod() takes the divisor's sign */
.p06 { margin-left: mod(-7px,3px) }
/*! stepped: rem() takes the dividend's */
.p07 { margin-left: rem(-7px,3px) }
/*! stepped: ...which is the difference between them */
.p08 { margin-left: mod(7px,-3px) }

/*! declined: exactly on a step is where engines part company — Chromium reads
   `round(down,10cm,2cm)` as `8cm` and `mod(10px,-2px)` as `-2px`, both a whole
   step off the exact answer */
.q01 { margin-left: round(4px,2px) }
/*! declined: ...the same boundary for mod() */
.q02 { margin-left: mod(10px,-2px) }
/*! declined: ...and for rem() */
.q03 { margin-left: rem(10px,2px) }
/*! declined: a zero step is NaN, which engines render differently */
.q04 { margin-left: round(5px,0px) }
/*! declined: a negative step is not reasoned about */
.q05 { margin-left: round(5px,-2px) }
/*! declined: two units only layout can compare */
.q06 { margin-left: round(5em,2px) }
/*! kept as written: a unit rewrite that holds anywhere else does not hold in a
   step function, so the arguments keep the unit they were given */
.q07 { margin-left: round(down,4.5cm,1.5cm) }

/* sqrt(), pow(), log(), exp() and the trig functions. What each means is written
   in the minifier; where the answer is not a value a stylesheet can hold — an
   irrational root, a transcendental logarithm, sine an odd eighth turn from zero
   — the expression stays as it was. */

/*! exact: a root that squares back */
.e01 { width: calc(sqrt(2.25)*1px) }
/*! exact: a whole power, multiplied out */
.e02 { width: calc(pow(2,3)*1px) }
/*! exact: ...including a negative exponent */
.e03 { width: calc(pow(2,-2)*1px) }
/*! exact: a logarithm that lands on a whole power of its base */
.e04 { width: calc(log(8,2)*1px) }
/*! exact: ...and a base of zero is one such, since `ln(1)/ln(0)` is `-0` and
   `0` to that power is the `1` it came from */
.e04a { width: calc(log(1,0)*1px) }
/*! exact: e to the zero */
.e05 { width: calc(exp(0)*1px) }
/*! trig: a quarter turn, in whichever unit spells one */
.e06 { width: calc(sin(90deg)*1px) }
/*! trig: ...and the same angle written as a turn */
.e07 { width: calc(sin(.25turn)*1px) }
/*! trig: a half turn is where cosine is negative, so it keeps its parentheses */
.e08 { width: calc(cos(180deg)*1px) }
/*! trig: tangent is rational an eighth turn apart, where sine and cosine are not */
.e09 { width: calc(tan(45deg)*1px) }
/*! trig: the inverse functions answer with an angle, in degrees */
.e10 { rotate: asin(1) }
/*! trig: ...and atan2() reads a ratio, so two lengths answer the same way */
.e11 { rotate: atan2(1px,-1px) }
/*! exact: a folded operand of an outer expression is printed bare — no property
   judges it in here, which is what lets the outer fold go on */
.e12 { width: min(sqrt(4)*1px,3px) }

/*! declined: sine is irrational an odd eighth turn from zero */
.f01 { width: calc(sin(30deg)*1px) }
/*! declined: ...and tangent has an asymptote on the odd quarters */
.f02 { width: calc(tan(90deg)*1px) }
/*! declined: a radian is a whole number of eighth turns only at zero */
.f03 { width: calc(cos(1rad)*1px) }
/*! declined: `e` is not a double, so no other power of it can be written down */
.f04 { width: calc(exp(1)*1px) }
/*! declined: a base of one makes the quotient `0/0`, which is not a number */
.f04a { width: calc(log(1,1)*1px) }
/*! declined: ...and a negative base has no logarithm at all */
.f04b { width: calc(log(1,-2)*1px) }
/*! declined: the inverse functions answer with a whole number of degrees at
   three arguments only */
.f05 { rotate: asin(.5) }
/*! math: `calc-size()` is not read as a whole — its basis is no expression —
   but the size it is given still reduces */
.c20 { width: calc-size(auto, 10px + 5px) }
/*! math: ...at every depth it nests */
.c21 { width: calc-size(calc-size(auto, 1px + 2px), 3px + 4px) }
/*! declined: `size` is not a constant, so nothing reduces */
.c22 { width: calc-size(auto, size + 10px) }
/*! declined: a fold inside a stepped function would re-unit its result, which is
   the rewrite that function's own arguments refuse */
.q08 { margin-left: round(down,calc(4.5cm),calc(1.5cm)) }
/*! declined: ...including another stepped function */
.q09 { margin-left: round(down,round(down,10cm,3cm),1cm) }