1981872 - [wpt-sync] Sync PR 54203 - layout: Let `stretch` on flex item cross size stretch to the line

Status: RESOLVED FIXED

(Core :: Layout: Flexbox, task, P4)

Description

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

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

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

Oriol Brufau <[e-mail]> wrote:

layout: Let stretch on flex item cross size stretch to the line

We were instead stretching to the containing block, which implied that the behaviors of a stretch size and stretch alignment weren't consistent.

As resolved by the CSSWG, the behavior will now be:

• If the cross size of the line is known, stretch to the line.
• Otherwise, stretch to the containing block.

See https://github.com/w3c/csswg-drafts/issues/11784

This aligns us with Blink, which has already shipped this new behavior.

Testing: improves existing WPT, and adding a new test

Reviewed in servo/servo#38526

Comment 1

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

Pushed to try (stability) https://treeherder.mozilla.org/#/jobs?repo=try&revision=28e929b73d1866c0973f2e4a6d2928462a62fef7

Comment 2

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

CI Results

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

Total 1290 tests and 12 subtests

Status Summary

Firefox

OK : 338
PASS: 24[Gecko-linux2204-64-wayland-debug, Gecko-linux2204-64-wayland-opt] 4348[Gecko-windows11-32-24h2-debug, Gecko-windows11-32-24h2-opt] 5241[Gecko-android-em-7.0-x86_64-lite-qr-opt-geckoview, Gecko-android-em-7.0-x86_64-qr-debug-geckoview, Gecko-android-em-7.0-x86_64-qr-opt-geckoview] 5245[Gecko-windows11-64-24h2-debug, Gecko-windows11-64-24h2-opt] 5246[Gecko-linux2404-64-debug, Gecko-linux2404-64-opt]
FAIL: 1[GitHub] 137[Gecko-windows11-32-24h2-debug, Gecko-windows11-32-24h2-opt] 166[Gecko-linux2404-64-debug, Gecko-linux2404-64-opt] 167[Gecko-windows11-64-24h2-debug, Gecko-windows11-64-24h2-opt] 168[Gecko-android-em-7.0-x86_64-lite-qr-opt-geckoview, Gecko-android-em-7.0-x86_64-qr-debug-geckoview, Gecko-android-em-7.0-x86_64-qr-opt-geckoview]

Chrome

PASS: 1

Safari

FAIL: 1

Links

Gecko CI (Treeherder)
GitHub PR Head
GitHub PR Base

Details

New Tests That Don't Pass

