Skip to content

Commit

Permalink
Compute transferred size suggestion only if a flex item is a replaced…
Browse files Browse the repository at this point in the history 
… element.

If the flex item is a non-replaced element and its min-width/min-height
is 'auto', the spec has changed so that it has no transferred size
suggestion now. https://drafts.csswg.org/css-flexbox-1/#min-size-auto

This patch also updates WPT tests to fix
#27878

Differential Revision: https://phabricator.services.mozilla.com/D112830

bugzilla-url: https://bugzilla.mozilla.org/show_bug.cgi?id=1703304
gecko-commit: fb14e6d29a44a79efc296cc727f92aa58ea4dacc
gecko-reviewers: dholbert
  • Loading branch information
@aethanyc @moz-wptsync-bot
aethanyc authored and moz-wptsync-bot committed May 1, 2021
1 parent f66c3a0 commit 21a7c47
Show file tree
Hide file tree
Showing 4 changed files with 75 additions and 43 deletions.
9 changes: 5 additions & 4 deletions css/css-sizing/aspect-ratio/flex-aspect-ratio-002.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,16 @@
<title>CSS aspect-ratio: Row flexbox min-width</title>
<link rel="author" title="Google LLC" href="https://www.google.com/">
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio">
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio-minimum">
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#min-size-auto">
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" />

<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>

<div style="display: flex;">
<!-- transferred size: 100px. content size suggestion: 200px.
min-width: min(100, 200). -->
<div style="background: green; height: 100px; aspect-ratio: 1/1; flex-basis: 0;">
<div style="width: 200px;"></div>
<!-- No transferred size suggestion since the flex item is non-replaced.
Content size suggestion is 100px. -->

This comment has been minimized.

Sign in to view

Copy link
@davidsgrogan

davidsgrogan Sep 1, 2021 •
edited
Loading

Member

@aethanyc I think this test is not right. I think the content size suggestion is 50px here, not 100px.

https://drafts.csswg.org/css-flexbox/#content-size-suggestion says

The content size suggestion is the min-content size in the main axis.

https://drafts.csswg.org/css-sizing-3/#intrinsic-sizes says:

The min-content size of a box ... is the size it would have if it was a float given an auto size in that axis (and no minimum or maximum size in that axis) and if its containing block was zero-sized in that axis.

https://jsfiddle.net/dgrogan/uv59y0jh/1/ sets up the described float and shows that both Gecko and Blink give a min-content size of 50px. The min-width: 0px; max-width: none; in the fiddle emulates the '(and no minimum or maximum size in that axis)' part of the definition.

Maybe Gecko is honoring the aspect-ratio's automatic minimum size when calculating the flex item's content size suggestion? If so, I'm pretty sure that's wrong, based on the parenthetical part of the definition and the discussion in w3c/csswg-drafts#6418.

Thoughts?

This comment has been minimized.

Sign in to view

Copy link
@aethanyc

aethanyc Sep 2, 2021

Author Contributor

Yes, Gecko is honoring the aspect-ratio's automatic minimum size when calculating the flex item's content size suggestion as if the item is a normal block with width:min-content https://jsfiddle.net/aethanyc/Lq5wfuvo/1/.

I see Tab agree in w3c/csswg-drafts#6418. that min-width: 0px; max-width: none; emulates the '(and no minimum or maximum size in that axis)' part of the definition. However, for non-replaced element, setting min-width: 0px effectively disables aspect-ratio's automatic minimum size, so the emulation somehow violates https://drafts.csswg.org/css-sizing-3/#min-content because it leads to content overflow.

min-content size:
Nominally, the smallest size a box could take that doesn’t lead to overflow that could be avoided by choosing a larger size.

I interpret '(no minimum or maximum size in that axis)' as no minimum or maximum size properties is set in that axis, so it's equivalent to both properties in their initial values, i.e.min-width:auto; max-width:none.

Another observation is that: we compute content size suggestion only if the item has min-size auto, so intuitively aspect-ratio's automatic minimum size should apply. If not, then for non-replaced element, content size suggestion is indistinguishable from the transferred size suggestion, which somewhat makes the content size suggestion less useful because we've removed transfer size suggestion for non-replaced element to make the two sizes distinguishable in w3c/csswg-drafts#6069 (comment)

