WebKit Bugzilla
New
Browse
Log In
×
Sign in with GitHub
or
Remember my login
Create Account
·
Forgot Password
Forgotten password account recovery
RESOLVED FIXED
295924
[css-anchor-1] anchor() fails to account for grid-area
https://bugs.webkit.org/show_bug.cgi?id=295924
Summary
[css-anchor-1] anchor() fails to account for grid-area
fantasai
Reported
2025-07-14 14:51:18 PDT
Our anchor() resolution fails to account for the effects of grid-area when the containing block is a grid, so boxes end up in the wrong place. See testcase: <!DOCTYPE html> <div style="display: grid; grid: 100px 100px / 100px 100px; border: solid; width: max-content; position: relative"> <div style="position: absolute; border: solid orange; margin: 1em; anchor-name: --foo"></div> <div style="position: absolute; top: anchor(--foo bottom); border: solid blue; grid-row: 2"></div> </div>
https://software.hixie.ch/utilities/js/live-dom-viewer/?%3C!DOCTYPE%20html%3E
% 0A%3Cdiv%20style%3D%22display%3A%20grid%3B%20grid%3A%20100px%20100px%20%2F%20100px%20100px%3B%20border%3A%20solid%3B%20width%3A%20max-content%3B%20position%3A%20relative%22%3E%0A%20%20%3Cdiv%20style%3D%22position%3A%20absolute%3B%20border%3A%20solid%20orange%3B%20margin%3A%201em%3B%20anchor-name%3A%20--foo%22%3E%3C%2Fdiv%3E%0A%20%20%3Cdiv%20style%3D%22position%3A%20absolute%3B%20top%3A%20anchor(--foo%20bottom)%3B%20border%3A%20solid%20blue%3B%20grid-row%3A%202%22%3E%3C%2Fdiv%3E%0A%3C%2Fdiv%3E%0A This is probably related to the failure on
https://wpt.live/css/css-anchor-position/position-try-grid-001.html
as well.
Attachments
patch
(16.68 KB, patch)
2025-07-23 16:59 PDT
,
fantasai
no flags
Details
Formatted Diff
Diff
View All
Add attachment
proposed patch, testcase, etc.
Radar WebKit Bug Importer
Comment 1
2025-07-14 14:51:28 PDT
<
rdar://problem/155823420
>
fantasai
Comment 2
2025-07-14 15:41:45 PDT
Related: [css-anchor-position-1] anchor() fails to account for position-area
https://bugs.webkit.org/show_bug.cgi?id=295936
fantasai
Comment 3
2025-07-23 14:25:51 PDT
Tracing through this, what's happening is that RenderGrid::gridAreaColumnRangeForOutOfFlow is not returning a correct value for the grid item, i.e. it doesn't reflect the grid area's size or position. I think the issue might be because we haven't set it yet, since we set it in RenderGrid::layoutOutOfFlowBox() but we're not doing layout here, we're still in style resolution... It looks like the logic we want is in RenderGrid::gridAreaBreadthForOutOfFlowGridItem so maybe we can call it more directly?
fantasai
Comment 4
2025-07-23 16:59:38 PDT
Created
attachment 476173
[details]
patch Depends on landing
https://github.com/WebKit/WebKit/pull/48406
due conflict in one of the test expectation files.
fantasai
Comment 5
2025-07-23 21:51:42 PDT
Pull request:
https://github.com/WebKit/WebKit/pull/48467
EWS
Comment 6
2025-07-24 12:09:45 PDT
Committed
297834@main
(fb8ef69f7e7a): <
https://commits.webkit.org/297834@main
> Reviewed commits have been landed. Closing PR #48467 and removing active labels.
Note
You need to
log in
before you can comment on or make changes to this bug.
Top of Page
Format For Printing
XML
Clone This Bug