1585485 - [css-flexbox] Treat input elements with percent sizes as having "compressible" min-content sizes

Status: RESOLVED FIXED

(Core :: Layout: Flexbox, defect)

Description

[Daniel Holbert [:dholbert]]

In this github issue, the CSSWG defined some elements as having a "compressible" min-content width:
https://github.com/w3c/csswg-drafts/issues/1889
https://github.com/w3c/csswg-drafts/commit/6a3be51bdda0ccb92af0d09556d6d1f2e7d8874d

Direct spec link: "Compressible Replaced Elements" https://drafts.csswg.org/css-sizing/#min-content-zero

We need to implement that change.

(This was originally a Chrome bug, up until that spec change which standardized on the Chrome behavior, kind of. I filed https://bugs.chromium.org/p/chromium/issues/detail?id=581545 a while back and initially misunderstood the spec change to be different from what Chrome does, but now I'm pretty sure the spec calls for basically what Chrome does.)

Reduced-ish testcase: https://jsfiddle.net/pfv2x6sd/1/

EXPECTED RESULTS: The textfield element shouldn't overflow the red-bordered area.
ACTUAL RESULTS: The textfield does overflow.

Comment 2

[dgrogan (chrome)]

Submitted spec issue https://github.com/w3c/csswg-drafts/issues/5665

Comment 4

[Ting-Yu Lin [:TYLin] (PDT, UTC-7)]

Attachment: 1585485.html

Attached dholbert's testcase in comment 0 as a standalone html.

Comment 5

[Ting-Yu Lin [:TYLin] (PDT, UTC-7)]

Attachment: 1585485.html

The testcase in comment 4 missed the <input> style. This is the correct one.

Comment 7

[Ting-Yu Lin [:TYLin] (PDT, UTC-7)]

Attachment: Bug 1585485 Part 1 - Remove StyleSize, StyleMaxSize, and StyleFlexBasis typedefs in classes.

It is not worth having typedefs that are unused or used only once.

Comment 8

[Ting-Yu Lin [:TYLin] (PDT, UTC-7)]

Attachment: Bug 1585485 Part 2 - Move IsReplacedBoxResolvedAgainstZero() into nsIFrame, and rename it.

We want to call it in nsFlexContainerFrame in the next part.

The method also tests form control elements, not just replaced boxes, so
rename it for accuracy.

Depends on D99950

Comment 9

[Ting-Yu Lin [:TYLin] (PDT, UTC-7)]

Attachment: Bug 1585485 Part 3 - Use zero percentage basis to compute specified size suggestion for compressible flex items.

Add a testcase for <input> and <input type="range">, which are two
common elements causing webcompat issues for Firefox.

Note: Google Chrome 89 and Safari 14 fails the test with width: calc(120px + 100%).

Depends on D99951

Comment 10

[Ting-Yu Lin [:TYLin] (PDT, UTC-7)]

It seems Mats had tried to fix this bug in bug 1513959. I didn't follow closely in the bug, but I guess bug 1316534 fixed some cases but made other cases more prominent.

Comment 11

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/de0d8a9f9b9b
Part 1 - Remove StyleSize, StyleMaxSize, and StyleFlexBasis typedefs in classes. r=dholbert
https://hg.mozilla.org/integration/autoland/rev/ebc9f0bf246f
Part 2 - Move IsReplacedBoxResolvedAgainstZero() into nsIFrame, and rename it. r=dholbert
https://hg.mozilla.org/integration/autoland/rev/a605cd525450
Part 3 - Use zero percentage basis to compute specified size suggestion for compressible flex items. r=dholbert

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/26956 for changes under testing/web-platform/tests

Comment 13

[Andreea Pavel [:apavel]]

https://hg.mozilla.org/mozilla-central/rev/de0d8a9f9b9b
https://hg.mozilla.org/mozilla-central/rev/ebc9f0bf246f
https://hg.mozilla.org/mozilla-central/rev/a605cd525450

Comment 15

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

Upstream PR merged by moz-wptsync-bot