1683976 - Make flex item consider box-sizing when deriving its main size from aspect-ratio

Status: RESOLVED FIXED

(Core :: Layout: Flexbox, defect)

Description

[Ting-Yu Lin [:TYLin] (PST, UTC-8)]

Similar to bug 1683424, when we calculate a flex item's main size from its definite cross-size and aspect-ratio, and the aspect-ratio is from style aspect-ratio:<ratio> [1], the ratio should work with the dimensions of the box specified by box-sizing.

[1] https://drafts.csswg.org/css-sizing-4/#valdef-aspect-ratio-ratio

Comment 1

[Ting-Yu Lin [:TYLin] (PST, UTC-8)]

Attachment: Bug 1683976 Part 1 - Rename intrinsic ratio to aspect ratio in nsFlexContainerFrame.

FlexItem::mIntrinsicRatio caches the AspectRatio from
nsIFrame::GetAspectRatio(), which can either be the natural aspect-ratio
of the element or the aspect-ratio set from style system. Rename it and
its accessors for accuracy.

The comments are revised to match the term "preferred aspect ratio" used
throughout the flexbox spec.

Comment 2

[Ting-Yu Lin [:TYLin] (PST, UTC-8)]

Attachment: Bug 1683976 Part 2 - Move ClampMainSizeViaCrossAxisConstraints() into FlexItem.

We are going to revise this method in the next part, so this patch
simply moves this method into FlexItem without doing any improvement.

Depends on D100369

Comment 3

[Ting-Yu Lin [:TYLin] (PST, UTC-8)]

Attachment: Bug 1683976 Part 3 - Make flex item work with box-sizing when its aspect-ratio is set from <ratio>.

Per aspect ratio spec [1], when specifying aspect-ratio:<ratio>, the
size calculations involving the aspect ratio work with the dimensions of
the box specified by box-sizing.

MainSizeFromAspectRatio() doesn't consider box-sizing, so we replace it
with AspectRatio::ComputeRatioDependentSize() which considers
box-sizing.

[1] https://drafts.csswg.org/css-sizing-4/#valdef-aspect-ratio-ratio

Depends on D100370

Comment 4

[Ting-Yu Lin [:TYLin] (PST, UTC-8)]

Attachment: Bug 1683976 Part 4 - Reset ReflowInput's mBSizeIsSetByAspectRatio flag if we override flex item's block-size.

If the flex container overrides a flex item's block-size, we don't want
to apply aspect-ratio's automatic content-based minimum sizes
https://drafts.csswg.org/css-sizing-4/#aspect-ratio-minimum.

Depends on D100371

Comment 5

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/7b3500bc99cd
Part 1 - Rename intrinsic ratio to aspect ratio in nsFlexContainerFrame. r=dholbert,boris
https://hg.mozilla.org/integration/autoland/rev/2c5d4838ecd8
Part 2 - Move ClampMainSizeViaCrossAxisConstraints() into FlexItem. r=dholbert
https://hg.mozilla.org/integration/autoland/rev/d2a613ecea6b
Part 3 - Make flex item work with box-sizing when its aspect-ratio is set from <ratio>. r=dholbert
https://hg.mozilla.org/integration/autoland/rev/2ebcdae9c537
Part 4 - Reset ReflowInput's mBSizeIsSetByAspectRatio flag if we override flex item's block-size. r=dholbert

Comment 6

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

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

Comment 7

[Alexandru Michis [:malexandru]]

https://hg.mozilla.org/mozilla-central/rev/7b3500bc99cd
https://hg.mozilla.org/mozilla-central/rev/2c5d4838ecd8
https://hg.mozilla.org/mozilla-central/rev/d2a613ecea6b
https://hg.mozilla.org/mozilla-central/rev/2ebcdae9c537

Comment 8

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

Upstream PR merged by moz-wptsync-bot