[css-sizing-4] Does aspect-ratio work on the content box or the border box?

[fantasai]

@dholbert wrote:

We need to be sure it's clear which box (content-box vs. border-box) the aspect ratio is used for sizing, especially for elements that have an explicit "box-sizing:border-box". I imagine the ratio should always control how an element's content box is sized, since I think that's how aspect ratios work with images... but we should be sure that's explicitly stated.

[fantasai]

It's pretty clear that replaced elements need to apply their intrinsic aspect ratio to the content box; and also that for non-replaced elements, we frequently want to size the border box instead.

One possible way to do both is:

• for aspect-ratio: auto , which takes the aspect ratio from the intrinsic aspect ratio, we always use the content box
• for explicit aspect-ratio values, we ask box-sizing

[jensimmons]

@dholbert also wrote regarding this topic:

I'll include an example for (1), to make it concrete: suppose we have a div with this styling:
<div style="width: 100px; aspect-ratio: 2/1;">

This would produce a used 'height' of 50px.

However, if we add "box-sizing: border-box; padding: 10px", then I think it should instead produce a used 'height' of 60px, for consistency with how elements with "real" intrinsic aspect-ratios behave. (This is because I think we'd want apply the ratio to the content-box - so first we have to discover the width of the content box, 100px-10px-10px = 80px. Then we use the ratio to get the height of the content-box, 40px. And then we add the padding-top and padding-bottom to get the height of the border-box, which is 60px. So, we have a used 'height' of 60px in this box-sizing:border-box scenario.)

Here's a demo using <canvas> -- the first canvas has a used 'height' of 50px, the second has a used 'height' of 60px, as you can see in devtools (tested in Chrome and Firefox): https://jsfiddle.net/k0xjg5pz/

[css-meeting-bot]

The CSS Working Group just discussed Aspect Ratio, and agreed to the following:

• RESOLVED: Explicit a-r applies to whichever box the box-sizing property specifies.

The full IRC log of that discussion

<TabAtkins> Topic: Aspect Ratio
<TabAtkins> fantasai: Question was, does aspect-ratio affect the calculations for content-box or border-box? Good question.
<TabAtkins> fantasai: Images, intrinsic aspect ratio always affects the content box; to do otherwise would screw up the iamge.
<TabAtkins> fantasai: But for non-replaced elements, not a great answer; often you want to a-r the border box, as that's the visible bounds of the element.
<TabAtkins> fantasai: As a reminder, a-r has two values, "auto" which means there's no a-r unless you're a replaced element with an intrinsic ratio...
<TabAtkins> fantasai: So our proposal is that with "auto" the intrinsic ratio is used, so we only affect the content box.
<TabAtkins> fantasai: But if you give an explicit ratio, it affects whihicever box box-sizing says.
<leaverou> q+
<dbaron> sounds good to me
<TabAtkins> AmeliaBR: I want to read this carefully and see how it compares with how SVG behaves.
<TabAtkins> AmeliaBR: I think your proposal is a good default.
<leaverou> q-
<heycam> github: https://github.com//issues/4007
<TabAtkins> AmeliaBR: I might come back with a request to be able to specify the box for the aspect ratio separate from box-sizing box.
<TabAtkins> AmeliaBR: So might want to set the width of an element's border box, but still set a-r of the content box.
<TabAtkins> florian: You want to investigate how much that idea would be needed?
<TabAtkins> AmeliaBR: Yeah, I think fantasai's proposal will cover most cases. Might just need an addition.
<TabAtkins> Rossen_: Unfortunate thing is there will be yet another % resolution that'll by cyclic.
<TabAtkins> TabAtkins: It won't be a new one.
<TabAtkins> AmeliaBR: a-r didn't use a %...
<TabAtkins> Rossen_: Padding can be a % which is affected by the width which is affected by the height which is affected by the width...
<TabAtkins> Rossen_: But let's go with it and see how it goes.
<TabAtkins> fantasai: So do we want to accept the proposal?
<TabAtkins> AmeliaBR: Already pushed a draft?
<TabAtkins> fantasai: Yeah, and think there's a disposition of changes.
<TabAtkins> Rossen_: Any objections?
<TabAtkins> RESOLVED: Explicit a-r applies to whichever box the box-sizing property specifies.
<tantek> +1