RESOLVED FIXED 295936
[css-anchor-position-1] anchor() fails to account for position-area 
https://bugs.webkit.org/show_bug.cgi?id=295936
Summary [css-anchor-position-1] anchor() fails to account for position-area
fantasai
Reported 2025-07-14 15:40:47 PDT
Our anchor() resolution fails to account for the effects of grid-area when position-area is also used, so boxes end up in the wrong place. See testcase: <!DOCTYPE html> <div style="height: 100px; width: 100px; border: solid; position: relative; "> <div style="position: absolute; border: solid orange; margin: 2em; anchor-name: --foo"></div> <div style="height: 40px; width: 40px; background: silver; margin: 0.5em"></div> <div style="position: absolute; top: anchor(bottom); position-area: bottom right; position-anchor: --foo; border: solid blue"></div> </div> <div style="height: 100px; width: 100px; border: solid; position: relative; "> <div style="position: absolute; border: solid orange; margin: 2em; anchor-name: --foo"></div> <div style="height: 40px; width: 40px; background: silver; margin: 0.5em; anchor-name: --bar"></div> <div style="position: absolute; top: anchor(--foo bottom); position-area: bottom right; position-anchor: --bar; border: solid blue"></div> </div> https://software.hixie.ch/utilities/js/live-dom-viewer/?%3C!DOCTYPE%20html%3E%0A%3Cdiv%20style%3D%22height%3A%20100px%3B%20width%3A%20100px%3B%20border%3A%20solid%3B%20position%3A%20relative%3B%20%22%3E%0A%20%20%3Cdiv%20style%3D%22position%3A%20absolute%3B%20border%3A%20solid%20orange%3B%20margin%3A%202em%3B%20anchor-name%3A%20--foo%22%3E%3C%2Fdiv%3E%0A%20%20%3Cdiv%20style%3D%22height%3A%2040px%3B%20width%3A%2040px%3B%20background%3A%20silver%3B%20margin%3A%200.5em%22%3E%3C%2Fdiv%3E%0A%20%20%3Cdiv%20style%3D%22position%3A%20absolute%3B%20top%3A%20anchor(bottom)%3B%20position-area%3A%20bottom%20right%3B%20position-anchor%3A%20--foo%3B%20border%3A%20solid%20blue%22%3E%3C%2Fdiv%3E%0A%3C%2Fdiv%3E%0A%3Cdiv%20style%3D%22height%3A%20100px%3B%20width%3A%20100px%3B%20border%3A%20solid%3B%20position%3A%20relative%3B%20%22%3E%0A%20%20%3Cdiv%20style%3D%22position%3A%20absolute%3B%20border%3A%20solid%20orange%3B%20margin%3A%202em%3B%20anchor-name%3A%20--foo%22%3E%3C%2Fdiv%3E%0A%20%20%3Cdiv%20style%3D%22height%3A%2040px%3B%20width%3A%2040px%3B%20background%3A%20silver%3B%20margin%3A%200.5em%3B%20anchor-name%3A%20--bar%22%3E%3C%2Fdiv%3E%0A%20%20%3Cdiv%20style%3D%22position%3A%20absolute%3B%20top%3A%20anchor(--foo%20bottom)%3B%20position-area%3A%20bottom%20right%3B%20position-anchor%3A%20--bar%3B%20border%3A%20solid%20blue%22%3E%3C%2Fdiv%3E%0A%3C%2Fdiv%3E%0A
Attachments
Add attachment proposed patch, testcase, etc.
fantasai
Comment 1 2025-07-14 15:41:59 PDT
Related: [css-anchor-1] anchor() fails to account for grid-area https://bugs.webkit.org/show_bug.cgi?id=295924 rdar://155823420
Radar WebKit Bug Importer
Comment 2 2025-07-14 15:42:06 PDT
<rdar://problem/155826872>
fantasai
Comment 3 2025-07-21 13:25:35 PDT
Pull request: https://github.com/WebKit/WebKit/pull/48339
EWS
Comment 4 2025-07-21 20:00:14 PDT
Committed 297723@main (440717a86ea1): <https://commits.webkit.org/297723@main> Reviewed commits have been landed. Closing PR #48339 and removing active labels.
Kiet Ho
Comment 5 2025-07-28 16:52:21 PDT
Submitted web-platform-tests pull request: https://github.com/web-platform-tests/wpt/pull/54018
Kiet Ho
Comment 6 2025-07-29 12:19:54 PDT
Submitted web-platform-tests pull request: https://github.com/web-platform-tests/wpt/pull/54032
Note You need to log in before you can comment on or make changes to this bug.