Intent to Implement and Ship: CSS aspect-ratio interpolation

122 views
Skip to first unread message

Robert Flack

unread,
Jan 21, 2021, 2:40:20 PMJan 21
to blink-dev

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

unread,
Jan 21, 2021, 3:06:00 PMJan 21
to Robert Flack, blink-dev
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

unread,
Jan 21, 2021, 3:23:19 PMJan 21
to blink-dev, Chris Harrelson, blink-dev, fla...@chromium.org
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

unread,
Jan 21, 2021, 3:29:31 PMJan 21
to Alex Russell, blink-dev, Chris Harrelson
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

unread,
Jan 22, 2021, 8:36:14 AMJan 22
to Chris Harrelson, Robert Flack, blink-dev
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

unread,
Jan 22, 2021, 1:15:28 PMJan 22
to Christian Biesinger, Robert Flack, blink-dev
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.

Alex Russell

unread,
Jan 28, 2021, 3:22:22 PMJan 28
to blink-dev, Chris Harrelson, Robert Flack, blink-dev, Christian Biesinger
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

unread,
Jan 28, 2021, 3:24:50 PMJan 28
to blink-dev, sligh...@chromium.org, Chris Harrelson, fla...@chromium.org, blink-dev, Christian Biesinger
LGTM3 - as Alex's was an LGTM2 :)

Robert Flack

unread,
Feb 2, 2021, 5:54:37 PMFeb 2
to yo...@yoav.ws, blink-dev, sligh...@chromium.org, Chris Harrelson, Christian Biesinger
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.
Reply all
Reply to author
Forward
0 new messages