@davidsgrogan Does above sound reasonable?

This comment has been minimized.

Sign in to view

Copy link
@davidsgrogan

davidsgrogan Sep 2, 2021 •
edited
Loading

Member

@davidsgrogan Does above sound reasonable?

First, yes, definitely reasonable. I think we have different but reasonable interpretations of the spec text.

Yes, Gecko is honoring the aspect-ratio's automatic minimum size when calculating the flex item's content size suggestion as if the item is a normal block with width:min-content https://jsfiddle.net/aethanyc/Lq5wfuvo/1/.

I see Tab agree in w3c/csswg-drafts#6418. that min-width: 0px; max-width: none; emulates the '(and no minimum or maximum size in that axis)' part of the definition. However, for non-replaced element, setting min-width: 0px effectively disables aspect-ratio's automatic minimum size, so the emulation somehow violates https://drafts.csswg.org/css-sizing-3/#min-content because it leads to content overflow.

min-content size:
Nominally, the smallest size a box could take that doesn’t lead to overflow that could be avoided by choosing a larger size.

We struggled with this violation, which is why I originally filed w3c/csswg-drafts#6418. In the comment you linked to, Tab says the "Nominally" definition is "a rough conceptual gloss of the behavior" and that 5.1 is the technical definition. So that's why I think the "Nominally" definition can be violated when in conflict with 5.1

I interpret '(no minimum or maximum size in that axis)' as no minimum or maximum size properties is set in that axis, so it's equivalent to both properties in their initial values, i.e.min-width:auto; max-width:none.

That interpretation is reasonable. We considered that interpretation but ultimately decided the text probably intended to mean min-width:0px. (Which is one of the reasons I included it in w3c/csswg-drafts#6418, to see if Tab or fantasai pushed back.)

Another observation is that: we compute content size suggestion only if the item has min-size auto, so intuitively aspect-ratio's automatic minimum size should apply. If not, then for non-replaced element, content size suggestion is indistinguishable from the transferred size suggestion, which somewhat makes the content size suggestion less useful because we've removed transfer size suggestion for non-replaced element to make the two sizes distinguishable in w3c/csswg-drafts#6069 (comment)

That resolution is about min-height specifically, but this test is about min-width. Though I haven't yet figured out why @cbiesinger emphasized the issue was about height. (Seems like the concern is valid in both axes, but I'm probably missing something.)

Anyway, good observation. Should we just put this case in w3c/csswg-drafts#6069 and Agenda+ it?

One option would be to follow @bfgeek's suggestion in w3c/csswg-drafts#5032 (comment), and no longer use min-content size in content size suggestion:

Things like flexbox etc, will also potentially need to refer to the min-intrinsic size instead? E.g. here?

That would make this test correct as is.

Or we could even spec that the content size suggestion honors both the min-intrinsic size AND the min-content size. Does Firefox's content size suggestion honor both? Or just min-intrinsic size?

Thanks for engaging here, I hope to get interop on this soon as I finish the last few known flex/aspect-ratio interaction bugs in Blink.

This comment has been minimized.

Sign in to view

Copy link
@aethanyc

aethanyc Sep 2, 2021

Author Contributor

That resolution is about min-height specifically, but this test is about min-width. Though I haven't yet figured out why @cbiesinger emphasized the issue was about height. (Seems like the concern is valid in both axes, but I'm probably missing something.)
Anyway, good observation. Should we just put this case in w3c/csswg-drafts#6069 and Agenda+ it?

Yes, I believe the concern is valid in both axes. It's just the RESOLVED text is described only min-height:auto, so I guess we don't need to Agenda+ it. In the details meeting log:

astearns: any objection to keep fantasai's edit in the ED?
RESOLVED: non-replaced elements with an aspect ratio honor the intrinsic size in flexbox for min-height:auto

Before the resolution was made, the the edit had been done in the spec https://drafts.csswg.org/css-flexbox/#content-based-minimum-size in below quote text. (Not sure why the issue still open though.)

The content-based minimum size of a flex item is ... ; otherwise, the smaller of its transferred size suggestion and its content size suggestion if the element is replaced and its transferred size suggestion exists; ...

Or we could even spec that the content size suggestion honors both the min-intrinsic size AND the min-content size. Does Firefox's content size suggestion honor both? Or just min-intrinsic size?

