[css-sizing-4] How does a max-height affect the inline size computed through an aspect ratio #5257

cbiesinger · 2020-06-24T23:21:22Z

https://drafts.csswg.org/css-sizing-4/#aspect-ratio

The title is not very descriptive, sorry -- I couldn't think of a succinct way to describe the issue. Basically:

  <div style="aspect-ratio: 1/1; max-height: 50px; font: 10px/1 Ahem; float: left;">
    XX XXX <!-- max-size 60px, min-size: 30px -->
  </div>

So we have shrink-to-fit sizing in the inline axis and an aspect ratio size in the block axis. Since we have a lot of space, inline size is 60px (max intrinsic size), and height is 60px.

BUT, max-height is 50px. Should we:

Clamp max-height to 50px and recompute the inline size based on that (here, 50px), like we do for ?
http://plexode.com/eval3/#s=aekVQXANJVQMbAx1yAXgePQOCGwESERFRWRwBg52foVmaHz1PAQEdSk5IAVRTRJmPVVVRVBsQEFdKQg9RTUJERklQTUVGUw9EUE4QFKCal7lOQlkOpp6gBhMWHKutHRByHwNeAA==
Not do this complex thing and just let this be sized to 60x50?

Additional question if we do option one: Should min-block-size be taken into account too? If yes, auto should probably resolve to 0 for the purpose of inline sizing.

cc @bfgeek @fantasai

tabatkins · 2020-06-29T23:50:45Z

Yes, the max-height is definite, so it should get transferred across the ratio, and give a max-width of 50px, exactly like the image example. Unfortunately the current aspect ratio constraint rules are written with the assumption that the aspect ratio of the actual content and the used aspect ratio are identical... so we need to write up some explicit rules about this. :/ (Whereas in this example, the AR of the actual content is 6 / 1, different from the desired ratio of 1 / 1.)

If we don't transfer this, then max-size properties basically don't interact with aspect-ratio at all, which sucks.

fantasai · 2020-06-30T00:08:15Z

OK, added some prose to the spec to describe the transfer of sizing constraints. Let us know if it looks correct? :)

…ck size This tests the behavior as specced in w3c/csswg-drafts#5257 R=ikilpatrick@chromium.org Bug: 1045668 Change-Id: I75b945a008b9039b751fc7de54da86cbf399a7ee

cbiesinger · 2020-07-01T18:21:15Z

@fantasai I added some comments on ede56bd

…ck size This tests the behavior as specced in w3c/csswg-drafts#5257 R=ikilpatrick@chromium.org Bug: 1045668 Change-Id: I75b945a008b9039b751fc7de54da86cbf399a7ee

…ck size This tests the behavior as specced in w3c/csswg-drafts#5257 R=ikilpatrick@chromium.org Bug: 1045668 Change-Id: I75b945a008b9039b751fc7de54da86cbf399a7ee Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2274255 Commit-Queue: Christian Biesinger <cbiesinger@chromium.org> Reviewed-by: Ian Kilpatrick <ikilpatrick@chromium.org> Auto-Submit: Christian Biesinger <cbiesinger@chromium.org> Cr-Commit-Position: refs/heads/master@{#784523}

…ine size with constrained block size, a=testonly Automatic update from web-platform-tests [AspectRatio] Add test for computing inline size with constrained block size This tests the behavior as specced in w3c/csswg-drafts#5257 R=ikilpatrick@chromium.org Bug: 1045668 Change-Id: I75b945a008b9039b751fc7de54da86cbf399a7ee Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2274255 Commit-Queue: Christian Biesinger <cbiesinger@chromium.org> Reviewed-by: Ian Kilpatrick <ikilpatrick@chromium.org> Auto-Submit: Christian Biesinger <cbiesinger@chromium.org> Cr-Commit-Position: refs/heads/master@{#784523} -- wpt-commits: b363daeddf3374072306c4f9ccf919261489aa13 wpt-pr: 24391

fantasai · 2020-07-13T19:14:14Z

@cbiesinger Replied in ede56bd#commitcomment-40570230 and added a6fc47e

cbiesinger · 2020-07-15T19:47:49Z

fwiw, I did add a test for this in web-platform-tests/wpt@5938e67; I would appreciate a spec editor reviewing it but I'm not sure this needs the WPT label.

I also added another comment on the commit.

fantasai · 2020-07-20T20:36:30Z

@cbiesinger Commented on the changeset... the test seems really off?

Implements the spec change in w3c/csswg-drafts#5257 This allows respecting the aspect-ratio even when we're computing the block size from an aspect ratio with a max-height specified. Bug: 1104360 Change-Id: Ibdff4bf4a67aa0897fd24416fed67bbb2f1ef9ea

Implements the spec change in w3c/csswg-drafts#5257 This allows respecting the aspect-ratio even when we're computing the block size from an aspect ratio with a max-height specified. Bug: 1104360 Change-Id: Ibdff4bf4a67aa0897fd24416fed67bbb2f1ef9ea Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2308999 Commit-Queue: Christian Biesinger <cbiesinger@chromium.org> Reviewed-by: Ian Kilpatrick <ikilpatrick@chromium.org> Auto-Submit: Christian Biesinger <cbiesinger@chromium.org> Cr-Commit-Position: refs/heads/master@{#797043}

