1626146 - New wpt failures from PR 22519: /css/css-flexbox/flexitem-stretch-image.html

Status: RESOLVED FIXED

(Core :: Layout: Flexbox, defect, P3)

Description

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

The following tests have untriaged failures in the CI runs for wpt PR 22519:

Firefox-only failures

/css/css-flexbox/flexitem-stretch-image.html
.flexbox 1: FAIL

These updates will be on mozilla-central once bug 1625821 lands.

Note: this bug is for tracking fixing the issues and is not
owned by the wpt sync bot.

This bug is linked to the relevant tests by an annotation in
https://github.com/web-platform-tests/wpt-metadata. These annotations
can be edited using the wpt interop dashboard
https://jgraham.github.io/wptdash/

If this bug is split into multiple bugs, please also update the
annotations, otherwise we are unable to track which wpt issues are
already triaged. Resolving as duplicate or closing this issue should
be cause the bot to automatically update or remove the annotation.

Comment 3

[Daniel Holbert [:dholbert]]

So we're disagreeing with the test's expectations about the height of the images here.

Here's a reduced testcase, where Firefox & EdgeHTML (pre-chromium Edge18) both size the image to a 200x200 square while Chrome & Safari size it to a 200x100 rectangle (leaving it at its intrinsic height):

data:text/html,<div style="display:flex;width:200px;border:1px solid black"><img style="flex:1" src="https://placekitten.com/100/100">

(As a fiddle: https://jsfiddle.net/dholbert/r802xo7p/ )

I recall this being a compat issue, though I don't recall what the spec says. [checking]

Comment 4

[Daniel Holbert [:dholbert]]

Yeah, this is a spot where we're doing the right thing.

The question here is: what's the cross-size of the flex line? Is it determined using the pre-flexing or post-flexing size of the image?

The flexbox spec makes it pretty explicit, I think:

Resolve the flexible lengths of all the flex items to find their used main size
9.4. Cross Size Determination

7. Determine the hypothetical cross size of each item by performing layout with the used main size and the available space, treating auto as fit-content.
8. Calculate the cross size of each flex line.
   [...] Among all the items [...], find the largest outer hypothetical cross size.
   https://drafts.csswg.org/css-flexbox-1/

In my reduced testcase (data-url / image), the item's used main size is 200px, and when we "perform layout with the used main size" (step 7 quoted above), we get a cross size of 200px, which is then used as this image's cross size and also the line's cross size (which then is reinforced as the image's cross size when it gets stretched to fit the line via default align-self:stretch behavior).

In the WPT test, browsers agree that first item's used main size is 345px, and so "perform layout with the used main size" produces a hypothetical cross size of 345px for that item (since it has a 1:1 aspect ratio). Similarly, the other item has a used main size of 255px and a hypothetical cross size of 245px. So the line's cross size is the largest of these, which is 345px, and both items should be stretched to this height per flexbox section 9.4 step 11.

So the test's expectation is wrong. It should have data-expected-height="345", instead of 100.

The underlying issue is already reported in Chromium's bug tracker as https://bugs.chromium.org/p/chromium/issues/detail?id=721123

Comment 5

[Daniel Holbert [:dholbert]]

Attachment: Bug 1626146: Adjust expected height in WPT test flexitem-stretch-image.html to account for image hypothetical height being influenced by its used main size. r?cbiesinger

This makes the test pass in Gecko and EdgeHTML and fail in Chromium/WebKit.
The test-failure is due to an underlying bug that these engines share, which is
filed as:
https://bugs.chromium.org/p/chromium/issues/detail?id=721123
https://bugs.webkit.org/show_bug.cgi?id=209983

Comment 6

[Daniel Holbert [:dholbert]]

[setting ni=biesi to be sure he saw the review request]

Comment 7

[Christian :Biesinger (don't email me, ping me on IRC)]

Sorry for the delay!

Comment 8

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/2613928f24cd
Adjust expected height in WPT test flexitem-stretch-image.html to account for image hypothetical height being influenced by its used main size. r=cbiesinger

Comment 9

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

Created web-platform-tests PR https://github.com/web-platform-tests/wpt/pull/22867 for changes under testing/web-platform/tests

Comment 10

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

Can't merge web-platform-tests PR due to failing upstream checks:
Github PR https://github.com/web-platform-tests/wpt/pull/22867
* Community-TC (pull_request) (https://community-tc.services.mozilla.com/tasks/groups/PmxoXnOuQ3utHvMgmK-vnA)

Comment 11

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

Upstream PR was closed without merging

Comment 12

[Bogdan Tara[:bogdan_tara | bogdant]]

https://hg.mozilla.org/mozilla-central/rev/2613928f24cd

Comment 13

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

Upstream PR was closed without merging

Comment 14

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

Upstream web-platform-tests status checks passed, PR will merge once commit reaches central.

Comment 15

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

Upstream PR merged by moz-wptsync-bot