• /css/css-flexbox/align-self-016.html [wpt.fyi]: FAIL (Chrome: PASS, Safari: FAIL)
• /css/css-flexbox/content-height-with-scrollbars.html [wpt.fyi]: FAIL [Gecko-android-em-7.0-x86_64-lite-qr-opt-geckoview, Gecko-android-em-7.0-x86_64-qr-debug-geckoview, Gecko-android-em-7.0-x86_64-qr-opt-geckoview], PASS [Gecko-linux2404-64-debug, Gecko-linux2404-64-opt, Gecko-windows11-64-24h2-debug, Gecko-windows11-64-24h2-opt]
• /css/css-flexbox/dynamic-orthogonal-flex-item.html [wpt.fyi]: FAIL
• /css/css-flexbox/flex-aspect-ratio-img-column-008.html [wpt.fyi]: FAIL
• /css/css-flexbox/flex-aspect-ratio-img-row-017.html [wpt.fyi]: FAIL
• /css/css-flexbox/flex-container-max-content-001.html [wpt.fyi]: FAIL
• /css/css-flexbox/flex-container-min-content-001.html [wpt.fyi]: FAIL
• /css/css-flexbox/flex-item-max-height-min-content.html [wpt.fyi]: FAIL
• /css/css-flexbox/flex-item-max-width-min-content.html [wpt.fyi]: FAIL
• /css/css-flexbox/gap-019.html [wpt.fyi]: FAIL
• /css/css-flexbox/grandchild-span-height.html [wpt.fyi]: FAIL
• /css/css-flexbox/multiline-shrink-to-fit.html [wpt.fyi]: FAIL
• /css/css-flexbox/table-as-item-min-height-1.html [wpt.fyi]: FAIL
• /css/css-flexbox/table-as-item-stretch-cross-size-5.html [wpt.fyi]: FAIL
• /css/css-flexbox/alignment/flex-align-baseline-column-vert-lr-rtl-wrap-reverse.html [wpt.fyi]: FAIL
• /css/css-flexbox/alignment/flex-align-baseline-column-vert-rl-rtl-wrap-reverse.html [wpt.fyi]: FAIL
• /css/css-flexbox/intrinsic-size/col-wrap-001.html [wpt.fyi]: FAIL
• /css/css-flexbox/intrinsic-size/col-wrap-002.html [wpt.fyi]: FAIL
• /css/css-flexbox/intrinsic-size/col-wrap-003.html [wpt.fyi]: FAIL
• /css/css-flexbox/intrinsic-size/col-wrap-006.html [wpt.fyi]: FAIL
• /css/css-flexbox/intrinsic-size/col-wrap-007.html [wpt.fyi]: FAIL
• /css/css-flexbox/intrinsic-size/col-wrap-008.html [wpt.fyi]: FAIL
• /css/css-flexbox/intrinsic-size/col-wrap-009.html [wpt.fyi]: FAIL
• /css/css-flexbox/intrinsic-size/col-wrap-013.html [wpt.fyi]: FAIL
• /css/css-flexbox/intrinsic-size/col-wrap-014.html [wpt.fyi]: FAIL
• /css/css-flexbox/intrinsic-size/col-wrap-020.html [wpt.fyi]: FAIL
• /css/css-flexbox/intrinsic-size/row-002.html [wpt.fyi]: FAIL
• /css/css-flexbox/intrinsic-size/row-003.html [wpt.fyi]: FAIL
• /css/css-flexbox/intrinsic-size/row-004.html [wpt.fyi]: FAIL
• /css/css-flexbox/intrinsic-size/row-007.html [wpt.fyi]: FAIL
• /css/css-flexbox/intrinsic-size/row-wrap-002.tentative.html [wpt.fyi]: FAIL
• /css/css-flexbox/quirks-auto-block-size-with-percentage-item.html [wpt.fyi]: SKIP
• /css/css-flexbox/fieldset-as-container-justify-center.tentative.html [wpt.fyi]
  • .item 1: FAIL
• /css/css-flexbox/flex-basis-013.html [wpt.fyi]
  • .container 1: FAIL
  • .container 2: FAIL
  • .container 3: FAIL
  • .container 4: FAIL
  • .container 5: FAIL
  • .container 6: FAIL
  • .container 7: FAIL
  • .container 8: FAIL
  • .container 9: FAIL
  • .container 10: FAIL
• /css/css-flexbox/flex-container-max-content-002.tentative.html [wpt.fyi]
  • .flex 2: FAIL
  • .flex 3: FAIL
  • .flex 5: FAIL
  • .flex 6: FAIL
  • .flex 8: FAIL
  • .flex 9: FAIL
  • .flex 11: FAIL
  • .flex 12: FAIL
  • .flex 14: FAIL
  • .flex 15: FAIL
  • .flex 17: FAIL
  • .flex 18: FAIL
  • .flex 20: FAIL
  • .flex 21: FAIL
  • .flex 23: FAIL
  • .flex 24: FAIL
• /css/css-flexbox/flex-container-min-content-002.tentative.html [wpt.fyi]
  • .flex 2: FAIL
  • .flex 3: FAIL
  • .flex 5: FAIL
  • .flex 6: FAIL
  • .flex 8: FAIL
  • .flex 9: FAIL
  • .flex 11: FAIL
  • .flex 12: FAIL
  • .flex 14: FAIL
  • .flex 15: FAIL
  • .flex 17: FAIL
  • .flex 18: FAIL
  • .flex 20: FAIL
  • .flex 21: FAIL
  • .flex 23: FAIL
  • .flex 24: FAIL
