[css-values-5] allow container queries in `if()` if-test

[bigandy]

Spec: https://drafts.csswg.org/css-values-5/#if-notation

Looking at the spec I can see that style queries and media queries are supported but not container size queries.

I would like to be able to style based on the dimensions of the container:

background-color: if(
    container(width > 1000px): green;
    container(width > 800px): orange;
    container(width > 600px): red;
    else: rebeccapurple;
);

this would eliminate a lot of repetition compared to without if():

background-color: rebeccapurple;

@container (width > 600px) {
    background-color: red;
}

@container (width > 800px) {
    background-color: orange;
}

@container (width > 1000px) {
    background-color: green;
}

[kizu]

I am not sure we want/can have them in the same way we can have style() — the style() is evaluated for the element itself, so if we were to replicate it for container queries, we'd have to compare the dimension of the element itself, and that could lead to many circularity issues. And doing this check for the container will mean inconsistency, which can be confusing.

That said, in #11104 it was resolved to add simple calc()-like comparisons, where we could do something like if((100cqw > 600px): …) — use container query length units and compare them with other values, which should mostly replicate what container size queries can achieve.

Right now we would be missing an ability to get values from named containers, but this should be covered by #7858

[bigandy]

@kizu yes thanks for this! I've tested out in latest Chrome Canary (Now that style query range is supported) and the following works:

body {
	background-color: if(
		style(100cqi > 1000px): green;
		style(100cqi > 800px): orange;
		style(100cqi > 600px): red;
		else: rebeccapurple;
	);
}

see in Chrome Canary latest https://codepen.io/bigandy/pen/qEOGGQB