Re: [csswg-drafts] [css-sizing-4] Does aspect-ratio work on the content box or the border box? (#4007)

@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/

-- 
GitHub Notification of comment by jensimmons
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/4007#issuecomment-498928527 using your GitHub account

Received on Wednesday, 5 June 2019 03:50:30 UTC