mirror of
https://github.com/LadybirdBrowser/ladybird
synced 2026-05-03 13:02:09 +02:00
LibWeb/CSS: Simplify calculations after parsing them
If a calculation was simplified down to a single numeric node, then most of the time we can instead return a regular StyleValue, for example `calc(2px + 3px)` would be simplified down to a `5px` LengthStyleValue. This means that parse_calculated_value() can't return a CalculatedStyleValue directly, and its callers all have to handle non-calculated values as well as calculated ones. This simplification is reflected in the new test results. Serialization is not yet correct in all cases but we're closer than we were. :^)
This commit is contained in:
Sam Atkins
committed by
Andreas Kling
Andreas Kling
parent
39cefd7abf
commit
ee712bd98f
Notes:
github-actions[bot]
2025-01-30 18:32:52 +00:00
Author: https://github.com/AtkinsSJ Commit: https://github.com/LadybirdBrowser/ladybird/commit/ee712bd98f7 Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/3383
@@ -1,80 +1,80 @@
|
||||
animation-delay: 'calc(2s)' -> 'calc(2s)'
|
||||
animation-delay: 'calc(2s)' -> '2s'
|
||||
animation-delay: 'calc(2s * var(--n))' -> '4s'
|
||||
animation-duration: 'calc(2s)' -> 'calc(2s)'
|
||||
animation-duration: 'calc(2s)' -> '2s'
|
||||
animation-duration: 'calc(2s * var(--n))' -> '4s'
|
||||
animation-iteration-count: 'calc(2)' -> 'calc(2)'
|
||||
animation-iteration-count: 'calc(2)' -> '2'
|
||||
animation-iteration-count: 'calc(2 * var(--n))' -> '4'
|
||||
backdrop-filter: 'grayscale(calc(2%))' -> 'grayscale(calc(2%))'
|
||||
backdrop-filter: 'grayscale(calc(2% * var(--n)))' -> 'grayscale(calc(2% * 2))'
|
||||
backdrop-filter: 'grayscale(calc(0.02))' -> 'grayscale(calc(0.02))'
|
||||
backdrop-filter: 'grayscale(calc(0.02 * var(--n)))' -> 'grayscale(calc(0.02 * 2))'
|
||||
background-position-x: 'calc(2px)' -> 'calc(2px)'
|
||||
background-position-x: 'calc(2px * var(--n))' -> 'calc(2px * 2)'
|
||||
background-position-y: 'calc(2%)' -> 'calc(2%)'
|
||||
background-position-y: 'calc(2% * var(--n))' -> '4%'
|
||||
background-size: 'calc(2px * var(--n)) calc(2%)' -> 'calc(2px * 2) 2%'
|
||||
background-size: 'calc(2px * var(--n)) calc(2% * var(--n))' -> 'calc(2px * 2) 4%'
|
||||
border-bottom-left-radius: 'calc(2px)' -> 'calc(2px)'
|
||||
border-bottom-left-radius: 'calc(2px * var(--n))' -> 'calc(2px * 2)'
|
||||
border-bottom-right-radius: 'calc(2%)' -> 'calc(2%)'
|
||||
border-bottom-right-radius: 'calc(2% * var(--n))' -> '4%'
|
||||
border-bottom-width: 'calc(2px)' -> 'calc(2px)'
|
||||
border-bottom-width: 'calc(2px * var(--n))' -> 'calc(2px * 2)'
|
||||
border-left-width: 'calc(2px)' -> 'calc(2px)'
|
||||
border-left-width: 'calc(2px * var(--n))' -> 'calc(2px * 2)'
|
||||
border-right-width: 'calc(2px)' -> 'calc(2px)'
|
||||
border-right-width: 'calc(2px * var(--n))' -> 'calc(2px * 2)'
|
||||
border-spacing: 'calc(2px)' -> 'calc(2px)'
|
||||
border-spacing: 'calc(2px * var(--n))' -> 'calc(2px * 2)'
|
||||
border-top-left-radius: 'calc(2px)' -> 'calc(2px)'
|
||||
border-top-left-radius: 'calc(2px * var(--n))' -> 'calc(2px * 2)'
|
||||
border-top-right-radius: 'calc(2%)' -> 'calc(2%)'
|
||||
border-top-right-radius: 'calc(2% * var(--n))' -> '4%'
|
||||
border-top-width: 'calc(2px)' -> 'calc(2px)'
|
||||
border-top-width: 'calc(2px * var(--n))' -> 'calc(2px * 2)'
|
||||
bottom: 'calc(2px)' -> 'calc(2px)'
|
||||
bottom: 'calc(2px * var(--n))' -> 'calc(2px * 2)'
|
||||
clip-path: 'polygon(calc(0px) calc(2px), calc(2px) calc(0px), calc(2px) calc(2px))' -> 'polygon(nonzero, calc(0px) calc(2px), calc(2px) calc(0px), calc(2px) calc(2px))'
|
||||
clip-path: 'polygon(calc(0px * var(--n)) calc(2px * var(--n)), calc(2px * var(--n)) calc(0px * var(--n)), calc(2px * var(--n)) calc(2px * var(--n)))' -> 'polygon(nonzero, calc(0px * 2) calc(2px * 2), calc(2px * 2) calc(0px * 2), calc(2px * 2) calc(2px * 2))'
|
||||
clip-path: 'polygon(calc(0%) calc(2%), calc(2%) calc(0%), calc(2%) calc(2%))' -> 'polygon(nonzero, calc(0%) calc(2%), calc(2%) calc(0%), calc(2%) calc(2%))'
|
||||
clip-path: 'polygon(calc(0% * var(--n)) calc(2% * var(--n)), calc(2% * var(--n)) calc(0% * var(--n)), calc(2% * var(--n)) calc(2% * var(--n)))' -> 'polygon(nonzero, calc(0% * 2) calc(2% * 2), calc(2% * 2) calc(0% * 2), calc(2% * 2) calc(2% * 2))'
|
||||
column-count: 'calc(2)' -> 'calc(2)'
|
||||
backdrop-filter: 'grayscale(calc(2%))' -> 'grayscale(2%)'
|
||||
backdrop-filter: 'grayscale(calc(2% * var(--n)))' -> 'grayscale(4%)'
|
||||
backdrop-filter: 'grayscale(calc(0.02))' -> 'grayscale(0.02)'
|
||||
backdrop-filter: 'grayscale(calc(0.02 * var(--n)))' -> 'grayscale(0.04)'
|
||||
background-position-x: 'calc(2px)' -> '2px'
|
||||
background-position-x: 'calc(2px * var(--n))' -> '4px'
|
||||
background-position-y: 'calc(2%)' -> '2%'
|
||||
background-position-y: 'calc(2% * var(--n))' -> 'calc(2% * 2)'
|
||||
background-size: 'calc(2px * var(--n)) calc(2%)' -> '4px 2%'
|
||||
background-size: 'calc(2px * var(--n)) calc(2% * var(--n))' -> '4px calc(2% * 2)'
|
||||
border-bottom-left-radius: 'calc(2px)' -> '2px'
|
||||
border-bottom-left-radius: 'calc(2px * var(--n))' -> '4px'
|
||||
border-bottom-right-radius: 'calc(2%)' -> '2%'
|
||||
border-bottom-right-radius: 'calc(2% * var(--n))' -> 'calc(2% * 2)'
|
||||
border-bottom-width: 'calc(2px)' -> '2px'
|
||||
border-bottom-width: 'calc(2px * var(--n))' -> '4px'
|
||||
border-left-width: 'calc(2px)' -> '2px'
|
||||
border-left-width: 'calc(2px * var(--n))' -> '4px'
|
||||
border-right-width: 'calc(2px)' -> '2px'
|
||||
border-right-width: 'calc(2px * var(--n))' -> '4px'
|
||||
border-spacing: 'calc(2px)' -> '2px'
|
||||
border-spacing: 'calc(2px * var(--n))' -> '4px'
|
||||
border-top-left-radius: 'calc(2px)' -> '2px'
|
||||
border-top-left-radius: 'calc(2px * var(--n))' -> '4px'
|
||||
border-top-right-radius: 'calc(2%)' -> '2%'
|
||||
border-top-right-radius: 'calc(2% * var(--n))' -> 'calc(2% * 2)'
|
||||
border-top-width: 'calc(2px)' -> '2px'
|
||||
border-top-width: 'calc(2px * var(--n))' -> '4px'
|
||||
bottom: 'calc(2px)' -> '2px'
|
||||
bottom: 'calc(2px * var(--n))' -> '4px'
|
||||
clip-path: 'polygon(calc(0px) calc(2px), calc(2px) calc(0px), calc(2px) calc(2px))' -> 'polygon(nonzero, 0px 2px, 2px 0px, 2px 2px)'
|
||||
clip-path: 'polygon(calc(0px * var(--n)) calc(2px * var(--n)), calc(2px * var(--n)) calc(0px * var(--n)), calc(2px * var(--n)) calc(2px * var(--n)))' -> 'polygon(nonzero, 0px 4px, 4px 0px, 4px 4px)'
|
||||
clip-path: 'polygon(calc(0%) calc(2%), calc(2%) calc(0%), calc(2%) calc(2%))' -> 'polygon(nonzero, 0% 2%, 2% 0%, 2% 2%)'
|
||||
clip-path: 'polygon(calc(0% * var(--n)) calc(2% * var(--n)), calc(2% * var(--n)) calc(0% * var(--n)), calc(2% * var(--n)) calc(2% * var(--n)))' -> 'polygon(nonzero, 0% 4%, 4% 0%, 4% 4%)'
|
||||
column-count: 'calc(2)' -> '2'
|
||||
column-count: 'calc(2 * var(--n))' -> '4'
|
||||
column-gap: 'calc(2px)' -> 'calc(2px)'
|
||||
column-gap: 'calc(2px * var(--n))' -> 'calc(2px * 2)'
|
||||
column-width: 'calc(2px)' -> 'calc(2px)'
|
||||
column-width: 'calc(2px * var(--n))' -> 'calc(2px * 2)'
|
||||
counter-increment: 'foo calc(2)' -> 'foo calc(2)'
|
||||
column-gap: 'calc(2px)' -> '2px'
|
||||
column-gap: 'calc(2px * var(--n))' -> '4px'
|
||||
column-width: 'calc(2px)' -> '2px'
|
||||
column-width: 'calc(2px * var(--n))' -> '4px'
|
||||
counter-increment: 'foo calc(2)' -> 'foo 2'
|
||||
counter-increment: 'foo calc(2 * var(--n))' -> 'foo 4'
|
||||
counter-reset: 'foo calc(2)' -> 'foo calc(2)'
|
||||
counter-reset: 'foo calc(2)' -> 'foo 2'
|
||||
counter-reset: 'foo calc(2 * var(--n))' -> 'foo 4'
|
||||
counter-set: 'foo calc(2)' -> 'foo calc(2)'
|
||||
counter-set: 'foo calc(2)' -> 'foo 2'
|
||||
counter-set: 'foo calc(2 * var(--n))' -> 'foo 4'
|
||||
cx: 'calc(2px)' -> 'calc(2px)'
|
||||
cx: 'calc(2px * var(--n))' -> 'calc(2px * 2)'
|
||||
cy: 'calc(2%)' -> 'calc(2%)'
|
||||
cy: 'calc(2% * var(--n))' -> '4%'
|
||||
fill-opacity: 'calc(2)' -> 'calc(2)'
|
||||
cx: 'calc(2px)' -> '2px'
|
||||
cx: 'calc(2px * var(--n))' -> '4px'
|
||||
cy: 'calc(2%)' -> '2%'
|
||||
cy: 'calc(2% * var(--n))' -> 'calc(2% * 2)'
|
||||
fill-opacity: 'calc(2)' -> '2'
|
||||
fill-opacity: 'calc(2 * var(--n))' -> '4'
|
||||
filter: 'grayscale(calc(2%))' -> 'grayscale(calc(2%))'
|
||||
filter: 'grayscale(calc(2% * var(--n)))' -> 'grayscale(calc(2% * 2))'
|
||||
filter: 'grayscale(calc(0.02))' -> 'grayscale(calc(0.02))'
|
||||
filter: 'grayscale(calc(0.02 * var(--n)))' -> 'grayscale(calc(0.02 * 2))'
|
||||
flex-basis: 'calc(2px)' -> 'calc(2px)'
|
||||
flex-basis: 'calc(2px * var(--n))' -> 'calc(2px * 2)'
|
||||
flex-grow: 'calc(2)' -> 'calc(2)'
|
||||
filter: 'grayscale(calc(2%))' -> 'grayscale(2%)'
|
||||
filter: 'grayscale(calc(2% * var(--n)))' -> 'grayscale(4%)'
|
||||
filter: 'grayscale(calc(0.02))' -> 'grayscale(0.02)'
|
||||
filter: 'grayscale(calc(0.02 * var(--n)))' -> 'grayscale(0.04)'
|
||||
flex-basis: 'calc(2px)' -> '2px'
|
||||
flex-basis: 'calc(2px * var(--n))' -> '4px'
|
||||
flex-grow: 'calc(2)' -> '2'
|
||||
flex-grow: 'calc(2 * var(--n))' -> '4'
|
||||
flex-shrink: 'calc(2)' -> 'calc(2)'
|
||||
flex-shrink: 'calc(2)' -> '2'
|
||||
flex-shrink: 'calc(2 * var(--n))' -> '4'
|
||||
font-feature-settings: ''test' calc(2)' -> '"test" calc(2)'
|
||||
font-feature-settings: ''test' calc(2)' -> '"test" 2'
|
||||
font-feature-settings: ''test' calc(2 * var(--n))' -> '"test" 4'
|
||||
font-size: 'calc(2px)' -> '2px'
|
||||
font-size: 'calc(2px * var(--n))' -> '4px'
|
||||
font-variation-settings: ''test' calc(2)' -> '"test" calc(2)'
|
||||
font-variation-settings: ''test' calc(2)' -> '"test" 2'
|
||||
font-variation-settings: ''test' calc(2 * var(--n))' -> '"test" 4'
|
||||
font-weight: 'calc(2)' -> '2'
|
||||
font-weight: 'calc(2 * var(--n))' -> '4'
|
||||
font-width: 'calc(2%)' -> 'calc(2%)'
|
||||
font-width: 'calc(2%)' -> '2%'
|
||||
font-width: 'calc(2% * var(--n))' -> '4%'
|
||||
grid-auto-columns: 'calc(2fr)' -> 'auto'
|
||||
grid-auto-columns: 'calc(2fr * var(--n))' -> 'auto'
|
||||
@@ -86,85 +86,85 @@ grid-template-rows: 'calc(2fr)' -> 'auto'
|
||||
grid-template-rows: 'calc(2fr * var(--n))' -> 'auto'
|
||||
height: 'calc(2px)' -> '2px'
|
||||
height: 'calc(2px * var(--n))' -> '4px'
|
||||
left: 'calc(2px)' -> 'calc(2px)'
|
||||
left: 'calc(2px * var(--n))' -> 'calc(2px * 2)'
|
||||
letter-spacing: 'calc(2px)' -> 'calc(2px)'
|
||||
letter-spacing: 'calc(2px * var(--n))' -> 'calc(2px * 2)'
|
||||
left: 'calc(2px)' -> '2px'
|
||||
left: 'calc(2px * var(--n))' -> '4px'
|
||||
letter-spacing: 'calc(2px)' -> '2px'
|
||||
letter-spacing: 'calc(2px * var(--n))' -> '4px'
|
||||
line-height: 'calc(2)' -> '32px'
|
||||
line-height: 'calc(2 * var(--n))' -> '64px'
|
||||
margin-bottom: 'calc(2px)' -> 'calc(2px)'
|
||||
margin-bottom: 'calc(2px * var(--n))' -> 'calc(2px * 2)'
|
||||
margin-left: 'calc(2%)' -> 'calc(2%)'
|
||||
margin-left: 'calc(2% * var(--n))' -> '4%'
|
||||
margin-right: 'calc(2px)' -> 'calc(2px)'
|
||||
margin-right: 'calc(2px * var(--n))' -> 'calc(2px * 2)'
|
||||
margin-top: 'calc(2%)' -> 'calc(2%)'
|
||||
margin-top: 'calc(2% * var(--n))' -> '4%'
|
||||
margin-bottom: 'calc(2px)' -> '2px'
|
||||
margin-bottom: 'calc(2px * var(--n))' -> '4px'
|
||||
margin-left: 'calc(2%)' -> '2%'
|
||||
margin-left: 'calc(2% * var(--n))' -> 'calc(2% * 2)'
|
||||
margin-right: 'calc(2px)' -> '2px'
|
||||
margin-right: 'calc(2px * var(--n))' -> '4px'
|
||||
margin-top: 'calc(2%)' -> '2%'
|
||||
margin-top: 'calc(2% * var(--n))' -> 'calc(2% * 2)'
|
||||
math-depth: 'calc(2)' -> '2'
|
||||
math-depth: 'calc(2 * var(--n))' -> '4'
|
||||
max-height: 'calc(2px)' -> 'calc(2px)'
|
||||
max-height: 'calc(2px * var(--n))' -> 'calc(2px * 2)'
|
||||
max-width: 'calc(2%)' -> 'calc(2%)'
|
||||
max-width: 'calc(2% * var(--n))' -> '4%'
|
||||
min-height: 'calc(2px)' -> 'calc(2px)'
|
||||
min-height: 'calc(2px * var(--n))' -> 'calc(2px * 2)'
|
||||
min-width: 'calc(2%)' -> 'calc(2%)'
|
||||
min-width: 'calc(2% * var(--n))' -> '4%'
|
||||
opacity: 'calc(2)' -> 'calc(2)'
|
||||
max-height: 'calc(2px)' -> '2px'
|
||||
max-height: 'calc(2px * var(--n))' -> '4px'
|
||||
max-width: 'calc(2%)' -> '2%'
|
||||
max-width: 'calc(2% * var(--n))' -> 'calc(2% * 2)'
|
||||
min-height: 'calc(2px)' -> '2px'
|
||||
min-height: 'calc(2px * var(--n))' -> '4px'
|
||||
min-width: 'calc(2%)' -> '2%'
|
||||
min-width: 'calc(2% * var(--n))' -> 'calc(2% * 2)'
|
||||
opacity: 'calc(2)' -> '2'
|
||||
opacity: 'calc(2 * var(--n))' -> '4'
|
||||
order: 'calc(2)' -> 'calc(2)'
|
||||
order: 'calc(2)' -> '2'
|
||||
order: 'calc(2 * var(--n))' -> '4'
|
||||
outline-offset: 'calc(2px)' -> 'calc(2px)'
|
||||
outline-offset: 'calc(2px * var(--n))' -> 'calc(2px * 2)'
|
||||
outline-width: 'calc(2px)' -> 'calc(2px)'
|
||||
outline-width: 'calc(2px * var(--n))' -> 'calc(2px * 2)'
|
||||
padding-bottom: 'calc(2px)' -> 'calc(2px)'
|
||||
padding-bottom: 'calc(2px * var(--n))' -> 'calc(2px * 2)'
|
||||
padding-left: 'calc(2%)' -> 'calc(2%)'
|
||||
padding-left: 'calc(2% * var(--n))' -> '4%'
|
||||
padding-right: 'calc(2px)' -> 'calc(2px)'
|
||||
padding-right: 'calc(2px * var(--n))' -> 'calc(2px * 2)'
|
||||
padding-top: 'calc(2%)' -> 'calc(2%)'
|
||||
padding-top: 'calc(2% * var(--n))' -> '4%'
|
||||
r: 'calc(2px)' -> 'calc(2px)'
|
||||
r: 'calc(2px * var(--n))' -> 'calc(2px * 2)'
|
||||
right: 'calc(2%)' -> 'calc(2%)'
|
||||
right: 'calc(2% * var(--n))' -> '4%'
|
||||
row-gap: 'calc(2%)' -> 'calc(2%)'
|
||||
row-gap: 'calc(2% * var(--n))' -> '4%'
|
||||
rx: 'calc(2px)' -> 'calc(2px)'
|
||||
rx: 'calc(2px * var(--n))' -> 'calc(2px * 2)'
|
||||
ry: 'calc(2%)' -> 'calc(2%)'
|
||||
ry: 'calc(2% * var(--n))' -> '4%'
|
||||
stop-opacity: 'calc(2)' -> 'calc(2)'
|
||||
outline-offset: 'calc(2px)' -> '2px'
|
||||
outline-offset: 'calc(2px * var(--n))' -> '4px'
|
||||
outline-width: 'calc(2px)' -> '2px'
|
||||
outline-width: 'calc(2px * var(--n))' -> '4px'
|
||||
padding-bottom: 'calc(2px)' -> '2px'
|
||||
padding-bottom: 'calc(2px * var(--n))' -> '4px'
|
||||
padding-left: 'calc(2%)' -> '2%'
|
||||
padding-left: 'calc(2% * var(--n))' -> 'calc(2% * 2)'
|
||||
padding-right: 'calc(2px)' -> '2px'
|
||||
padding-right: 'calc(2px * var(--n))' -> '4px'
|
||||
padding-top: 'calc(2%)' -> '2%'
|
||||
padding-top: 'calc(2% * var(--n))' -> 'calc(2% * 2)'
|
||||
r: 'calc(2px)' -> '2px'
|
||||
r: 'calc(2px * var(--n))' -> '4px'
|
||||
right: 'calc(2%)' -> '2%'
|
||||
right: 'calc(2% * var(--n))' -> 'calc(2% * 2)'
|
||||
row-gap: 'calc(2%)' -> '2%'
|
||||
row-gap: 'calc(2% * var(--n))' -> 'calc(2% * 2)'
|
||||
rx: 'calc(2px)' -> '2px'
|
||||
rx: 'calc(2px * var(--n))' -> '4px'
|
||||
ry: 'calc(2%)' -> '2%'
|
||||
ry: 'calc(2% * var(--n))' -> 'calc(2% * 2)'
|
||||
stop-opacity: 'calc(2)' -> '2'
|
||||
stop-opacity: 'calc(2 * var(--n))' -> '4'
|
||||
stroke-opacity: 'calc(2%)' -> 'calc(2%)'
|
||||
stroke-opacity: 'calc(2% * var(--n))' -> '4%'
|
||||
stroke-width: 'calc(2px)' -> 'calc(2px)'
|
||||
stroke-width: 'calc(2px * var(--n))' -> 'calc(2px * 2)'
|
||||
tab-size: 'calc(2px)' -> 'calc(2px)'
|
||||
tab-size: 'calc(2px * var(--n))' -> 'calc(2px * 2)'
|
||||
text-decoration-thickness: 'calc(2px)' -> 'calc(2px)'
|
||||
text-decoration-thickness: 'calc(2px * var(--n))' -> 'calc(2px * 2)'
|
||||
text-indent: 'calc(2%)' -> 'calc(2%)'
|
||||
text-indent: 'calc(2% * var(--n))' -> '4%'
|
||||
top: 'calc(2%)' -> 'calc(2%)'
|
||||
top: 'calc(2% * var(--n))' -> '4%'
|
||||
transform-origin: 'calc(2px) calc(2%)' -> 'calc(2px) calc(2%)'
|
||||
transform-origin: 'calc(2px * var(--n)) calc(2% * var(--n))' -> 'calc(2px * 2) 4%'
|
||||
transition-delay: 'calc(2s)' -> 'calc(2s)'
|
||||
stroke-opacity: 'calc(2%)' -> '2%'
|
||||
stroke-opacity: 'calc(2% * var(--n))' -> 'calc(2% * 2)'
|
||||
stroke-width: 'calc(2px)' -> '2px'
|
||||
stroke-width: 'calc(2px * var(--n))' -> '4px'
|
||||
tab-size: 'calc(2px)' -> '2px'
|
||||
tab-size: 'calc(2px * var(--n))' -> '4px'
|
||||
text-decoration-thickness: 'calc(2px)' -> '2px'
|
||||
text-decoration-thickness: 'calc(2px * var(--n))' -> '4px'
|
||||
text-indent: 'calc(2%)' -> '2%'
|
||||
text-indent: 'calc(2% * var(--n))' -> 'calc(2% * 2)'
|
||||
top: 'calc(2%)' -> '2%'
|
||||
top: 'calc(2% * var(--n))' -> 'calc(2% * 2)'
|
||||
transform-origin: 'calc(2px) calc(2%)' -> '2px 2%'
|
||||
transform-origin: 'calc(2px * var(--n)) calc(2% * var(--n))' -> '4px calc(2% * 2)'
|
||||
transition-delay: 'calc(2s)' -> '2s'
|
||||
transition-delay: 'calc(2s * var(--n))' -> '4s'
|
||||
transition-duration: 'calc(2s)' -> 'calc(2s)'
|
||||
transition-duration: 'calc(2s)' -> '2s'
|
||||
transition-duration: 'calc(2s * var(--n))' -> '4s'
|
||||
vertical-align: 'calc(2px)' -> 'calc(2px)'
|
||||
vertical-align: 'calc(2px * var(--n))' -> 'calc(2px * 2)'
|
||||
width: 'calc(2%)' -> '15.6875px'
|
||||
width: 'calc(2% * var(--n))' -> '31.35938px'
|
||||
word-spacing: 'calc(2px)' -> 'calc(2px)'
|
||||
word-spacing: 'calc(2px * var(--n))' -> 'calc(2px * 2)'
|
||||
x: 'calc(2px)' -> 'calc(2px)'
|
||||
x: 'calc(2px * var(--n))' -> 'calc(2px * 2)'
|
||||
y: 'calc(2%)' -> 'calc(2%)'
|
||||
y: 'calc(2% * var(--n))' -> '4%'
|
||||
z-index: 'calc(2)' -> 'calc(2)'
|
||||
vertical-align: 'calc(2px)' -> '2px'
|
||||
vertical-align: 'calc(2px * var(--n))' -> '4px'
|
||||
width: 'calc(2%)' -> '15.67188px'
|
||||
width: 'calc(2% * var(--n))' -> '31.375px'
|
||||
word-spacing: 'calc(2px)' -> '2px'
|
||||
word-spacing: 'calc(2px * var(--n))' -> '4px'
|
||||
x: 'calc(2px)' -> '2px'
|
||||
x: 'calc(2px * var(--n))' -> '4px'
|
||||
y: 'calc(2%)' -> '2%'
|
||||
y: 'calc(2% * var(--n))' -> 'calc(2% * 2)'
|
||||
z-index: 'calc(2)' -> '2'
|
||||
z-index: 'calc(2 * var(--n))' -> '4'
|
||||
|
||||
Reference in New Issue
Block a user