Implements the spec change in w3c/csswg-drafts#5257 This allows respecting the aspect-ratio even when we're computing the block size from an aspect ratio with a max-height specified. Bug: 1104360 Change-Id: Ibdff4bf4a67aa0897fd24416fed67bbb2f1ef9ea Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2308999 Commit-Queue: Christian Biesinger <cbiesinger@chromium.org> Reviewed-by: Ian Kilpatrick <ikilpatrick@chromium.org> Auto-Submit: Christian Biesinger <cbiesinger@chromium.org> Cr-Commit-Position: refs/heads/master@{#797043}

…max-block-size, a=testonly Automatic update from web-platform-tests [AspectRatio] Implement transferred min/max-block-size Implements the spec change in w3c/csswg-drafts#5257 This allows respecting the aspect-ratio even when we're computing the block size from an aspect ratio with a max-height specified. Bug: 1104360 Change-Id: Ibdff4bf4a67aa0897fd24416fed67bbb2f1ef9ea Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2308999 Commit-Queue: Christian Biesinger <cbiesinger@chromium.org> Reviewed-by: Ian Kilpatrick <ikilpatrick@chromium.org> Auto-Submit: Christian Biesinger <cbiesinger@chromium.org> Cr-Commit-Position: refs/heads/master@{#797043} -- wpt-commits: 50f5942fdeeac06695959d27e0c1a52379a13eda wpt-pr: 24693

…nite {min|max} block-size and aspect-ratio for non-replaced elements. r=TYLin This addressed w3c/csswg-drafts#5257. The min-block-size or max-block-size should affect the inline size computed through an aspect ratio. I intentionally don't implement this for transferred {min|max} block-size because 1. This is useful only if block-size is indefinite. 2. If block-size is indefinite, we may use the inline-size and aspect-ratio to get the block-size, which makes block-size definite. 3. This means it is useful when both inline-size and block-size are indefinite (e.g. auto). In this case, we still resolve a possible inline-size by clamping it between specified (and transferred) min and max inline-sizes. Then we map this inline-size to block-size through aspect-ratio. This transferred block-size should also be between specified (and transferred) min and max block-sizes. Differential Revision: https://phabricator.services.mozilla.com/D94911

…ck size This tests the behavior as specced in w3c/csswg-drafts#5257 R=ikilpatrick@chromium.org Bug: 1045668 Change-Id: I75b945a008b9039b751fc7de54da86cbf399a7ee Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2274255 Commit-Queue: Christian Biesinger <cbiesinger@chromium.org> Reviewed-by: Ian Kilpatrick <ikilpatrick@chromium.org> Auto-Submit: Christian Biesinger <cbiesinger@chromium.org> Cr-Original-Commit-Position: refs/heads/master@{#784523} Cr-Mirrored-From: https://chromium.googlesource.com/chromium/src Cr-Mirrored-Commit: aa401dd01f1ee9e704b2380286d707912f0dde60

Implements the spec change in w3c/csswg-drafts#5257 This allows respecting the aspect-ratio even when we're computing the block size from an aspect ratio with a max-height specified. Bug: 1104360 Change-Id: Ibdff4bf4a67aa0897fd24416fed67bbb2f1ef9ea Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2308999 Commit-Queue: Christian Biesinger <cbiesinger@chromium.org> Reviewed-by: Ian Kilpatrick <ikilpatrick@chromium.org> Auto-Submit: Christian Biesinger <cbiesinger@chromium.org> Cr-Original-Commit-Position: refs/heads/master@{#797043} Cr-Mirrored-From: https://chromium.googlesource.com/chromium/src Cr-Mirrored-Commit: 5da05071ef8366fce0495b60bee0f336f9e96f4c

…ine size with constrained block size, a=testonly Automatic update from web-platform-tests [AspectRatio] Add test for computing inline size with constrained block size This tests the behavior as specced in w3c/csswg-drafts#5257 R=ikilpatrick@chromium.org Bug: 1045668 Change-Id: I75b945a008b9039b751fc7de54da86cbf399a7ee Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2274255 Commit-Queue: Christian Biesinger <cbiesinger@chromium.org> Reviewed-by: Ian Kilpatrick <ikilpatrick@chromium.org> Auto-Submit: Christian Biesinger <cbiesinger@chromium.org> Cr-Commit-Position: refs/heads/master@{#784523} -- wpt-commits: b363daeddf3374072306c4f9ccf919261489aa13 wpt-pr: 24391

cbiesinger added the css-sizing-4 label Jun 24, 2020

fantasai added a commit that referenced this issue Jun 30, 2020

[css-sizing-4] Define effect of aspect ratio on size constraints. #5257

ede56bd

fantasai added the Commenter Response Pending label Jun 30, 2020

chromium-wpt-export-bot mentioned this issue Jun 30, 2020

[AspectRatio] Add test for computing inline size with constrained block size web-platform-tests/wpt#24391

Merged

fantasai added Closed Accepted as Obvious Bugfix Needs Edits Needs Testcase (WPT) and removed Commenter Response Pending Needs Edits labels Jul 9, 2020

chromium-wpt-export-bot mentioned this issue Jul 22, 2020

[AspectRatio] Implement transferred min/max-block-size web-platform-tests/wpt#24693

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[css-sizing-4] How does a max-height affect the inline size computed through an aspect ratio #5257

[css-sizing-4] How does a max-height affect the inline size computed through an aspect ratio #5257

[css-sizing-4] How does a max-height affect the inline size computed through an aspect ratio #5257

[css-sizing-4] How does a max-height affect the inline size computed through an aspect ratio #5257

Comments