1929151 - Firefox treats max-content width of img-with-no-intrinsic-size (e.g. dimensionless SVG) as 0 for the purposes of `min-wdith` and `min-width` (but should instead treat it as stretch/fill-available)

Status: NEW

(Core :: Layout: Images, Video, and HTML Frames, defect)

Description

[Daniel Holbert [:dholbert]]

Attachment: (SVG for use as image in testcase)

STR:

1. Load attached testcase.

ACTUAL RESULTS:
The 2nd and 3rd img elements are zero-sized and hence visibly missing. (These are the ones where we're depending on the actual max-content width of the dimensionless img element.)

EXPECTED RESULTS:
None of the img elements should be zero-sized.

Comment 1

[Daniel Holbert [:dholbert]]

Attachment: testcase 1

Comment 2

[Daniel Holbert [:dholbert]]

Chrome's behavior here (for the img elements that we don't render -- the ones with auto height and with max-width:max-content) seems to be to use max-width: stretch essentially, aka max-width: -webkit-fill-available.

(Similar to max-width:100%, but calibrated to fill the available space even if there's a thick border on the image and max-width is being applied to the content-box size.)

Comment 3

[Daniel Holbert [:dholbert]]

Attachment: testcase 2 (with thick border and margin on img elements, and border on 3rd img's container)

Here's a testcase to illustrate comment 2. Notice that Chrome sizes the 3rd img such that its margin-box exactly fills the purple-bordered containing block. If I instead use devtools to give that img max-width:100%, then it overshoots the containing block.

So: this is just a clue that Chrome isn't naively e.g. picking up the default width=100% attribute from the img's svg root element (which it otherwise might look like they're doing in simple cases).

Comment 4

[Daniel Holbert [:dholbert]]

Attachment: testcase 2 (with thick border and margin on img elements, and border on 3rd img's container)

(Reposting testcase 2 to fix a typo in one of the labels.)

Comment 5

[Daniel Holbert [:dholbert]]

Attachment: testcase 3 (now with 'min-width: max-content')

Here's a testcase to poke at 'min-width: max-content' - we disagree with Chrome on the same elements here (img elements 2 and 3, where we've got that style with an automatic height).

Firefox and Chrome are both self-consistent on this testcase vs. the previous ones -- Firefox seems to continue resolving the value to 0 (though in this case that doesn't serve as a constraint since it's a lower-bound); whereas Chrome resolves it to the stretch behavior (which is larger than the img would otherwise be in this example, and hence does serve as an observable constraint -- it makes the img element fill the purple-bordered container).