• /css/css-flexbox/flex-shorthand-calc.html [wpt.fyi]
  • e.style['flex'] = "sign(1em - 1px) sibling-index()" should set flex-basis: FAIL
  • e.style['flex'] = "sign(1em - 1px) sibling-index()" should set flex-grow: FAIL
  • e.style['flex'] = "sign(1em - 1px) sibling-index()" should set flex-shrink: FAIL
  • e.style['flex'] = "sign(1em - 1px) sibling-index()" should not set unrelated longhands: FAIL
• /css/css-flexbox/inline-flexbox-wrap-vertically-width-calculation.html [wpt.fyi]
  • .inline-flexbox 2: FAIL
  • .inline-flexbox 4: FAIL
  • .inline-flexbox 6: FAIL
  • .inline-flexbox 8: FAIL
  • .inline-flexbox 10: FAIL
  • .inline-flexbox 12: FAIL
  • .inline-flexbox 14: FAIL
  • .inline-flexbox 16: FAIL
• /css/css-flexbox/position-relative-percentage-top-001.html [wpt.fyi]
  • .border 1: FAIL [Gecko-android-em-7.0-x86_64-lite-qr-opt-geckoview, Gecko-android-em-7.0-x86_64-qr-debug-geckoview, Gecko-android-em-7.0-x86_64-qr-opt-geckoview, Gecko-windows11-32-24h2-debug, Gecko-windows11-32-24h2-opt, Gecko-windows11-64-24h2-debug, Gecko-windows11-64-24h2-opt], PASS [Gecko-linux2404-64-debug, Gecko-linux2404-64-opt]
• /css/css-flexbox/alignment/flex-align-baseline-grid-001.html [wpt.fyi]
  • .target > * 3: FAIL
  • .target > * 5: FAIL
• /css/css-flexbox/alignment/flex-align-baseline-grid-002.html [wpt.fyi]
  • .target > * 3: FAIL
  • .target > * 5: FAIL
• /css/css-flexbox/alignment/flex-align-baseline-grid-003.html [wpt.fyi]
  • .target > * 3: FAIL
  • .target > * 5: FAIL
• /css/css-flexbox/alignment/flex-align-baseline-line-clamp-001.tentative.html [wpt.fyi]
  • .target > * 3: FAIL
  • .target > * 15: FAIL
  • .target > * 19: FAIL
  • .target > * 23: FAIL
• /css/css-flexbox/alignment/flex-align-baseline-line-clamp-002.tentative.html [wpt.fyi]
  • .target > * 3: FAIL
  • .target > * 4: FAIL
  • .target > * 15: FAIL
  • .target > * 16: FAIL
  • .target > * 19: FAIL
  • .target > * 20: FAIL
  • .target > * 23: FAIL
  • .target > * 24: FAIL
• /css/css-flexbox/alignment/flex-align-baseline-line-clamp-003.tentative.html [wpt.fyi]
  • .target > * 3: FAIL
  • .target > * 15: FAIL
  • .target > * 19: FAIL
  • .target > * 23: FAIL
• /css/css-flexbox/alignment/flex-align-baseline-multicol-001.html [wpt.fyi]
  • .target > * 3: FAIL
  • .target > * 7: FAIL
• /css/css-flexbox/alignment/flex-align-baseline-multicol-002.html [wpt.fyi]
  • .target > * 1: FAIL
  • .target > * 3: FAIL
  • .target > * 5: FAIL
  • .target > * 7: FAIL
• /css/css-flexbox/alignment/flex-align-baseline-multicol-003.html [wpt.fyi]
  • .target > * 3: FAIL
  • .target > * 7: FAIL
• /css/css-flexbox/alignment/flex-align-baseline-table-002.html [wpt.fyi]
  • .target > * 1: FAIL
  • .target > * 3: FAIL
