[css-transforms] transform-box:stroke-box with vector-effect:non-scaling-stroke creates a cyclical dependency

[jwatt]

A cyclical dependency can be created if transform-box:stroke and vector-effect:non-scaling-stroke are both used on the same stroked SVG element. (And by implication, transform-box:border-box too, since the spec says "For SVG elements ... the used value for border-box is stroke-box.")

To calculate the stroke bounds of an element with vector-effect:non-scaling-stroke we need to resolve the transform to the element's outer-<svg>, but to resolve that transform when the element has transform-box:stroke-box requires the element's stroke bounds if the transform contains percentage values.

I don't think there's an ideal way to break this cyclical dependency, but I would suggest breaking it by requiring implementations to use fill-box in place of stroke-box (or border-box) if the element has vector-effect:non-scaling-stroke. (Probably regardless of whether it has a transform that contains percentage values, just to make implementation reasonable.)

[longsonr]

This also applies to offset: ray when combined with non-scaling-stroke.

[BorisChiou]

Yes. This may have impact on any CSS property which uses stroke-box as the reference box with vector-effect:non-scaling-stroke (e.g. https://drafts.fxtf.org/motion-1/#offset-path-property).

[svgeesus]

I would suggest breaking it by requiring implementations to use fill-box in place of stroke-box (or border-box) if the element has vector-effect:non-scaling-stroke. (Probably regardless of whether it has a transform that contains percentage values, just to make implementation reasonable.)

That solution (with fill-box) seems like a reasonable option to me. Most actual uses of non-scaling stroke are "a thin stroke, not so small as to be invisible, and not all chonky when you zoom in" so the difference between stroke-box and fill-box would typically only be a couple of px anyway.

[css-meeting-bot]

The CSS Working Group just discussed [css-transforms] `transform-box:stroke-box` with `vector-effect:non-scaling-stroke` creates a cyclical dependency, and agreed to the following:

• RESOLVED: If the tranform-box is stroke-box and the element has non-scaling-stroke, then the used transform-box is fill-box.

The full IRC log of that discussion

<fantasai> emilio: Several transform-related things
<fantasai> emilio: You end up in a circular dependency where you need the containing transform
<fantasai> emilio: What we did for now is what was suggested, which was if you set transform-box: stroke-box, we use the fill-box if you have non-scaling stroke
<fantasai> emilio: other solutions welcome
<fantasai> TabAtkins: [relays ChrisL's comment]
<fantasai> https://github.com//issues/9640#issuecomment-1905952267
<fantasai> emilio: In situations where computing a transform-box specified as stroke-box creates a cyclical dependency, use fill-box instead
<fantasai> TabAtkins: if you set `transform-box: stroke-box` and don't use percentages, then you don't have a dependency
<fantasai> TabAtkins: but we want to do this computation fix even if those observable things
<fantasai> emilio: Let's do it always
<dbaron> emilio: you could see it through transform-origin
<fantasai> dbaron: I don't think you want the cyclical wording into the spec, you want to detail the cases in the spec
<fantasai> dholbert: Isn't it just the `vector-effect: non-scaling-stroke` case?
<fantasai> dbaron: any dependency on descendants?
<fantasai> dholbert: no
<fantasai> TabAtkins: also affects offset property
<dbaron> s/also affects/this should apply to other things that use stroke-box on the element, such as the/
<fantasai> PROPOSED: If the specified tranform-box is stroke-box and the element has non-scaling-stroke, then the used transform-box is fill-box.
<fantasai> emilio: I think this also applies to the border-box value
<fantasai> PROPOSED: If the tranform-box is stroke-box and the element has non-scaling-stroke, then the used transform-box is fill-box.
<fantasai> RESOLVED: If the tranform-box is stroke-box and the element has non-scaling-stroke, then the used transform-box is fill-box.