1953879 - For flex items that are replaced elements (e.g. img, canvas) with percent width and auto height, Firefox shrinks them to be smaller than their specified width, but other browsers don't

Status: NEW

(Core :: Layout: Flexbox, defect)

Description

[Daniel Holbert [:dholbert]]

Attachment: testcase 1

[might be a dupe, not sure]

STR:

1. Load attached testcase.

EXPECTED RESULTS:
Two large purple squares, each one having 2x width of the orange box.

ACTUAL RESULTS:
Two small purple squares, both shrunk to fit inside the orange box.

This is the root cause of webcompat site-report bug 1953077, affecting nintendo.com.

Chromium/WebKit give EXPECTED RESULTS; Firefox 138.0a1 (2025-03-10) gives ACTUAL RESULTS.

It looks like we're treating the percent-width on the canvas element as permission to lower the automatic minimum width to 0, whereas Chrome and WebKit are resolving that percent width against the size of the container and are using it as a specified-size-suggestion (to reduce the automatic minimum width to that amount). Or something along those lines...

Comment 1

[Daniel Holbert [:dholbert]]

Attachment: testcase 2 (comparing canvas flex items on top to div flex items on bottom)

Here's a testcase that compares replaced element flex items (<canvas> in this case) to a regular div with an aspect-ratio, with a large specified height to give us a large "transferred size suggestion" in both cases.

Chrome renders both of these the same, with the flex item at its specified percent width.
Firefox renders the top half with the canvas flex items squished to fit (as with the previous testcase), whereas we match Chrome on the bottom half (with the div flex items).