Closed Bug 1917533 Opened 1 year ago Closed 1 year ago

[wpt-sync] Sync PR 48034 - [layout] Implement new anchor-center behaviour.

Categories

(Core :: Layout: Block and Inline, task, P4)

Product:
Core
Component:
Layout: Block and Inline
Type:
task

Tracking

()

Status:
RESOLVED FIXED
Milestone:
132 Branch
Tracking Flags:
Tracking Status
firefox132 --- fixed

People

(Reporter: wpt-sync, Unassigned)

References

(
URL
)

Details

(Whiteboard: [wptsync downstream])

Sync web-platform-tests PR 48034 into mozilla-central (this bug is closed when the sync is complete).

PR: https://github.com/web-platform-tests/wpt/pull/48034
Details from upstream follow.

Ian Kilpatrick <ikilpatrick@chromium.org> wrote:

[layout] Implement new anchor-center behaviour.

This patch implements the new anchor-center behaviour specified in:
https://drafts.csswg.org/css-anchor-position-1/#anchor-center
https://drafts.csswg.org/css-align-3/#auto-safety-position

Previously anchor-center would adjust the insets such that it was
centered on the anchor. This meant the available space would change
and have an affect on sizing the anchored element.

This adjustment no longer takes place. The available size is static.
The centering happens when alignment happens.

Additionally this implements the new default overflow behaviour for
abspos. This new behaviour will let the target overflow the inset
modified containing block, but be "safe" by shifting the target
within the containing-block (not the IMCB), with a bias towards the
start edge.

This patch also fixes an issue where auto-margins were incorrectly
applied for anchor-center, etc.

Outside of:

  • The new default overflow behaviour for non-normal alignment, when
    both insets are set.
  • The new anchor-center behaviour.
  • The fixed auto margin behaviour.

There should be no other behaviour change.

Fixed: 343517018
Change-Id: Ibb2062b59c81413efa137987a55c3663a6677e3e

Reviewed-on: https://chromium-review.googlesource.com/5824748
WPT-Export-Revision: bfda2f7280f510f8c948cb0de1b5ce5a12ebb643

Component: web-platform-tests → Layout: Block and Inline
Product: Testing → Core

CI Results

Ran 0 Firefox configurations based on mozilla-central, and Firefox, Chrome, and Safari on GitHub CI

Total 21 tests and 1 subtests

Status Summary

Firefox

OK : 21
PASS: 38
FAIL: 227

Chrome

OK : 21
PASS: 140
FAIL: 125

Safari

OK : 21
PASS: 38
FAIL: 227

Links

GitHub PR Head
GitHub PR Base

Details

