[css-anchor-position] Full markup and CSS examples

[oluoluoxenfree]

https://tabatkins.github.io/specs/css-anchor-position/#anchor-name:~:text=the%20%3Cdashed%2Dident%3E%20specifies%20the%20anchor%20name%20of%20the%20anchor%20element%20it%20will%20be%20drawing%20positioning%20information%20from

Hi, I've been working on an implementation of a polyfill of CSS Anchor Positioning with @oddbird and have run into some confusion due to there being no up to date/correct markup examples. For example we are currently confused by the use of anchor name vs anchor id vs anchor attribute and how this relates to the CSS rules.

We'd love to have a full example of the HTML markup and corresponding CSS so the API of the polyfill matches the real implementation closely.

For example, in this section it's difficult to work out whether the --foo ident refers to an ID, an anchor name, an anchor attribute value, or something else: https://tabatkins.github.io/specs/css-anchor-position/#anchor-name:~:text=For%20example%2C%20in,lengths%20in%20each.

[dbaron]

cc @xiaochengh @tabatkins, although it's possible this would better be filed in https://github.com/tabatkins/specs/issues

[xiaochengh]

For the specific example, --foo refers to the anchor-name property value of another element.

The test cases may serve as full examples: https://chromium.googlesource.com/chromium/src/+/main/third_party/blink/web_tests/wpt_internal/css/css-anchor-position