Sorry, I don't fully recall the difference between min-content size and min-intrinsic size (or do you mean min-content contribution?) Anyway, Firefox computes content size suggestion (inline-axis) here. With the availISize=0 and ShrinkWrap flag, it should return the min-content size formally defined in 5.1 https://drafts.csswg.org/css-sizing-3/#intrinsic-sizes.

This comment has been minimized.

Sign in to view

Copy link
@davidsgrogan

davidsgrogan Sep 10, 2021 •
edited
Loading

Member

I got ahead of myself; I shouldn't have mentioned the min-intrinsic thing.

Let's back up a bit and focus only on the min-content width of this element:

<div style="background: green; height: 100px; aspect-ratio: 1/2;">
    <div style="width: 100px;"></div>
  </div>

I understand 5.1 to dictate a min-content width of 50px.
You understand 5.1 to dictate a min-content width of 100px. (Right?)

Our difference in understanding is because we interpret the "no ... minimum size" part of 5.1 differently. So I think we need a spec issue to clarify what the "no minimum size" means. Thoughts?

This comment has been minimized.

Sign in to view

Copy link
@davidsgrogan

davidsgrogan Sep 10, 2021

Member

Edited above comment to say "minimum" instead of "maximum" in a few places.

This comment has been minimized.

Sign in to view

Copy link
@aethanyc

aethanyc Sep 11, 2021

Author Contributor

I interpret '(no minimum or maximum size in that axis)' as no minimum or maximum size properties is set in that axis, so it's equivalent to both properties in their initial values, i.e.min-width:auto; max-width:none.

After re-reading your previous comments and relevant discussion in issues, I now believe my above understanding of the min-content width is wrong. Your interpretation makes more sense. Sorry that I made our discussion detour a bit.

<div style="background: green; height: 100px; aspect-ratio: 1/2;"> 
  <div style="width: 100px;"></div>
</div>

For the this element, you're right that the min-content width is 50px (as if width:min-content is specified. It is the min-width:auto that resolved to 100px that makes the element's final width 100px.

Our difference in understanding is because we interpret the "no ... minimum size" part of 5.1 differently. So I think we need a spec issue to clarify what the "no minimum size" means. Thoughts?

Yes, if you feel so, please file a issue. There will be zero ambiguity if the spec could say "no minimum size" is equivalent to min-{width,height} 0px, and this effectively disables aspect-ratio's automatic minimum sizes.

One option would be to follow @bfgeek's suggestion in w3c/csswg-drafts#5032 (comment), and no longer use min-content size in content size suggestion:

Things like flexbox etc, will also potentially need to refer to the min-intrinsic size instead? E.g. here?

Or we could even spec that the content size suggestion honors both the min-intrinsic size AND the min-content size. Does Firefox's content size suggestion honor both? Or just min-intrinsic size?

Let's go back to our flex scenario in this wpt test. Now your option and question above makes sense to me. Yes, Firefox effectively computes content size suggestion by using the item's min-intrinsic size (min-content contribution) in both inline and block axis to prevent content overflow, i.e. it considers aspect-ratio's automatic min size when resolving flex item's automatic min size. I understand the spec is asking for "min-content size", and I didn't aware when implementing it that it implies disabling aspect-ratio's auto min size. However, my previous observation still holds because by considering aspect-ratio's auto min size is the way to make transfer size suggestion distinguishable from content size suggestion for non-replaced element. Personally I feel this makes an element's automatic size consistent under block container or flex container. Here is an example for (the flex part is the same as flex-aspect-ratio-004.html) https://jsfiddle.net/aethanyc/pfno52L9/

(Side note: Tab filed an issue about the usefulness of aspect-ratio's auto min size in inline axis in w3c/csswg-drafts#5268, but that's another debate.)

@davidsgrogan Do you feel it makes sense for flex (or grid)'s content size suggestion to use "min-content contribution"? My only fear is that it can have some weird interaction with compressible replaced element ...

This comment has been minimized.

Sign in to view

Copy link
@davidsgrogan

davidsgrogan Sep 20, 2021 •
edited
Loading

Member

Yes, if you feel so, please file a issue. There will be zero ambiguity if the spec could say "no minimum size" is equivalent to min-{width,height} 0px, and this effectively disables aspect-ratio's automatic minimum sizes.

