1924786 - Extend anchor positioning support to work in CSS grid

Status: VERIFIED FIXED

(Core :: Layout, enhancement, P3)

Description

[Jonathan Watt [:jwatt]]

There is some specific code in grid that will need some work.

Note that the effective containing block rectangle modifications due to Anchor Positioning are to be applied after any changes that grid-placement properties make to the containing block rectangle:

https://drafts.csswg.org/css-position/#original-cb

Comment 1

[David Shin[:dshin]]

Attachment: Demonstrative case

(Still need additional work to properly take this account, as demonstrated by the attached testcase)

Comment 2

[David Shin[:dshin]]

Attachment: CSS Grid + Anchor Positioning Containing Block Adjustment

OTOH, alignment area adjustment for grid seems to work ok with anchor positioning.

Comment 5

[Emilio Cobos Álvarez [:emilio]]

Attachment: Bug 1924786 - Make position-area and default-anchor adjustments take priority over CSS grid CB. r=#anchor-pos,#layout

As per https://drafts.csswg.org/css-position/#original-cb they should
happen later (and thus take priority).

Give a reasonable CB (the grid container's padding rect) down from grid
layout now that we might not use the actual grid CB.

Comment 6

[Emilio Cobos Álvarez [:emilio]]

Attachment: Bug 1924786 - Make position-area and default-anchor adjustments take priority over CSS grid CB. r=#anchor-pos,#layout

As per https://drafts.csswg.org/css-position/#original-cb they should
happen later (and thus take priority).

Give a reasonable CB (the grid container's padding rect) down from grid
layout now that we might not use the actual grid CB.

Remove a check for fallbacks that isn't needed since part 1 of
bug 1991929.

Comment 7

[David Shin[:dshin]]

Attachment: Demonstraive case for successive modification of containing block

Comment 8

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/bc04f15c3ab9
https://hg.mozilla.org/integration/autoland/rev/4cc06d49690f
Make position-area and default-anchor adjustments take priority over CSS grid CB. r=layout-anchor-positioning-reviewers,layout-reviewers,dshin

Comment 9

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/e64ec5367997
https://hg.mozilla.org/integration/autoland/rev/e5686d435ec5
Revert "Bug 1924786 - Make position-area and default-anchor adjustments take priority over CSS grid CB. r=layout-anchor-positioning-reviewers,layout-reviewers,dshin" for causing wpt failures on align-self-default-overflow-htb-ltr-htb.html

Comment 10

[Norisz Fay [:noriszfay]]

Backed out for causing wpt failures on align-self-default-overflow-htb-ltr-htb.html

Backout link

Push with failures

Failure log

Edit: Changeset relanded as the culprit is another bug.

Comment 11

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/36a152949e5e
https://hg.mozilla.org/integration/autoland/rev/12c7da0e492f
Make position-area and default-anchor adjustments take priority over CSS grid CB. r=layout-anchor-positioning-reviewers,layout-reviewers,dshin

Comment 12

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Created web-platform-tests PR https://github.com/web-platform-tests/wpt/pull/56558 for changes under testing/web-platform/tests

Comment 14

[Atila Butkovits]

https://hg.mozilla.org/mozilla-central/rev/12c7da0e492f

Comment 15

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Upstream PR merged by moz-wptsync-bot

Comment 16

[Emilio Cobos Álvarez [:emilio]]

Comment on attachment 9531327 [details]
Bug 1924786 - Make position-area and default-anchor adjustments take priority over CSS grid CB. r=#anchor-pos,#layout

Beta/Release Uplift Approval Request

• User impact if declined/Reason for urgency: Fixes anchor positioning broken sites. This didn't make it before the soft-freeze because of backout.
• Is this code covered by automated tests?: Yes
• Has the fix been verified in Nightly?: Yes
• Needs manual test from QE?: Yes
• If yes, steps to reproduce: See blocked bugs.
• List of other uplifts needed: none
• Risk to taking this patch: Low
• Why is the change risky/not risky? (and alternatives if risky): Trivial, anchor-positioning-specific change.
• String changes made/needed: none
• Is Android affected?: Yes

Comment 17

[Ryan VanderMeulen [:RyanVM]]

Comment on attachment 9531327 [details]
Bug 1924786 - Make position-area and default-anchor adjustments take priority over CSS grid CB. r=#anchor-pos,#layout

Approved for 147.0b2.

Comment 18

[Pulsebot]

https://github.com/mozilla-firefox/firefox/commit/5f4d70f37e0b
https://hg.mozilla.org/releases/mozilla-beta/rev/bc9ceb0aa0ed

Comment 19

[Mira Lobontiu (Android QA)]

Hi Emilio,
Could you provide QA Android team some steps to verify this?
Thank you!

Comment 20

[Emilio Cobos Álvarez [:emilio]]

Sure, see bug 2003745. Before this change the blue element always takes the whole space. Note that it still won't match other browsers (because of bug 1991929), but with this patch the site works better.

Comment 21

[Mira Lobontiu (Android QA)]

Attachment: 1924786.jpg

Verified as fixed on the Firefox for Android Nightly 148.0a1 from 12/9 using a Samsung Galaxy A56 (Android 16), following these steps"

1. Navigate to: https://chrome.dev/anchor-tool/.
2. Observe the "Hello, I am the positioned element!" area.

I've attached a screenshot from beta, for comparison.

Comment 22

[Mira Lobontiu (Android QA)]

Verified as fixed also on Firefox for Android Beta 147.0b2 with a Samsung Galaxy Note 8 (Android 9), and Xiaomi Poco X7 Pro (Android 15).

Comment 23

[Petruta Horea [:phorea]]

Attachment: 146 - 147 - 148 comparison

Also tested on Firefox Desktop, latest Nightly 148.0a1 and 147 Beta 2. Here are the results:

• TC 1, TC 2 and TC 3 are now correctly displayed (compared with Firefox 146RC and Chrome)
• https://anchor-tool.com/ no longer shows " Your browser does not support the CSS anchor positioning API. This tool is for demonstration purposes only. " warning, the blue element takes more space than before, and the "?" is now right under it.

Emilio, could you please take a look at the attached screenshot? Apart from the blue "Hello, I am the positioned element!" blue element, which takes more space when the browser width is not reduced (normal window), everything looks fine from QA perspective.
Thank you!

Comment 24

[Emilio Cobos Álvarez [:emilio]]

That's expected, and covered by bug 1991929. Thanks!

Comment 25

[Petruta Horea [:phorea]]

(In reply to Emilio Cobos Álvarez [:emilio] from comment #24)

That's expected, and covered by bug 1991929. Thanks!

Thank you! Verification is now complete on Firefox 147 beta 2 and Nightly 148.0a1 across platforms.

I can confirm that latest Nightly 148.0a1 (20251211210236) contains the fix for the blue element.