Closed Bug 1666643 Opened 4 years ago Closed 4 years ago

New wpt failures in /css/css-flexbox/ [flex-aspect-ratio-img-row-008.html, flex-aspect-ratio-img-row-009.html]

Categories

(Core :: Layout: Flexbox, defect)

defect

Tracking

()

RESOLVED FIXED

People

(Reporter: wpt-sync, Unassigned)

References

Details

(Whiteboard: [wpt])

Attachments

(1 file, 1 obsolete file)

Syncing wpt PR 25476 found new untriaged test failures in CI

Tests Affected

New Tests That Don't Pass

/css/css-flexbox/flex-aspect-ratio-img-row-008.html: FAIL (Chrome: PASS, Safari: FAIL)
/css/css-flexbox/flex-aspect-ratio-img-row-009.html: FAIL (Chrome: PASS, Safari: FAIL)

CI Results

Gecko CI (Treeherder)
GitHub PR Head

Notes

These updates will be on mozilla-central once bug 1664327 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.

The first test here is:
https://wpt.live/css/css-flexbox/flex-aspect-ratio-img-row-008.html

It has this SVG image:

<img src="data:image/svg+xml,%3Csvg viewBox='0 0 200 400' width='50px' xmlns='http://www.w3.org/2000/svg' %3E%3Crect width='100%' fill='green' /%3E%3C/svg%3E" style="border-left: 50px solid green; min-width: 0px;">

Firefox renders this image as blank (aside from its 50px border) -- and I think the image being blank is correct, because the only graphical content it contains is a SVG rect with no specified height, which implicitly means it has a height of 0.

If you specify the height manually (i.e. if you add height='100%' to that rect), then Firefox passes this test.

@dgrogan, is the rect element's height omitted by mistake, or is it intentionally missing as part of testing something that I'm not seeing here?

Flags: needinfo?(dgrogan)

Here's the SVG file in question (as an actual standalone file, rather than a data URI).

Chrome renders this testcase with some green visible in the middle-left area, which (as noted above) seems wrong to me, given that the green rect does not have a specified height (which I believe means it has zero height). I have no idea why Chrome is assigning that rect any particular height.

(er sorry, that wasn't the right file -- here's the actual one from the testcase)

Attachment #9177286 - Attachment is obsolete: true
Attachment #9177286 - Attachment description: the SVG file from testcase flex-aspect-ratio-img-row-008.html → (ignore this file; I attached the wrong version)

Edge 18 (pre-Chromium) and Safari 13.1 agree with Firefox that the attached SVG from flex-aspect-ratio-img-row-008.html (https://bugzilla.mozilla.org/attachment.cgi?id=9177287 ) should render blank when viewed directly, FWIW.

The omitted height was unintentional, and I didn't notice because the Chrome bug. Apologies for the false alarm. I will fix the test.

Flags: needinfo?(dgrogan)

Though I think flex-aspect-ratio-img-row-009.html will still fail in Firefox after I fix the test because of the bug referenced therein?

I put a fix up for review. It will land by tomorrow.

Again, apologies.

Thanks for the quick reply & the quick fix!

The second testcase ("-009") is here:
https://wpt.live/css/css-flexbox/flex-aspect-ratio-img-row-008.html
...and it needs the same fix to its SVG (hopefully that's part of your patch). And yeah, even after that fix, that one fails in Firefox due to bug 1136312 (and the fact that we treat elements with aspect ratios as infinitely shrinkable right now, due to old spec text).

It's possible it'll be better in a day or two due to the just-landed-hours-ago patches for bug 1316534, which IIRC may have updated that logic.

Do you know if there's already a Blink bug filed to track that SVG-rect-rendering-despite-having-no-height issue? (perhaps you could file one if there isn't already a bug on that?)

(I was going to file one -- but since you're here, you're probably in a better position to do so, or to know if one already exists.)

Flags: needinfo?(dgrogan)

Thanks for the heads up about the Firefox behavior change.

My patch does add a height attribute to the <rect> element in flex-aspect-ratio-img-row-009.html too.

I will look for or file a bug for the SVG-rect issue.

Flags: needinfo?(dgrogan)

Great, thanks! Looks like our bot already filed https://bugzilla.mozilla.org/show_bug.cgi?id=1666686 to sync that down.

Looks like we imported the tests & the fixes all together, in this push:
https://hg.mozilla.org/integration/autoland/pushloghtml?changeset=3f84385a965e12481f11b1f2f06f902602c3f665

That includes this commit that adds the tests:

Bug 1664327 [wpt PR 25476] - [css-flex] Fix flex base size for some aspect ratio items, a=testonly
...and this commit that has the fix from comment 11 - 12 to address the test bug that caused the failures:
Bug 1666686 [wpt PR 25691] - [css-flex] Add missing height attributes to some svg img flex items, a=testonly

Additionally, I verified that our current Nightly does pass both tests (though earlier Firefox versions fail the -009 testcase, due to the now-fixed bug 1136312, as noted in the text of the testcase).

Status: NEW → RESOLVED
Closed: 4 years ago
Resolution: --- → FIXED
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Created:
Updated:
Size: