Bug 295924

Summary: [css-anchor-1] anchor() fails to account for grid-area
Product: WebKit Reporter: fantasai <fantasai.bugs>
Component: Layout and RenderingAssignee: fantasai <fantasai.bugs>
Status: RESOLVED FIXED    
Severity: Normal CC: bfulgham, csaavedra, kiet.ho, simon.fraser, webkit-bug-importer, zalan
Priority: P2 Keywords: InRadar
Version: WebKit Local Build   
Hardware: Unspecified   
OS: Unspecified   
Bug Depends on:    
Bug Blocks: 289743, 291856    
Attachments:
Description Flags
patch none

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
DetailsFormatted DiffDiff
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.
Claudio Saavedra
Comment 7 2025-07-30 03:02:17 PDT
Reopening as I'm reverting this, it broke vimeo.com/watch . See https://bugs.webkit.org/show_bug.cgi?id=296687
fantasai
Comment 8 2025-07-31 13:07:23 PDT
Pull request: https://github.com/WebKit/WebKit/pull/48792
EWS
Comment 9 2025-08-13 12:43:07 PDT
Committed 298644@main (a5da259342fb): <https://commits.webkit.org/298644@main> Reviewed commits have been landed. Closing PR #48792 and removing active labels.
Note You need to log in before you can comment on or make changes to this bug.