This page injects a stylesheet with duplicate declarations for the same properties, then reads back what the CSSOM actually retained. Open this in different browsers to compare results.
| Property | Declaration 1 | Declaration 2 | CSSOM retained | Winner |
|---|
This browser supports @function. The CSSOM retained --double(1rem) for font-size and discarded
clamp(1rem, 2vw, 2rem). Only the function call will be evaluated during
rendering — the clamp() expression and its viewport-relative
2vw unit no longer exist in the object model and will never be resolved.
This browser does not support @function. The --double(1rem) declaration was invalid at parse time and was stripped
from the CSSOM entirely. Only clamp(1rem, 2vw, 2rem) was retained for
font-size. The function call was never stored, and its value will never be
computed.
The control test (color) confirms that when both declarations are valid, the
second one wins by source order — standard cascade behaviour. The first declaration
(red) was discarded.
In both scenarios, exactly one declaration per property survives in the CSSOM. The losing declaration's values — including any viewport-relative units — are never resolved by the rendering engine.
@function --double(--value <length>) returns <length> {
result: calc(var(--value) * 2);
}
.test-element {
/* Test 1: @function fallback */
font-size: clamp(1rem, 2vw, 2rem);
font-size: --double(1rem);
/* Test 2: control — both values supported */
color: red;
color: oklch(0.5 0.2 240);
}