[BUG] Non-HTML elements (SVG, MathML) can not be positioned

[jsnkuhn]

Describe the bug
Single value position-anchor that works in Chrome (in this case position-area: right;) is not working in Firefox at all with the polyfill.

To Reproduce
https://codepen.io/jsnkuhn/pen/NPNyxrx?editors=1100

Expected behavior
https://drafts.csswg.org/css-anchor-position-1/#position-area-syntax

1. from my reading of the spec a single value position anchor like position-anchor: right; should be valid.
2. It should compute to a 2 value syntax. In this case right span-all

while chrome accepts and renders this as expected. It doesn't seem to get the computed value correct. Currently computes to position-area: right; I don't know if i'm reading the spec wrong or if they just haven't gotten to this yet.

The polyfill is computing to right incorrectly but consistently with Chrome but this isn't rendering correctly with the polyfill.

Chrome 142:

Firefox 145:

[jamesnw]

Thanks for the reproduction! position-area: right; is supported by the polyfill, but there's a few things happening here that make it appear not to.

1. The polyfill doesn't support positioning SVG elements. I think that might be a simple change here to support that. This is the main issue, and I'll update the title to reflect that. For now, wrap it in div and apply the positioning to the div instead.
2. Chrome and Safari are vertically centering the icon in the space created by the NAME, where Firefox (and the polyfill) are vertically centering the icon in the containing block, which is the height of the screen. I suspect Chrome/Safari are correct here, and this is sounding familiar from a recent spec change, but I'd need to dig more. Likely this won't be a problem outside of this minimal reproduction, but you may potentially need to use position-area: right center or add a containing block that isn't the viewport that wraps the NAME and icon.

Hope that helps!

[jamesnw]

In regards to #2 above, the issue is that the polyfill doesn't support anchor-center, and per the spec-

If all three tracks are selected, the default alignment in that axis is [anchor-center](https://drafts.csswg.org/css-anchor-position-1/#valdef-justify-self-anchor-center).

[jamesnw]

The relevant parts of the spec-

An anchor-name can be used on all "elements that generate a principal box"

anchor-size() and anchor() can be used on any absolutely positioned box.

Since the concept of "box" is not exposed in the browser, we'll need to do some approximation. I suspect the algorithm will be something like el istanceof HTMLElement | el instanceof MathMLElement | el.tagName === 'SVG'.

Children of the <math> element do create boxes, but children of the <svg> element do not.

MathML example
SVG example