Intent to Implement and Ship: CSS aspect-ratio interpolation

[Robert Flack]

Contact emails

fla...@chromium.org

Explainer

None

Specification

https://drafts.csswg.org/css-values/#combine-ratio

Summary

The aspect-ratio property allows automatically computing the other dimension if only one of width and height is specified on any element. This property was originally launched as non-interpolable (meaning that it would snap to the target value) when animated. This feature provides smooth interpolation from one aspect ratio to another.

Blink component

Blink>Animation

TAG review

TAG review status

Not applicable

Risks

Interoperability and Compatibility

Aspect-ratio is a new feature (https://chromestatus.com/feature/5738050678161408) , though growing rapidly in use since it was shipped in Chrome M88 https://chromestatus.com/metrics/css/timeline/popularity/657. At this time however there are no aspect-ratio animations being recorded https://chromestatus.com/metrics/css/timeline/animated/657. Providing a smooth interpolation of aspect ratio should have no compat risk as such.

Gecko: No signal

Edge: No signal

WebKit: No signal

Web developers: No signals

Is this feature fully tested by web-platform-tests?

Yes

Tracking bug

https://crbug.com/1156160

Link to entry on the Chrome Platform Status

https://chromestatus.com/feature/5682100885782528

This intent message was generated by Chrome Platform Status.

[Chris Harrelson]

LGTM1. I see this as simply finishing a corner case of aspect-ratio, which already has a thorough TAG and CSSWG review; also this specific item was approved explicitly by the CSSWG a while back.

--
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/CAJh39TO_XU4-UC0JF%3Da%2BZohGB24fT1xeQXeRB6VfAyR7j9bVuw%40mail.gmail.com.

[Alex Russell]

Discussed at today's OWNERS meeting and I'm curious to know why this both doesn't have TAG review but also an (apparently?) novel interpolation curve. Some questions about the design:

• Should interpolation curves be pluggable, ala <easing-function>?
• Were other curves considered? Is there an explainer outlining the choices?
• Chris' note suggests there was some consensus at a WG meeting (contra the "no signal"s listed above); can someone link to the minutes?

Also, per policy, should requests for positions have been sent to other vendors?

Regards

[Robert Flack]

The discussion of the interpolation curve took place on the csswg issue. The choice of a logarithmic curve is the least surprising when combined with the effect's overall easing as the logarithmic ratio curve produces a visual change that appears linear and symmetric in the geometric change. Other curves were considered but ultimately log was decided on. The minutes are in the above issue. The developer can of course apply any of the standard CSS animation easing functions on top of this effect.

[Christian Biesinger]

On Thu, Jan 21, 2021 at 9:06 PM Chris Harrelson <chri...@chromium.org> wrote:
>
> LGTM1. I see this as simply finishing a corner case of aspect-ratio, which already has a thorough TAG and CSSWG review; also this specific item was approved explicitly by the CSSWG a while back.

(There was no TAG review yet,
https://github.com/w3ctag/design-reviews/issues/559)

> To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAOMQ%2Bw_hDxW%3DXL5k_ff99Ucg6Hqf5UrEHLFSzOyyQ5-nEMKB_g%40mail.gmail.com.

[Chris Harrelson]

Oh ok. I went ahead and added the interpolation curve to the existing TAG review request.

Since aspect-ratio has already shipped in Chromium, is about to ship in Firefox and Safari, this is in my view just a completion of the feature, and the TAG review has been pending without action since September, my LGTM1 still stands.

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

[Alex Russell]

LGTM1 contingent on follow up in CSSWG or elsewhere on extensibility/pluggability about the curves being used for this. It seems bad that this is a one-off.

[yo...@yoav.ws]

LGTM3 - as Alex's was an LGTM2 :)

[Robert Flack]

On Thu, Jan 28, 2021 at 3:24 PM yo...@yoav.ws <yo...@yoav.ws> wrote:

LGTM3 - as Alex's was an LGTM2 :)

On Thursday, January 28, 2021 at 9:22:22 PM UTC+1 sligh...@chromium.org wrote:

LGTM1 contingent on follow up in CSSWG or elsewhere on extensibility/pluggability about the curves being used for this. It seems bad that this is a one-off.

Filed https://github.com/w3c/csswg-drafts/issues/5920. Please comment if I didn't accurately reflect your concern.