• /css/css-flexbox/alignment/multiline-align-self.html [wpt.fyi]
  • .flexbox 21: FAIL
  • .flexbox 22: FAIL
  • .flexbox 23: FAIL
  • .flexbox 24: FAIL
  • .flexbox 29: FAIL
  • .flexbox 30: FAIL
  • .flexbox 31: FAIL
  • .flexbox 32: FAIL
  • .flexbox 37: FAIL
  • .flexbox 38: FAIL
  • .flexbox 39: FAIL
  • .flexbox 40: FAIL
  • .flexbox 45: FAIL
  • .flexbox 46: FAIL
  • .flexbox 47: FAIL
  • .flexbox 48: FAIL
• /css/css-flexbox/intrinsic-size/col-wrap-005.html [wpt.fyi]
  • body > div 1: FAIL
• /css/css-flexbox/intrinsic-size/col-wrap-019.html [wpt.fyi]
  • body > div 1: FAIL
• /css/css-flexbox/intrinsic-size/row-005.html [wpt.fyi]
  • .floating-flexbox 1: FAIL
  • .floating-flexbox 2: FAIL
  • .floating-flexbox 3: FAIL
  • .floating-flexbox 4: FAIL
  • .floating-flexbox 5: FAIL
  • .floating-flexbox 6: FAIL
  • .floating-flexbox 7: FAIL
  • .floating-flexbox 8: FAIL
• /css/css-flexbox/intrinsic-size/row-008.html [wpt.fyi]
  • .min-width-flexbox 1: FAIL
  • .min-width-flexbox 2: FAIL
  • .min-width-flexbox 3: FAIL
  • .min-width-flexbox 4: FAIL
  • .min-width-flexbox 5: FAIL
  • .min-width-flexbox 6: FAIL
  • .min-width-flexbox 7: FAIL
  • .min-width-flexbox 8: FAIL
  • .min-width-flexbox 9: FAIL
  • .min-width-flexbox 10: FAIL
  • .min-width-flexbox 11: FAIL
• /css/css-flexbox/intrinsic-size/row-use-cases-001.html [wpt.fyi]
  • left < right: FAIL
  • no overflow: FAIL
  • same widths: FAIL
  • zero width: FAIL
  • same heights: FAIL
  • no overflow 2: FAIL
• /css/css-flexbox/intrinsic-size/row-wrap-001.html [wpt.fyi]
  • .floating-flexbox 1: FAIL
  • .floating-flexbox 2: FAIL
  • .floating-flexbox 4: FAIL
  • .floating-flexbox 5: FAIL
• /css/css-flexbox/parsing/flex-computed.html [wpt.fyi]
  • Property flex value 'calc(10 + (sign(20cqw - 10px) * 5)) calc(10 + (sign(20cqw - 10px) * 5)) 1px': FAIL
• /css/css-flexbox/parsing/flex-valid.html [wpt.fyi]
  • e.style['flex'] = "calc(10 + (sign(20cqw - 10px) * 5)) calc(10 + (sign(20cqw - 10px) * 5)) 1px" should set the property value: FAIL

Tests Disabled in Gecko Infrastructure

• /css/css-flexbox/quirks-auto-block-size-with-percentage-item.html [wpt.fyi]: SKIP

Comment 3

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/e96f7d22d7dc
https://hg.mozilla.org/integration/autoland/rev/d38412d39340
[wpt PR 54203] - layout: Let `stretch` on flex item cross size stretch to the line, a=testonly
https://github.com/mozilla-firefox/firefox/commit/0d629b2ffd8a
https://hg.mozilla.org/integration/autoland/rev/23b4e771b991
[wpt PR 54203] - Update wpt metadata, a=testonly

Comment 4

[Iulian Moraru]

https://hg.mozilla.org/mozilla-central/rev/d38412d39340
https://hg.mozilla.org/mozilla-central/rev/23b4e771b991