Skip to content

[css-color][css-values] Parsing/Serialization behavior for rgb/hsl/hwb colors with calc() containing font/container/viewport relative lengths #10730

@weinig

Description

@weinig

I recently learned that any calc() value can contain font/container/viewport relative lengths, as they can be used from with a sign() math function. One implication of this seems to be that eager evaluation of calc() at parse time for legacy colors can't always complete. For a concrete example, consider:

background-color: rgb(calc(90 + (90 * sign(1vw + 2em))), 0, 0);

I don't believe that has a value until style resolution since we don't know if the expression 1vw + 2em will be positive or negative.

My previous understanding of the rules for sRGB color types (rgb/hsl/hwb) is that they serialize without calc() at all levels (specified, computed, etc), but I am not sure what to do when the calc can't be fully resolved at specified value time.

The language in https://drafts.csswg.org/css-color-4/#resolving-sRGB-values I think actually allows serializing the calc() in these cases, since it uses the phrasing: "[...] when calc() in sRGB colors resolves to a single value [...]", but I wanted to make sure that was the intention.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions