Search code examples
cssgoogle-chrome-devtoolscss-variables

What is a result of the calc() when one of its elements is invalid value?

In this answer Can I use the auto value with the calc() property? the author says that auto is not valid value for the calc() expression.

Ok, fine. But the problem I have is that I have a CSS custom property that I want to give a default value that will cancel the calc().

What I have is this CSS:

.terminal {
    --terminal-line: calc(var(--size, 1) * (16px / var(--pixel-density, 1)) + 1px / var(--pixel-density, 1));
    height: auto;
    /* force size when user add --rows */
    height: calc((var(--terminal-line) * var(--rows)) + (var(--padding, 10) * 2px));
}

@property --rows {
    syntax: '<number>';
    inherits: true;
}

and the custom property lack initial-value and according to Google Dev Tools it is not actually registered. So I added this:

@property --rows {
    syntax: '<number> | auto';
    inherits: true;
    initial-value: auto;
}

This seems to work as I want (tested in Firefox and Chrome). But the problem is Chrome Dev Tools.

This is how the property looks like:

enter image description here

It looks like the height is applied. Similar effect is in Firefox:

enter image description here

So the question is: what is the actual value of the height property when calc() is invalid? Is it auto from the strike through rule, or some other default when value is invalid? What that be? I want to make sure that my code is correct.

Solution

  • It depends on why it is invalid. If you literally use the "auto" value in the calc, then the value is invalid when the cascade is evaluated and it plays no part in the cascade result. So the value used is whatever wins the cascade.

    But if the "auto" value comes from the custom property, then it's "Invalid At Computed Value Time (IACVT)". This means that it can win the cascade and the value is determined as Bramus explains in the link above:

    If the property is a non-registered custom property or a registered custom property with universal syntax it gets replaced by the guaranteed-invalid value.

    In all other cases the value becomes unset, whose outcome depends on whether the property is allowed to inherit or not.

    If the property is allowed to inherit, it behaves as inherit, so it inherits the computed value from its parent.

    If the property is not allowed to inherit, it behaves as initial, falling back to the initial value.