If you and I have the same understanding for this part then I won't file an issue, even though the phrase "no minimum size" IS ambiguous.

One option would be to follow @bfgeek's suggestion in w3c/csswg-drafts#5032 (comment), and no longer use min-content size in content size suggestion:

Things like flexbox etc, will also potentially need to refer to the min-intrinsic size instead? E.g. here?

Or we could even spec that the content size suggestion honors both the min-intrinsic size AND the min-content size. Does Firefox's content size suggestion honor both? Or just min-intrinsic size?

Let's go back to our flex scenario in this wpt test. Now your option and question above makes sense to me. Yes, Firefox effectively computes content size suggestion by using the item's min-intrinsic size (min-content contribution)

Oh, I thought min-intrinsic is different than min-content contribution. I thought when Ian used min-intrinsic in 5032 and Tab used it in 5268, it meant the min-content size the element would have if the element had no preferred aspect ratio.

in both inline and block axis to prevent content overflow, i.e. it considers aspect-ratio's automatic min size when resolving flex item's automatic min size. I understand the spec is asking for "min-content size", and I didn't aware when implementing it that it implies disabling aspect-ratio's auto min size. However, my previous observation still holds because by considering aspect-ratio's auto min size is the way to make transfer size suggestion distinguishable from content size suggestion for non-replaced element. Personally I feel this makes an element's automatic size consistent under block container or flex container. Here is an example for (the flex part is the same as flex-aspect-ratio-004.html) https://jsfiddle.net/aethanyc/pfno52L9/

I see what you mean. The philosophical difference I've seen expressed between block and flex in these scenarios is that flex is supposed to shrink stuff, whereas block is not. So maybe flex shrinking the green rectangle smaller than block is ok? I'm not sure.

(Side note: Tab filed an issue about the usefulness of aspect-ratio's auto min size in inline axis in w3c/csswg-drafts#5268, but that's another debate.)

Thanks for the link, I was not aware.

@davidsgrogan Do you feel it makes sense for flex (or grid)'s content size suggestion to use "min-content contribution"? My only fear is that it can have some weird interaction with compressible replaced element ...

I'm not sure what content size suggestion should do for aspect ratio items. Ian and I once discussed that maybe content size suggestion should be the larger (smaller? I can't remember) of min-content and min-intrinsic. We'd definitely need a spec issue and WG discussion for changing content size suggestion. I'll think on it a bit and file a WG issue and cc you. But if I forget or you want to file first, go for it.

This comment has been minimized.

Sign in to view

Copy link
@davidsgrogan

davidsgrogan Oct 6, 2021

Member

Just FYI, I want to wait for a resolution on w3c/csswg-drafts#6693 before proceeding here.

This comment has been minimized.

Sign in to view

Copy link
@davidsgrogan

davidsgrogan Nov 4, 2021

Member

Here is an example for (the flex part is the same as flex-aspect-ratio-004.html) https://jsfiddle.net/aethanyc/pfno52L9/

This case bothers me, too. I can't think of a principle that explains why we'd want min-height:auto to have different values for the flex item and block box in that particular example. There's the principle that we don't want min-height:auto to prevent too much shrinking b/c the whole point of flexbox is that it can shrink the items[1]. But that doesn't apply here because the item isn't being shrunk.

@davidsgrogan Do you feel it makes sense for flex (or grid)'s content size suggestion to use "min-content contribution"? My only fear is that it can have some weird interaction with compressible replaced element ...

If we make content size suggestion be exactly min-content contribution, then specified size suggestion is redundant. I think that inhibits flexbox too much (same principle from prior paragraph). Flexbox couldn't then shrink an item below it's preferred main size, even if that was larger than the item's min-content size.

I posted w3c/csswg-drafts#6794 about this.

Until that's resolved, though, I am going to change these tests to assert the behavior dictated by the current spec.

[1] w3c/csswg-drafts#6069 (comment) -- "Remember, this is the ..."

This comment has been minimized.

Sign in to view

Copy link
@davidsgrogan

davidsgrogan Nov 7, 2021

Member

Here is an example for (the flex part is the same as flex-aspect-ratio-004.html) https://jsfiddle.net/aethanyc/pfno52L9/

