[csswg-drafts] [css-values-5] Unit cycles via if() (#13189)

andruud has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-values-5] Unit cycles via if() ==
I think we're missing some cycle detection handling for `if()`. In the following example, the `writing-mode` depends on the computed `font-size`, and vice-versa:

```css
:root {
  width: 100px;
  height: 80px;
}

div {
  writing-mode: if(
    style(1em = 10px): vertical-rl;
    else: horizontal-tb);
  font-size: calc(100vi / 10);
}
```

As of https://github.com/w3c/csswg-drafts/issues/6026, we can run into cycles via `overflow`, `scrollbar-gutter`, and `scrollbar-width` as well, e.g.:

```css
:root {
  width: 100px;
  overflow: if(
    style(100px = 100vw): scroll;
    else: hidden;
  );
}
```

We should be able to fix this by [guarding](https://drafts.csswg.org/css-values-5/#guarded) the appropriate substitution context for a given unit seen in the `<style-query>`. For example, `style(1em = ...)` would guard `font-size`; `style(1vw = ...)` would guard `scrollbar-gutter`, and `scrollbar-width` on the root element; `style(1vi = ...)` would guard `writing-mode`.

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/13189 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Monday, 8 December 2025 14:03:49 UTC