1800991 - min-content + percentage height doesn't account for aspect-ratio properly.

Status: ASSIGNED

(Core :: Layout, defect)

Description

[crgamingserver]

Attachment: minimum-viable-error.html

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:107.0) Gecko/20100101 Firefox/107.0

Steps to reproduce:

Open the included HTML file, simply change around the viewport size, either by simply resizing firefox or by using responsive-design mode.

Reproduced both in Firefox 107.0 and Firefox nightly 108.0b2 as of 16-11-2022.

Actual results:

The parent <picture> tag appears to keep the same width as the size of the source image, even though the img tag contained becomes smaller or larger.

In the example HTML file, the 2 gray colored divs on either side of the div should extend all the way up to the image itself. However with a really large viewport, the image overlaps the rightmost div, while a smaller viewport causes a whitespace between the rightmost div and the image.

Placing a simple <img> tag without a picture tag wrapping it produces expected behaviour.

Expected results:

The picture tag should resize in width properly.

Comment 1

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

The Bugbug bot thinks this bug should belong to the 'Core::Layout' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.

Comment 2

[Emilio Cobos Álvarez (:emilio)]

Attachment: Simpler test-case (shouldn't see red)

Seems like when computing intrinsic sizes we don't consider aspect-ratio properly. Boris, can you look?

Comment 3

[Boris Chiou [:boris]]

(In reply to Emilio Cobos Álvarez (:emilio) from comment #2)

Created attachment 9303794 [details]
Simpler test-case (shouldn't see red)

Seems like when computing intrinsic sizes we don't consider aspect-ratio properly. Boris, can you look?

Sure.

Comment 4

[Boris Chiou [:boris]]

(In reply to Emilio Cobos Álvarez (:emilio) from comment #2)

Seems like when computing intrinsic sizes we don't consider aspect-ratio properly. Boris, can you look?

Right. It seems GetPercentBSize() only checks the style value of the block size of its containing blocks. We should also take f->ISize(wm) and its aspect-ratio into account. (https://searchfox.org/mozilla-central/rev/a487112616e7e6d03a39877a3d317d0e46f8278a/layout/base/nsLayoutUtils.cpp#4318-4319)

Comment 5

[Boris Chiou [:boris]]

Attachment: Bug 1800991 - Take aspect-ratio into account for intrinsic size calculation with percentage height.

When resolving the percentage height, we check its containing blocks for
a suitable height as the percentage basis. However, the block size of
the containing block should take aspect-ratio into account. This means
if it has a definite width, an auto height, and an aspect-ratio, it's
possible to compute the height and use this height as the percentage
basis.

Obviously, we missed the implementation when resolving the percentage height
in nsLayoutUtils::IntrinsicForAxis().