I just noticed that specified size suggestion also applies to this case (maybe you'd realized this whole time). It is 50px. The spec says the specified size suggestion is the preferred size, which the aspect-ratio + definite cross size can set.

Chrome doesn't do that for specified size suggestion. If there is no specified main size, Chrome doesn't apply any specified size suggestion.

This comment has been minimized.

Sign in to view

Copy link
@aethanyc

aethanyc Nov 9, 2021 •
edited
Loading

Author Contributor

I just noticed that specified size suggestion also applies to this case (maybe you'd realized this whole time). It is 50px.

I believe in https://jsfiddle.net/aethanyc/pfno52L9/, the flex item only has content size suggestion. There no specified size suggestion because the main size (height) is auto.

The spec says the specified size suggestion is the preferred size, which the aspect-ratio + definite cross size can set.

Could you point me to the spec text about this? I see "main size" is defined as "The main size of a flex container or flex item refers to its width or height, whichever is in the main dimension." in https://drafts.csswg.org/css-flexbox-1/#main-size. I fail to make the connect that the preferred main size is aspect-ratio + definite cross size.

This comment has been minimized.

Sign in to view

Copy link
@davidsgrogan

davidsgrogan Nov 9, 2021

Member

Oh, https://drafts.csswg.org/css-sizing-4/#aspect-ratio-automatic is unclear about whether the preferred size is affected or whether only the automatic size is affected.

In https://jsfiddle.net/aethanyc/pfno52L9/, the height of the flex item is an automatic size. https://drafts.csswg.org/css-sizing-4/#aspect-ratio-automatic describes how the automatic size is calculated. But it also hints that the result is the preferred size: "The axis in which the preferred size calculation depends..." and "If neither width nor height is an automatic size, it can have no effect on its preferred sizes." But now that you point it out the section is not clear. The section never directly says it affects the preferred size. But if not, why mention preferred sizes at all?

Specified says

If the item’s preferred main size is definite, then the specified size suggestion is that size. It is otherwise undefined.

If the section from aspect ratio spec above applies to the preferred size then it affects specified size suggestion.

This comment has been minimized.

Sign in to view

Copy link
@aethanyc

aethanyc Nov 10, 2021

Author Contributor

From my discussion offline with @dholbert, @dholbert pointed that the definition of specified size suggestion was changed about one year ago from "If the computed main size property is definite..." to "If the preferred main size is definite..." in w3c/csswg-drafts@0c1a35d.

Now I see that the current spec does imply that specified size suggestion can be computed from aspect-ratio + definite cross size. That suggests, again, transferred size suggestion is completely redundant, even if the item a replaced element.

This comment has been minimized.

Sign in to view

Copy link
@aethanyc

aethanyc Nov 10, 2021 •
edited
Loading

Author Contributor

Chrome doesn't do that for specified size suggestion. If there is no specified main size, Chrome doesn't apply any specified size suggestion.

Firefox doesn't do that, either. We still follow the old spec, and didn't consider aspect-ratio in the specified size suggestion.
<div style="background: green; height: 100px; aspect-ratio: 1/2; flex-basis: 0;">
<div style="width: 100px;"></div>
</div>
</div>
9 changes: 5 additions & 4 deletions css/css-sizing/aspect-ratio/flex-aspect-ratio-004.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,16 @@
<title>CSS aspect-ratio: Column flexbox min-height</title>
<link rel="author" title="Google LLC" href="https://www.google.com/">
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio">
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio-minimum">
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#min-size-auto">
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" />

<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>

<div style="display: flex; flex-direction: column;">
<!-- transferred size: 100px. content size suggestion: 200px.
min-height: min(100, 200). -->
<div style="background: green; width: 100px; aspect-ratio: 1/1; flex-basis: 0;">
<div style="height: 200px;"></div>
<!-- No transferred size suggestion since the flex item is non-replaced.
Content size suggestion is 100px. -->
<div style="background: green; width: 100px; aspect-ratio: 2/1; flex-basis: 0;">
<div style="height: 100px;"></div>
</div>
</div>
42 changes: 28 additions & 14 deletions css/css-sizing/aspect-ratio/flex-aspect-ratio-025.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,8 @@
<link rel="author" title="Ting-Yu Lin" href="mailto:[email protected]">
<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio">
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio-minimum">
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#min-size-auto">
<link rel="match" href="../../reference/ref-filled-green-200px-square.html" />
<style>
.flexContainer {
Expand All @@ -21,54 +23,66 @@

<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>

<!-- In all of the subtests here, each flex item's automatic minimum width is
resolved directly from its content size suggestion. Notably, these items
*do not* get a "transferred size suggestion", because they are all
*non-replaced* elements; and "transferred size suggestion" is only used
for resolving automatic minimum sizes on *replaced* elements. However,
note that we do "transfer" sizes through the aspect ratio, as part of
computing the content size suggestion and/or flex base size. -->

<!-- In the following four flex containers, the aspect-ratio works with border-box. -->
<div class="flexContainer" style="width: auto;">
<!-- The border-box height 25px is transferred to the main axis,
yielding a resolved flex base size of 200px. -->
yielding a resolved flex base size (border-box) of 200px. -->
<div class="item" style="min-width:0; height: 25px; aspect-ratio: 8/1;"></div>
</div>

<div class="flexContainer">
<!-- The border-box height 25px is transferred to the main axis,
yielding a resolved min-width:auto of 200px. -->
<!-- The content size suggestion (border-box) is 200px because the
border-box height 25px is transferred to the main axis. -->
<div class="item" style="height: 25px; aspect-ratio: 8/1;"></div>
</div>

<div class="flexContainer">
<!-- The border-box min-height 25px is transferred to the main axis,
yielding a resolved min-width:auto of 200px. -->
<!-- The content size suggestion (border-box) is 200px because the
border-box height 25px (enforced by min-height) is transferred to the
main axis. -->
<div class="item" style="min-height: 25px; aspect-ratio: 8/1;"></div>
</div>

<div class="flexContainer">
<!-- The border-box height 25px (clamped by max-height) is transferred to the main axis,
yielding a resolved min-width:auto of 200px. -->
<!-- The content size suggestion (border-box) is 200px because the
border-box height 25px (clamped by max-height) is transferred to the
main axis. -->
<div class="item" style="max-height: 25px; height: 100px; aspect-ratio: 8/1;"></div>
</div>

<!-- In the following four flex containers, the aspect-ratio works with content-box
because its value contains 'auto'. -->
<div class="flexContainer" style="width: auto;">
<!-- The content-box height 10px is transferred to the main axis,
yielding a resolved flex base size of 190px. -->
yielding a resolved flex base size (content-box) of 190px. -->
<div class="item" style="min-width:0; height: 25px; aspect-ratio: auto 19/1;"></div>
</div>

<div class="flexContainer">
<!-- The content-box height 10px is transferred to the main axis,
yielding a resolved min-width:auto of 190px. -->
<!-- The content size suggestion (content-box) is 190px because the
content-box height 10px is transferred to the main axis. -->
<div class="item" style="height: 25px; aspect-ratio: auto 19/1;"></div>
</div>

<div class="flexContainer">
<!-- The content-box min-height 10px is transferred to the main axis,
yielding a resolved min-width:auto of 190px. -->
<!-- The content size suggestion (content-box) is 190px because the
content-box height 10px (enforced by min-height) is transferred to the
main axis. -->
<div class="item" style="min-height: 25px; aspect-ratio: auto 19/1;"></div>
</div>

<div class="flexContainer">
<!-- The content-box height 10px (clamped by max-height) is transferred
to the main axis, yielding a resolved min-width:auto of 190px. -->
<!-- The content size suggestion (content-box) is 190px because the
content-box height 10px (clamped by max-height) is transferred to the
main axis. -->
<div class="item" style="max-height: 25px; height: 100px; aspect-ratio: auto 19/1;"></div>
</div>
</html>
58 changes: 37 additions & 21 deletions css/css-sizing/aspect-ratio/flex-aspect-ratio-026.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,8 @@
<link rel="author" title="Ting-Yu Lin" href="mailto:[email protected]">
<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio">
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio-minimum">
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#min-size-auto">
<link rel="match" href="../../reference/ref-filled-green-200px-square.html" />
<style>
.flexContainer {
Expand All @@ -19,60 +21,74 @@
box-sizing: border-box;
}
.item > div {
height: 500px; /* Set a large content size suggestion for flex item. */
height: 190px; /* Set the content size suggestion for flex item. */
}
</style>

<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>

<!-- In all of the subtests here, each flex item's automatic minimum height is
resolved directly from its content size suggestion. Notably, these items
*do not* get a "transferred size suggestion", because they are all
*non-replaced* elements; and "transferred size suggestion" is only used
for resolving automatic minimum sizes on *replaced* elements. However,
note that we do "transfer" sizes through the aspect ratio, as part of
computing the content size suggestion and/or flex base size. -->

<!-- In the following four flex containers, the aspect-ratio works with border-box. -->
<div class="flexContainer" style="height: auto;">
<!-- The border-box width 25px is transferred to the main axis,
yielding a resolved flex base size of 200px. -->
yielding a resolved flex base size (border-box) of 200px. -->
<div class="item" style="min-height:0; width: 25px; aspect-ratio: 1/8;"><div></div></div>
</div>

<div class="flexContainer">
<!-- The border-box width 25px is transferred to the main axis,
yielding a resolved min-height:auto of 200px. -->
<div class="item" style="width: 25px; aspect-ratio: 1/8;"><div></div></div>
<!-- The content size suggestion is 190px, i.e. the height of the item's
child div. -->
<div class="item" style="width: 25px; aspect-ratio: 1/1;"><div></div></div>
</div>

<div class="flexContainer">
<!-- The border-box min-width 25px is transferred to the main axis,
yielding a resolved min-height:auto of 200px. -->
<div class="item" style="min-width: 25px; aspect-ratio: 1/8;"><div></div></div>
<!-- The content size suggestion is 190px, i.e. the height of the item's
child div. -->
<div class="item" style="min-width: 25px; aspect-ratio: 1/1;"><div></div></div>
</div>

<div class="flexContainer">
<!-- The border-box width 25px (clamped by max-width) is transferred to the main axis,
yielding a resolved min-height:auto of 200px. -->
<div class="item" style="max-width: 25px; width: 100px; aspect-ratio: 1/8;"><div></div></div>
<!-- The content size suggestion is 200px because the border-box max-width
25px is transferred to the main axis as the upper bound of its
border-box height. -->
<div class="item" style="max-width: 25px; width: 100px; aspect-ratio: 1/8;">
<div style="height: 500px"></div>
</div>
</div>

<!-- In the following four flex containers, the aspect-ratio works with content-box
because its value contains 'auto'. -->
<div class="flexContainer" style="height: auto;">
<!-- The content-box width 10px is transferred to the main axis,
yielding a resolved flex base size of 190px. -->
yielding a resolved flex base size (content-box) of 190px. -->
<div class="item" style="min-height:0; width: 25px; aspect-ratio: auto 1/19;"><div></div></div>
</div>

<div class="flexContainer">
<!-- The content-box width 10px is transferred to the main axis,
yielding a resolved min-height:auto of 190px. -->
<div class="item" style="width: 25px; aspect-ratio: auto 1/19;"><div></div></div>
<!-- The content size suggestion is 190px, i.e. the height of the item's
child div. -->
<div class="item" style="width: 25px; aspect-ratio: auto 1/1;"><div></div></div>
</div>

<div class="flexContainer">
<!-- The content-box min-width 10px is transferred to the main axis,
yielding a resolved min-height:auto of 190px. -->
<div class="item" style="min-width: 25px; aspect-ratio: auto 1/19;"><div></div></div>
<!-- The content size suggestion is 190px, i.e. the height of the item's
child div. -->
<div class="item" style="min-width: 25px; aspect-ratio: auto 1/1;"><div></div></div>
</div>

<div class="flexContainer">
<!-- The content-box width 10px (clamped by max-width) is transferred to the main axis,
yielding a resolved min-height:auto of 190px. -->
<div class="item" style="max-width: 25px; width: 100px; aspect-ratio: auto 1/19;"><div></div></div>
<!-- The content size suggestion is 190px because the content-box max-width
10px is transferred to the main axis as the upper bound of its
content-box height.-->
<div class="item" style="max-width: 25px; width: 100px; aspect-ratio: auto 1/19;">
<div style="height: 500px"></div>
</div>
</div>
</html>

0 comments on commit 21a7c47

Please sign in to comment.