Intent to Prototype: CSS aspect-ratio property

Christian Biesinger

unread,

Mar 24, 2020, 3:10:44 PM3/24/20

to blink-dev

Contact emails cbies...@chromium.org,chri...@chromium.org,ikilp...@chromium.org Explainer TBD Design docs/spec Specification: https://drafts.csswg.org/css-sizing-4/#aspect-ratio TBD TAG review not yet Summary 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. Motivation 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. Risks

Interoperability and Compatibility
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

Ergonomics
n/a

Activation
n/a

Security
n/a

Debuggability Same as any other CSS property Will this feature be supported on all six Blink platforms (Windows, Mac, Linux, Chrome OS, Android, and Android WebView)? Yes Is this feature fully tested by web-platform-tests? No This feature is still in development so there are no tests yet but these will be added during development. Link to entry on the Chrome Platform Status 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

On 3/24/20 12:09 PM, Christian Biesinger wrote:

Contact emails cbies...@chromium.org,chri...@chromium.org,ikilp...@chromium.org Explainer TBD Design docs/spec Specification: https://drafts.csswg.org/css-sizing-4/#aspect-ratio TBD

You might want to start by fixing some of the aspect ratio bugs that already exist in Chrome's implementation. Adding this new feature on top of those bugs is basically asking for increased bugwards-compat pressure on Chrome's behavior.

Here's a list of some bugs that seem relevant:

~fantasai

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

https://bocoup.com/

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

FYI Mozilla has started implementing. \o/

To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAHWN20WptH00NWiibr7GttNPXA7RaRebk4n3ch-MuVoS_qd8hw%40mail.gmail.com.

Reply all

Reply to author

Forward