Intent to Prototype: CSS aspect-ratio property

151 views
Skip to first unread message

Christian Biesinger

unread,
Mar 24, 2020, 3:10:44 PM3/24/20
to blink-dev
cbies...@chromium.org,chri...@chromium.org,ikilp...@chromium.org TBD Specification: https://drafts.csswg.org/css-sizing-4/#aspect-ratio TBD not yet Normally, only certain replaced elements have an aspect ratio, particularly images. For them, if only one of width and height is specified, the other can be computed from it using the intrinsic aspect ratio. This property allows explicitly specifying an aspect ratio for any other element to get similar behavior. Generalizes the aspect ratio concept to general elements. This allows various effects, for example sizing <iframe>s using an aspect ratio, things like filmstrips where each element has the same height but needs an appropriate width, cases where a replaced element is wrapped by a component but should keep the aspect ratio, etc.
The risk (for both compat and interop) is that the layout will be wrong in browsers that do not support this property. This can be mitigated by web developers using polyfills. Firefox: No public signals Edge: No public signals Safari: No public signals Web developers: Positive n/a n/a n/a
Same as any other CSS property Yes No This feature is still in development so there are no tests yet but these will be added during development. https://chromestatus.com/feature/5738050678161408
This intent message was generated by Chrome Platform Status.

fantasai

unread,
Mar 24, 2020, 7:29:07 PM3/24/20
to blin...@chromium.org

Christian Biesinger

unread,
Apr 8, 2020, 9:17:23 PM4/8/20
to fantasai, blink-dev
Thanks. I went through that list and added them to a hotlist, except
for a couple that don't reproduce anymore:
https://bugs.chromium.org/p/chromium/issues/list?q=label:Hotlist-AspectRatio

David was going to look at replaced element + flex issues this
quarter, so hopefully that will address most of them (though a couple
were unrelated to flex). That said, I suspect some issues are only
triggered due to min-{width,height}: auto combined with an intrinsic
size, and that should not be an issue with the new property, I think.

Christian

Simon Pieters

unread,
Apr 9, 2020, 2:03:46 PM4/9/20
to Christian Biesinger, fantasai, blink-dev
It would be nice to see a testing plan for this feature (in the course of development). There are many possible combinations of features that can interact with aspect-ratio, I think. Supporting this property might violate some prior assumptions.

--
You received this message because you are subscribed to the Google Groups "blink-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+...@chromium.org.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAPTJ0XH9UnhMD%2BNi%3Dg16VW02Kc4QR2nYzmKSx_YN6bBAFuJC%3DA%40mail.gmail.com.


--
Simon Pieters

Christian Biesinger

unread,
Apr 9, 2020, 4:36:58 PM4/9/20
to Simon Pieters, fantasai, blink-dev
So I haven't written any of those tests yet (only parsing tests so
far), but my plan was to test: <div> with aspect-ratio in
block/flex/grid container; <img> with aspect-ratio in block/flex/grid
container; and for flex both with min-size: auto and without

Is there anything in particular you wanted to see tested?

Christian

Christian Biesinger

unread,
Apr 10, 2020, 2:37:24 PM4/10/20
to Simon Pieters, fantasai, blink-dev
After some discussion it seems clear that we also need tests for
aspect-ratio combined with abspos, especially an overconstrained
situation.

Christian

Manuel Rego Casasnovas

unread,
Apr 13, 2020, 12:43:18 AM4/13/20
to Christian Biesinger, Simon Pieters, fantasai, blink-dev


On 09/04/2020 22:36, 'Christian Biesinger' via blink-dev wrote:
> So I haven't written any of those tests yet (only parsing tests so
> far), but my plan was to test: <div> with aspect-ratio in
> block/flex/grid container; <img> with aspect-ratio in block/flex/grid
> container; and for flex both with min-size: auto and without
>
> Is there anything in particular you wanted to see tested?

Grid with "min-size: auto" is also quite special (similar to flexbox),
so it'd be worth testing it too.

Thanks,
Rego

Simon Pieters

unread,
Apr 13, 2020, 5:33:55 PM4/13/20
to Christian Biesinger, fantasai, blink-dev
Den tors 9 apr. 2020 kl 22:36 skrev Christian Biesinger <cbies...@google.com>:
So I haven't written any of those tests yet (only parsing tests so
far), but my plan was to test: <div> with aspect-ratio in
block/flex/grid container; <img> with aspect-ratio in block/flex/grid
container; and for flex both with min-size: auto and without

OK, thank you. This seems like a good start, but might be missing possible bugs.
 
Is there anything in particular you wanted to see tested?

I didn't have anything in particular in mind, and I haven't studied this enough to have specific insights. However, this property is a new capability for any element to have an aspect ratio, and my worry is that various cases have prior assumptions no longer holding when this property is used, resulting in bugs. Is my worry unfounded in this case?

At the extremes, two possible strategies to finding out what the bugs are:

* Write a small set of tests, ship, and then look for bug reports (might arrive when the second implementer implements, if they write more tests)
* Do more up-front QA work, like:
  - study prior bugs about aspect ratio and make sure those cases are also tested with 'aspect-ratio'
  - enumerate interesting elements to test (iframe, form controls, video, svg...)
  - enumerate interesting kinds of boxes (float, abspos, table cell...)
  - enumerate interesting properties that affect aspect-ratio (width/height, min/max-width/height, inline/block-size & writing-mode...)
  - enumerate interesting other inputs to tests (changing CB size, video changing frame dimensions mid-stream...)
  - write (or generate) tests that exercise combinations of the above

I have a background in QA, so I may be biased in my preference. Still, I think QA work like this usually makes for a more solid feature when it ships, and less pain for web developers.

cheers,

Chris Harrelson

unread,
May 20, 2020, 9:36:39 PM5/20/20
to Simon Pieters, Christian Biesinger, fantasai, blink-dev
Reply all
Reply to author
Forward
0 new messages