New Tests That Don't Pass

  • /css/css-align/abspos/align-self-default-overflow-htb-ltr-htb.html [wpt.fyi]
    • .item 1: FAIL (Chrome: PASS, Safari: FAIL)
    • .item 2: FAIL (Chrome: PASS, Safari: FAIL)
    • .item 3: FAIL (Chrome: FAIL, Safari: FAIL)
    • .item 4: FAIL (Chrome: FAIL, Safari: FAIL)
    • .item 5: FAIL (Chrome: PASS, Safari: FAIL)
    • .item 6: FAIL (Chrome: PASS, Safari: FAIL)
    • .item 8: FAIL (Chrome: PASS, Safari: FAIL)
    • .item 9: FAIL (Chrome: PASS, Safari: FAIL)
    • .item 10: FAIL (Chrome: FAIL, Safari: FAIL)
    • .item 11: FAIL (Chrome: FAIL, Safari: FAIL)
    • .item 12: FAIL (Chrome: PASS, Safari: FAIL)
    • .item 13: FAIL (Chrome: PASS, Safari: FAIL)
  • /css/css-align/abspos/align-self-default-overflow-htb-ltr-vrl.html [wpt.fyi]
    • .item 1: FAIL (Chrome: PASS, Safari: FAIL)
    • .item 2: FAIL (Chrome: PASS, Safari: FAIL)
    • .item 3: FAIL (Chrome: FAIL, Safari: FAIL)
    • .item 4: FAIL (Chrome: FAIL, Safari: FAIL)
    • .item 5: FAIL (Chrome: PASS, Safari: FAIL)
    • .item 6: FAIL (Chrome: PASS, Safari: FAIL)
    • .item 8: FAIL (Chrome: PASS, Safari: FAIL)
    • .item 9: FAIL (Chrome: PASS, Safari: FAIL)
    • .item 10: FAIL (Chrome: FAIL, Safari: FAIL)
    • .item 11: FAIL (Chrome: FAIL, Safari: FAIL)
    • .item 12: FAIL (Chrome: PASS, Safari: FAIL)
    • .item 13: FAIL (Chrome: PASS, Safari: FAIL)
  • /css/css-align/abspos/align-self-default-overflow-htb-rtl-htb.html [wpt.fyi]
    • .item 1: FAIL (Chrome: PASS, Safari: FAIL)
    • .item 2: FAIL (Chrome: PASS, Safari: FAIL)
    • .item 3: FAIL (Chrome: FAIL, Safari: FAIL)
    • .item 4: FAIL (Chrome: FAIL, Safari: FAIL)
    • .item 5: FAIL (Chrome: PASS, Safari: FAIL)
    • .item 6: FAIL (Chrome: PASS, Safari: FAIL)
    • .item 8: FAIL (Chrome: PASS, Safari: FAIL)
    • .item 9: FAIL (Chrome: PASS, Safari: FAIL)
    • .item 10: FAIL (Chrome: FAIL, Safari: FAIL)
    • .item 11: FAIL (Chrome: FAIL, Safari: FAIL)
    • .item 12: FAIL (Chrome: PASS, Safari: FAIL)
    • .item 13: FAIL (Chrome: PASS, Safari: FAIL)
  • /css/css-align/abspos/align-self-default-overflow-htb-rtl-vrl.html [wpt.fyi]
    • .item 1: FAIL (Chrome: PASS, Safari: FAIL)
    • .item 2: FAIL (Chrome: PASS, Safari: FAIL)
    • .item 3: FAIL (Chrome: FAIL, Safari: FAIL)
    • .item 4: FAIL (Chrome: FAIL, Safari: FAIL)
    • .item 5: FAIL (Chrome: PASS, Safari: FAIL)
    • .item 6: FAIL (Chrome: PASS, Safari: FAIL)
    • .item 8: FAIL (Chrome: PASS, Safari: FAIL)
    • .item 9: FAIL (Chrome: PASS, Safari: FAIL)
    • .item 10: FAIL (Chrome: FAIL, Safari: FAIL)
    • .item 11: FAIL (Chrome: FAIL, Safari: FAIL)
    • .item 12: FAIL (Chrome: PASS, Safari: FAIL)
    • .item 13: FAIL (Chrome: PASS, Safari: FAIL)
  • /css/css-align/abspos/align-self-default-overflow-vrl-ltr-htb.html [wpt.fyi]
    • .item 1: FAIL (Chrome: PASS, Safari: FAIL)
    • .item 2: FAIL (Chrome: PASS, Safari: FAIL)
    • .item 3: FAIL (Chrome: FAIL, Safari: FAIL)
    • .item 4: FAIL (Chrome: FAIL, Safari: FAIL)
    • .item 5: FAIL (Chrome: PASS, Safari: FAIL)
    • .item 6: FAIL (Chrome: PASS, Safari: FAIL)
    • .item 7: FAIL (Chrome: FAIL, Safari: FAIL)
    • .item 8: FAIL (Chrome: PASS, Safari: FAIL)
    • .item 9: FAIL (Chrome: PASS, Safari: FAIL)
    • .item 10: FAIL (Chrome: FAIL, Safari: FAIL)
    • .item 11: FAIL (Chrome: FAIL, Safari: FAIL)
    • .item 12: FAIL (Chrome: PASS, Safari: FAIL)
    • .item 13: FAIL (Chrome: PASS, Safari: FAIL)
    • .item 14: FAIL (Chrome: FAIL, Safari: FAIL)
  • /css/css-align/abspos/align-self-default-overflow-vrl-ltr-vrl.html [wpt.fyi]
    • .item 1: FAIL (Chrome: PASS, Safari: FAIL)
    • .item 2: FAIL (Chrome: PASS, Safari: FAIL)
    • .item 3: FAIL (Chrome: FAIL, Safari: FAIL)
    • .item 4: FAIL (Chrome: FAIL, Safari: FAIL)
    • .item 5: FAIL (Chrome: PASS, Safari: FAIL)
    • .item 6: FAIL (Chrome: PASS, Safari: FAIL)
    • .item 7: FAIL (Chrome: FAIL, Safari: FAIL)
    • .item 8: FAIL (Chrome: PASS, Safari: FAIL)
    • .item 9: FAIL (Chrome: PASS, Safari: FAIL)
    • .item 10: FAIL (Chrome: FAIL, Safari: FAIL)
    • .item 11: FAIL (Chrome: FAIL, Safari: FAIL)
    • .item 12: FAIL (Chrome: PASS, Safari: FAIL)
    • .item 13: FAIL (Chrome: PASS, Safari: FAIL)
    • .item 14: FAIL (Chrome: FAIL, Safari: FAIL)
  • /css/css-align/abspos/align-self-default-overflow-vrl-rtl-htb.html [wpt.fyi]
    • .item 1: FAIL (Chrome: PASS, Safari: FAIL)
    • .item 2: FAIL (Chrome: PASS, Safari: FAIL)
    • .item 3: FAIL (Chrome: FAIL, Safari: FAIL)
    • .item 4: FAIL (Chrome: FAIL, Safari: FAIL)
    • .item 5: FAIL (Chrome: PASS, Safari: FAIL)
    • .item 6: FAIL (Chrome: PASS, Safari: FAIL)
    • .item 7: FAIL (Chrome: FAIL, Safari: FAIL)
    • .item 8: FAIL (Chrome: PASS, Safari: FAIL)
    • .item 9: FAIL (Chrome: PASS, Safari: FAIL)
    • .item 10: FAIL (Chrome: FAIL, Safari: FAIL)
    • .item 11: FAIL (Chrome: FAIL, Safari: FAIL)
    • .item 12: FAIL (Chrome: PASS, Safari: FAIL)
    • .item 13: FAIL (Chrome: PASS, Safari: FAIL)
    • .item 14: FAIL (Chrome: FAIL, Safari: FAIL)
  • /css/css-align/abspos/align-self-default-overflow-vrl-rtl-vrl.html [wpt.fyi]
    • .item 1: FAIL (Chrome: PASS, Safari: FAIL)
    • .item 2: FAIL (Chrome: PASS, Safari: FAIL)
    • .item 3: FAIL (Chrome: FAIL, Safari: FAIL)
    • .item 4: FAIL (Chrome: FAIL, Safari: FAIL)
    • .item 5: FAIL (Chrome: PASS, Safari: FAIL)
    • .item 6: FAIL (Chrome: PASS, Safari: FAIL)
    • .item 7: FAIL (Chrome: FAIL, Safari: FAIL)
    • .item 8: FAIL (Chrome: PASS, Safari: FAIL)
    • .item 9: FAIL (Chrome: PASS, Safari: FAIL)
    • .item 10: FAIL (Chrome: FAIL, Safari: FAIL)
    • .item 11: FAIL (Chrome: FAIL, Safari: FAIL)
    • .item 12: FAIL (Chrome: PASS, Safari: FAIL)
    • .item 13: FAIL (Chrome: PASS, Safari: FAIL)
    • .item 14: FAIL (Chrome: FAIL, Safari: FAIL)
  • /css/css-align/abspos/justify-self-default-overflow-htb-ltr-htb.html [wpt.fyi]
    • .item 1: FAIL (Chrome: PASS, Safari: FAIL)
    • .item 2: FAIL (Chrome: PASS, Safari: FAIL)
    • .item 3: FAIL (Chrome: FAIL, Safari: FAIL)
    • .item 4: FAIL (Chrome: FAIL, Safari: FAIL)
    • .item 5: FAIL (Chrome: PASS, Safari: FAIL)
    • .item 6: FAIL (Chrome: PASS, Safari: FAIL)
    • .item 8: FAIL (Chrome: PASS, Safari: FAIL)
    • .item 9: FAIL (Chrome: PASS, Safari: FAIL)
    • .item 10: FAIL (Chrome: FAIL, Safari: FAIL)
    • .item 11: FAIL (Chrome: FAIL, Safari: FAIL)
    • .item 12: FAIL (Chrome: PASS, Safari: FAIL)
    • .item 13: FAIL (Chrome: PASS, Safari: FAIL)
  • /css/css-align/abspos/justify-self-default-overflow-htb-ltr-vrl.html [wpt.fyi]
    • .item 1: FAIL (Chrome: PASS, Safari: FAIL)
    • .item 2: FAIL (Chrome: PASS, Safari: FAIL)
    • .item 3: FAIL (Chrome: FAIL, Safari: FAIL)
    • .item 4: FAIL (Chrome: FAIL, Safari: FAIL)
    • .item 5: FAIL (Chrome: PASS, Safari: FAIL)
    • .item 6: FAIL (Chrome: PASS, Safari: FAIL)
    • .item 8: FAIL (Chrome: PASS, Safari: FAIL)
    • .item 9: FAIL (Chrome: PASS, Safari: FAIL)
    • .item 10: FAIL (Chrome: FAIL, Safari: FAIL)
    • .item 11: FAIL (Chrome: FAIL, Safari: FAIL)
    • .item 12: FAIL (Chrome: PASS, Safari: FAIL)
    • .item 13: FAIL (Chrome: PASS, Safari: FAIL)
  • /css/css-align/abspos/justify-self-default-overflow-htb-rtl-htb.html [wpt.fyi]
    • .item 1: FAIL (Chrome: PASS, Safari: FAIL)
    • .item 2: FAIL (Chrome: PASS, Safari: FAIL)
    • .item 3: FAIL (Chrome: FAIL, Safari: FAIL)
    • .item 4: FAIL (Chrome: FAIL, Safari: FAIL)
    • .item 5: FAIL (Chrome: PASS, Safari: FAIL)
    • .item 6: FAIL (Chrome: PASS, Safari: FAIL)
    • .item 7: FAIL (Chrome: FAIL, Safari: FAIL)
    • .item 8: FAIL (Chrome: PASS, Safari: FAIL)
    • .item 9: FAIL (Chrome: PASS, Safari: FAIL)
    • .item 10: FAIL (Chrome: FAIL, Safari: FAIL)
    • .item 11: FAIL (Chrome: FAIL, Safari: FAIL)
    • .item 12: FAIL (Chrome: PASS, Safari: FAIL)
    • .item 13: FAIL (Chrome: PASS, Safari: FAIL)
    • .item 14: FAIL (Chrome: FAIL, Safari: FAIL)
  • /css/css-align/abspos/justify-self-default-overflow-htb-rtl-vrl.html [wpt.fyi]
    • .item 1: FAIL (Chrome: PASS, Safari: FAIL)
    • .item 2: FAIL (Chrome: PASS, Safari: FAIL)
    • .item 3: FAIL (Chrome: FAIL, Safari: FAIL)
    • .item 4: FAIL (Chrome: FAIL, Safari: FAIL)
    • .item 5: FAIL (Chrome: PASS, Safari: FAIL)
    • .item 6: FAIL (Chrome: PASS, Safari: FAIL)
    • .item 7: FAIL (Chrome: FAIL, Safari: FAIL)
    • .item 8: FAIL (Chrome: PASS, Safari: FAIL)
    • .item 9: FAIL (Chrome: PASS, Safari: FAIL)
    • .item 10: FAIL (Chrome: FAIL, Safari: FAIL)
    • .item 11: FAIL (Chrome: FAIL, Safari: FAIL)
    • .item 12: FAIL (Chrome: PASS, Safari: FAIL)
    • .item 13: FAIL (Chrome: PASS, Safari: FAIL)
    • .item 14: FAIL (Chrome: FAIL, Safari: FAIL)
  • /css/css-align/abspos/justify-self-default-overflow-vrl-ltr-htb.html [wpt.fyi]
    • .item 1: FAIL (Chrome: PASS, Safari: FAIL)
    • .item 2: FAIL (Chrome: PASS, Safari: FAIL)
    • .item 3: FAIL (Chrome: FAIL, Safari: FAIL)
    • .item 4: FAIL (Chrome: FAIL, Safari: FAIL)
    • .item 5: FAIL (Chrome: PASS, Safari: FAIL)
    • .item 6: FAIL (Chrome: PASS, Safari: FAIL)
    • .item 8: FAIL (Chrome: PASS, Safari: FAIL)
    • .item 9: FAIL (Chrome: PASS, Safari: FAIL)
    • .item 10: FAIL (Chrome: FAIL, Safari: FAIL)
    • .item 11: FAIL (Chrome: FAIL, Safari: FAIL)
    • .item 12: FAIL (Chrome: PASS, Safari: FAIL)
    • .item 13: FAIL (Chrome: PASS, Safari: FAIL)
  • /css/css-align/abspos/justify-self-default-overflow-vrl-ltr-vrl.html [wpt.fyi]
    • .item 1: FAIL (Chrome: PASS, Safari: FAIL)
    • .item 2: FAIL (Chrome: PASS, Safari: FAIL)
    • .item 3: FAIL (Chrome: FAIL, Safari: FAIL)
    • .item 4: FAIL (Chrome: FAIL, Safari: FAIL)
    • .item 5: FAIL (Chrome: PASS, Safari: FAIL)
    • .item 6: FAIL (Chrome: PASS, Safari: FAIL)
    • .item 8: FAIL (Chrome: PASS, Safari: FAIL)
    • .item 9: FAIL (Chrome: PASS, Safari: FAIL)
    • .item 10: FAIL (Chrome: FAIL, Safari: FAIL)
    • .item 11: FAIL (Chrome: FAIL, Safari: FAIL)
    • .item 12: FAIL (Chrome: PASS, Safari: FAIL)
    • .item 13: FAIL (Chrome: PASS, Safari: FAIL)
  • /css/css-align/abspos/justify-self-default-overflow-vrl-rtl-htb.html [wpt.fyi]
    • .item 1: FAIL (Chrome: PASS, Safari: FAIL)
    • .item 2: FAIL (Chrome: PASS, Safari: FAIL)
    • .item 3: FAIL (Chrome: FAIL, Safari: FAIL)
    • .item 4: FAIL (Chrome: FAIL, Safari: FAIL)
    • .item 5: FAIL (Chrome: PASS, Safari: FAIL)
    • .item 6: FAIL (Chrome: PASS, Safari: FAIL)
    • .item 7: FAIL (Chrome: FAIL, Safari: FAIL)
    • .item 8: FAIL (Chrome: PASS, Safari: FAIL)
    • .item 9: FAIL (Chrome: PASS, Safari: FAIL)
    • .item 10: FAIL (Chrome: FAIL, Safari: FAIL)
    • .item 11: FAIL (Chrome: FAIL, Safari: FAIL)
    • .item 12: FAIL (Chrome: PASS, Safari: FAIL)
    • .item 13: FAIL (Chrome: PASS, Safari: FAIL)
    • .item 14: FAIL (Chrome: FAIL, Safari: FAIL)
  • /css/css-align/abspos/justify-self-default-overflow-vrl-rtl-vrl.html [wpt.fyi]
    • .item 1: FAIL (Chrome: PASS, Safari: FAIL)
    • .item 2: FAIL (Chrome: PASS, Safari: FAIL)
    • .item 3: FAIL (Chrome: FAIL, Safari: FAIL)
    • .item 4: FAIL (Chrome: FAIL, Safari: FAIL)
    • .item 5: FAIL (Chrome: PASS, Safari: FAIL)
    • .item 6: FAIL (Chrome: PASS, Safari: FAIL)
    • .item 7: FAIL (Chrome: FAIL, Safari: FAIL)
    • .item 8: FAIL (Chrome: PASS, Safari: FAIL)
    • .item 9: FAIL (Chrome: PASS, Safari: FAIL)
    • .item 10: FAIL (Chrome: FAIL, Safari: FAIL)
    • .item 11: FAIL (Chrome: FAIL, Safari: FAIL)
    • .item 12: FAIL (Chrome: PASS, Safari: FAIL)
    • .item 13: FAIL (Chrome: PASS, Safari: FAIL)
    • .item 14: FAIL (Chrome: FAIL, Safari: FAIL)
  • /css/css-anchor-position/anchor-center-htb-htb.html [wpt.fyi]
    • .target 2: FAIL (Chrome: PASS, Safari: FAIL)
    • .target 4: FAIL (Chrome: FAIL, Safari: FAIL)
    • .target 6: FAIL (Chrome: PASS, Safari: FAIL)
    • .target 8: FAIL (Chrome: FAIL, Safari: FAIL)
  • /css/css-anchor-position/anchor-center-htb-vrl.html [wpt.fyi]
    • .target 1: FAIL (Chrome: FAIL, Safari: FAIL)
    • .target 2: FAIL (Chrome: PASS, Safari: FAIL)
    • .target 4: FAIL (Chrome: FAIL, Safari: FAIL)
    • .target 6: FAIL (Chrome: PASS, Safari: FAIL)
    • .target 8: FAIL (Chrome: FAIL, Safari: FAIL)
  • /css/css-anchor-position/anchor-center-vrl-htb.html [wpt.fyi]
    • .target 1: FAIL (Chrome: FAIL, Safari: FAIL)
    • .target 2: FAIL (Chrome: PASS, Safari: FAIL)
    • .target 4: FAIL (Chrome: FAIL, Safari: FAIL)
    • .target 6: FAIL (Chrome: PASS, Safari: FAIL)
    • .target 8: FAIL (Chrome: FAIL, Safari: FAIL)
  • /css/css-anchor-position/anchor-center-vrl-vrl.html [wpt.fyi]
    • .target 2: FAIL (Chrome: PASS, Safari: FAIL)
    • .target 4: FAIL (Chrome: FAIL, Safari: FAIL)
    • .target 6: FAIL (Chrome: PASS, Safari: FAIL)
    • .target 8: FAIL (Chrome: FAIL, Safari: FAIL)
  • /css/css-anchor-position/auto-margins-position-area.html [wpt.fyi]
    • .abspos 1: FAIL (Chrome: FAIL, Safari: FAIL)
Pushed by wptsync@mozilla.com: https://hg.mozilla.org/integration/autoland/rev/01d8785b0abe [wpt PR 48034] - [layout] Implement new anchor-center behaviour., a=testonly https://hg.mozilla.org/integration/autoland/rev/81dfaf2cce16 [wpt PR 48034] - Update wpt metadata, a=testonly

https://hg.mozilla.org/mozilla-central/rev/01d8785b0abe
https://hg.mozilla.org/mozilla-central/rev/81dfaf2cce16

Status: NEW → RESOLVED
Closed: 1 year ago
status-firefox132: --- → fixed
Resolution: --- → FIXED
Target Milestone: --- → 132 Branch
You need to log in before you can comment on or make changes to this bug.