1786610 - SVG as flex item, with unspecified width/height/viewBox, incorrectly uses the container's border-box size as its intrinsic size

Status: VERIFIED FIXED

(Core :: Layout: Flexbox, defect)

Description

[Daniel Holbert [:dholbert]]

Attachment: testcase 1

(Spinning this off of bug 1638937 for a regression that we identified in the testcase there, which was introduced after that bug was filed)

STR:

1. Load attached testcase.

EXPECTED RESULTS:
The upper and lower section should look the same. (Both of the teal boxes should use the fallback 300px by 150px intrinsic size defined in https://www.w3.org/TR/css-sizing-3/#intrinsic-sizes )

ACTUAL RESULTS:
In the first one (with display:flex), the teal SVG element is wide and in fact overflows its container. It looks like we're sizing it to 100% of the container's border-box width, or something like that.

This seems to be a regression. As TYLin noted in bug 1638937 comment 5: mozregression finds this range, and bug 1686603 is likely the suspect behind it.

Note, this is similar to bug 1651754, but this specific testcase regressed more-recently than when that bug is filed, so I'm considering it distinct at this point. (It's possible that the regression was just exposing a new way to trigger the same issue, though.)

Comment 1

[BugBot [:suhaib / :marco/ :calixte]]

Set release status flags based on info from the regressing bug 1686603

:TYLin, since you are the author of the regressor, bug 1686603, could you take a look?
For more information, please visit auto_nag documentation.

Comment 2

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

I can take a look.

Comment 3

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

Attachment: Bug 1786610 - Use auto main-size workaround for replaced elements without aspect-ratio when computing flex base size. r?dholbert

This bug is regressed by Bug 1686603 Part 4 [1]. When the used flex-basis is
'content', the old code computes flex base size by using 'auto' as the main size
in nsContainerFrame::ComputeSizeWithIntrinsicDimensions(). The method is for
replaced elements to compute sizes, even if the element has no preferred
aspect-ratio such as an <svg> without viewBox nor aspect-ratio property.

However, Bug 1686603 Part 4 made replaced elements without preferred
aspect-ratio uses 'max-content' when computing flex base size. Unfortunately, we
only trigger the replaced elements intrinsic sizing via 'auto' but not via
'max-content', so this patch restores the behavior via emplacing 'auto' in
styleFlexBaseSize.

[1] https://phabricator.services.mozilla.com/D101795

Depends on D155627

Comment 4

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/b0c7e62885ba
Use auto main-size workaround for replaced elements without aspect-ratio when computing flex base size. r=dholbert

Comment 5

[Iulian Moraru]

https://hg.mozilla.org/mozilla-central/rev/b0c7e62885ba

Comment 6

[Giorgia Nichita, Release Desktop QA]

Reproduced this issue on Win 10 using an affected build from 2022-08-23.
Verified as fixed on Firefox 106.0 (20221010110315) on Win 10, Ubuntu 21,04 and macOS 10.15.