1920160 - Absolutely positioned boxes should accept `align-self` and `justify-self`

Status: RESOLVED FIXED

(Core :: Layout: Positioned, enhancement)

Description

[David Shin[:dshin]]

Both justify-self and align-self are accepted if the block is absolutely positioned, and have an impact on positioning of the absolutely positioned box within the containing block.

Relevant WPTs under /css/css-align/abspos.

Blocks anchor-center for anchor-positioning, which is a new value for alignment.

Comment 1

[Jonathan Watt [:jwatt]]

The commits in bug 1269017 comment 50 may be useful to refer to.

Comment 2

[Jonathan Watt [:jwatt]]

The commits in bug 1269017 comment 50 may be useful to refer to.

Comment 3

[David Shin[:dshin]]

Attachment: Bug 1920160: Part 1 - Don't force overconstrained margins to ignore end-side margins. r=#anchor-positioning-reviewers,#style

Current alignment spec 1 allows the margin-box of an absolutely
positioned elements to be aligned within the inset-reduced absolute
containing box, so just let the overconstrained margin be.

Comment 4

[David Shin[:dshin]]

Attachment: Bug 1920160: Part 2 - Document old inset behaviour vs spec behaviour. r=#anchor-positioning-reviewers,#style

Depends on D226527

Comment 5

[David Shin[:dshin]]

Attachment: Bug 1920160: Part 3 - Don't forcefully stretch size of absolutely-positioned boxes. r=#anchor-positioning-reviewers,#style

We no longer always fill the available space, which then may be aligned.

Depends on D226528

Comment 6

[David Shin[:dshin]]

Attachment: Bug 1920160: Part 4 - Move `CSSAlignmentForAbsPosChild` to `nsContainerFrame`. r=#anchor-positioning-reviewers,#style

Absolutely positioned elements can be aligned, so it no longer
is grid-specific.

Depends on D226529

Comment 7

[David Shin[:dshin]]

Attachment: Bug 1920160: Part 5 - Align boxes when within non-auto inset absolute containing block. r=#anchor-positioning-reviewers,#style

Also implement the alignment safety behaviour that is described as "in-between"
[1].

[1] https://drafts.csswg.org/css-position-3/#abspos-layout

Depends on D226530

Comment 8

[David Shin[:dshin]]

Attachment: Bug 1920160: Part 6 - Separate out computation of auto sizes in abs-positioned boxes. r=#anchor-positioning-reviewers,#style

Depends on D226531

Comment 9

[David Shin[:dshin]]

Attachment: Bug 1920160: Part 7 - Adjust test expectations. r=#anchor-positioning-reviewers,#style

Depends on D226532

Comment 10

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/71d051b7857a
Part 1 - Don't force overconstrained margins to ignore end-side margins. r=jwatt,firefox-style-system-reviewers,emilio
https://hg.mozilla.org/integration/autoland/rev/26f7d594f6e0
Part 2 - Document old inset behaviour vs spec behaviour. r=firefox-style-system-reviewers,emilio
https://hg.mozilla.org/integration/autoland/rev/b64bfe84e60a
Part 3 - Don't forcefully stretch size of absolutely-positioned boxes. r=jwatt,firefox-style-system-reviewers,emilio
https://hg.mozilla.org/integration/autoland/rev/45c61a69b9b8
Part 4 - Move `CSSAlignmentForAbsPosChild` to `nsContainerFrame`. r=jwatt,firefox-style-system-reviewers,emilio
https://hg.mozilla.org/integration/autoland/rev/8bfb6f9eab80
Part 5 - Align boxes when within non-auto inset absolute containing block. r=jwatt
https://hg.mozilla.org/integration/autoland/rev/d57f1f6f293b
Part 6 - Separate out computation of auto sizes in abs-positioned boxes. r=jwatt
https://hg.mozilla.org/integration/autoland/rev/5d57a3a8d6aa
Part 7 - Adjust test expectations. r=jwatt

Comment 11

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

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

Comment 12

[Serban Stanca [:SerbanS]]

Backed out for causing mochitests plain failures in test_videocontrols_vtt.html.

• Backout link
• Push with failures
• Failure Log
• Failure line: TEST-UNEXPECTED-FAIL | toolkit/content/tests/widgets/test_videocontrols_vtt.html | Selected item should be enabled

Comment 13

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

Upstream PR was closed without merging

Comment 14

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/a3ad6717aaae
Part 1 - Don't force overconstrained margins to ignore end-side margins. r=jwatt,firefox-style-system-reviewers,emilio
https://hg.mozilla.org/integration/autoland/rev/7ace177238e5
Part 2 - Document old inset behaviour vs spec behaviour. r=firefox-style-system-reviewers,emilio
https://hg.mozilla.org/integration/autoland/rev/38477a6f686b
Part 3 - Don't forcefully stretch size of absolutely-positioned boxes. r=jwatt,firefox-style-system-reviewers,emilio
https://hg.mozilla.org/integration/autoland/rev/fb9a3ecfa29e
Part 4 - Move `CSSAlignmentForAbsPosChild` to `nsContainerFrame`. r=jwatt,firefox-style-system-reviewers,emilio
https://hg.mozilla.org/integration/autoland/rev/783644509e3c
Part 5 - Align boxes when within non-auto inset absolute containing block. r=jwatt
https://hg.mozilla.org/integration/autoland/rev/8aa12043a1d7
Part 6 - Separate out computation of auto sizes in abs-positioned boxes. r=jwatt
https://hg.mozilla.org/integration/autoland/rev/889105cc0018
Part 7 - Adjust test expectations. r=jwatt

Comment 15

[Norisz Fay [:noriszfay]]

https://hg.mozilla.org/mozilla-central/rev/a3ad6717aaae
https://hg.mozilla.org/mozilla-central/rev/7ace177238e5
https://hg.mozilla.org/mozilla-central/rev/38477a6f686b
https://hg.mozilla.org/mozilla-central/rev/fb9a3ecfa29e
https://hg.mozilla.org/mozilla-central/rev/783644509e3c
https://hg.mozilla.org/mozilla-central/rev/8aa12043a1d7
https://hg.mozilla.org/mozilla-central/rev/889105cc0018

Comment 16

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

Upstream PR merged by moz-wptsync-bot

Comment 17

[Oriol Brufau [:Oriol]]

place-self: auto should behave as normal when determining the actual position of an abspos, see https://github.com/w3c/csswg-drafts/issues/11197

Comment 18

[David Shin[:dshin]]

:Oriol, that looks like bug 1930561 - and you're right, we mistakenly look at parent's (justify|align|place)-items for positioning absolute frames. Fix is landing soon.