295936 2025-07-14 15:40:47 -0700 [css-anchor-position-1] anchor() fails to account for position-area 2025-07-29 12:19:54 -0700 1 1 1 Unclassified WebKit Layout and Rendering WebKit Local Build Unspecified Unspecified RESOLVED FIXED https://github.com/web-platform-tests/wpt/pull/54018 https://github.com/web-platform-tests/wpt/pull/54032 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 InRadar P2 Normal --- 291856 1 fantasai.bugs fantasai.bugs bfulgham kiet.ho simon.fraser webkit-bug-importer zalan oldest_to_newest 2129996 0 fantasai.bugs 2025-07-14 15:40:47 -0700 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 2129998 1 fantasai.bugs 2025-07-14 15:41:59 -0700 Related: [css-anchor-1] anchor() fails to account for grid-area https://bugs.webkit.org/show_bug.cgi?id=295924 rdar://155823420 2129999 2 webkit-bug-importer 2025-07-14 15:42:06 -0700 <rdar://problem/155826872> 2131678 3 fantasai.bugs 2025-07-21 13:25:35 -0700 Pull request: https://github.com/WebKit/WebKit/pull/48339 2131782 4 ews-feeder 2025-07-21 20:00:14 -0700 Committed 297723@main (440717a86ea1): <https://commits.webkit.org/297723@main> Reviewed commits have been landed. Closing PR #48339 and removing active labels. 2133008 5 kiet.ho 2025-07-28 16:52:21 -0700 Submitted web-platform-tests pull request: https://github.com/web-platform-tests/wpt/pull/54018 2133173 6 kiet.ho 2025-07-29 12:19:54 -0700 Submitted web-platform-tests pull request: https://github.com/web-platform-tests/wpt/pull/54032