Intent to prototype and ship: CSS grid-template properties interpolation

[Ana Sollano Kim]

Contact emails

anso...@microsoft.com, dli...@microsoft.com

Explainer

None

Specification

https://www.w3.org/TR/css-grid-1/#track-sizing

Summary

In CSS Grid, the grid-template-columns and grid-template-rows properties allow developers to define line names and track sizing of grid columns and rows, respectively. Supporting interpolation for these properties will allow grid layouts to smoothly transition between states, instead of snapping at the halfway point of an animation or transition. Web developers can use this functionality to achieve specific interactive effects without having to resort to driving animations via JavaScript.

 

Blink component

Blink>Layout>Grid

TAG review

 

TAG review status

Not applicable. We don’t believe this merits TAG review - it fits into the existing framework of CSS Animations/Transitions and it has been in the CSS Grid spec for years. But we’re happy to file a request if API_OWNERS feel this change should have one.

Risks

 

Interoperability and Compatibility

Gecko: Shipped since 2019
WebKit: Recently implemented in preview https://bugs.webkit.org/show_bug.cgi?id=204580
Web developers: Positive (383 stars)
Other signals: N/A

WebView application risks

Does this intent deprecate or change behavior of existing APIs, such that it has potentially high risk for Android WebView-based applications?

No

Debuggability

Existing grid support in devtools will allow inspection of the grid tracks created by the grid-template property values.

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

Yes. https://wpt.fyi/results/css/css-grid/animation?label=experimental&label=master&aligned

Flag name

--enable-blink-features=CSSGridTemplatePropertyInterpolation

Requires code in //chrome?

False

Tracking bug

https://bugs.chromium.org/p/chromium/issues/detail?id=759665

Estimated milestones

No milestones specified

Link to entry on the Chrome Platform Status

https://chromestatus.com/feature/6037871692611584

[Manuel Rego Casasnovas]

Thanks for catching up on this. LGTM1

On 17/05/2022 18:44, 'Ana Sollano Kim' via blink-dev wrote:
>
> Contact emails
>
> anso...@microsoft.com
> <mailto:anso...@microsoft.com>, dli...@microsoft.com
> <mailto:dli...@microsoft.com>

>
>
> Explainer
>
> None
>
>
> Specification
>
> https://www.w3.org/TR/css-grid-1/#track-sizing

> <https://nam06.safelinks.protection.outlook.com/?url=https%3A%2F%2Fwww.w3.org%2FTR%2Fcss-grid-1%2F%23track-sizing&data=05%7C01%7CAna.Sollano%40microsoft.com%7Cb0a2fbe347734699403a08da3815ec92%7C72f988bf86f141af91ab2d7cd011db47%7C0%7C0%7C637883964057764552%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&sdata=xidna4CkKfxg4zMsoeMZaPiXwVEcD3zfdCZ4%2BSwUt8g%3D&reserved=0>

>
>
> Summary
>
> In CSS Grid, the grid-template-columns and grid-template-rows properties
> allow developers to define line names and track sizing of grid columns
> and rows, respectively. Supporting interpolation for these properties
> will allow grid layouts to smoothly transition between states, instead
> of snapping at the halfway point of an animation or transition. Web
> developers can use this functionality to achieve specific interactive
> effects without having to resort to driving animations via JavaScript.
>
>  
>
>
> Blink component
>
> Blink>Layout>Grid

> <https://nam06.safelinks.protection.outlook.com/?url=https%3A%2F%2Fbugs.chromium.org%2Fp%2Fchromium%2Fissues%2Flist%3Fq%3Dcomponent%3ABlink%253ELayout%253EGrid&data=05%7C01%7CAna.Sollano%40microsoft.com%7Cb0a2fbe347734699403a08da3815ec92%7C72f988bf86f141af91ab2d7cd011db47%7C0%7C0%7C637883964057764552%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&sdata=ijYLR0%2BqEHV9TK1w4p6dUQZTb4AAf%2F6hbJNigBUEZ6U%3D&reserved=0>

>
>
> TAG review
>
>  
>
>
> TAG review status
>
> Not applicable. We don’t believe this merits TAG review - it fits into
> the existing framework of CSS Animations/Transitions and it has been in
> the CSS Grid spec for years. But we’re happy to file a request if
> API_OWNERS feel this change should have one.
>
>
> Risks
>
>  
>
>
> Interoperability and Compatibility
>
>

> /Gecko/: Shipped since 2019
> /WebKit/: Recently implemented in preview
> https://bugs.webkit.org/show_bug.cgi?id=204580
> <https://nam06.safelinks.protection.outlook.com/?url=https%3A%2F%2Fbugs.webkit.org%2Fshow_bug.cgi%3Fid%3D204580&data=05%7C01%7CAna.Sollano%40microsoft.com%7Cb0a2fbe347734699403a08da3815ec92%7C72f988bf86f141af91ab2d7cd011db47%7C0%7C0%7C637883964057764552%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&sdata=s%2B5cm1u9Ev3Q0P%2BgaaNUbVpoSN7YxCZSZ%2BSXxRPA0LE%3D&reserved=0>
> /Web developers/: Positive (383 stars)
> /Other signals/: N/A
>
> WebView application risks
>
> /Does this intent deprecate or change behavior of existing APIs, such
> that it has potentially high risk for Android WebView-based applications?/

>
> No
>
>
> Debuggability
>
> Existing grid support in devtools will allow inspection of the grid
> tracks created by the grid-template property values.
>
>
> Is this feature fully tested by web-platform-tests

> <https://nam06.safelinks.protection.outlook.com/?url=https%3A%2F%2Fchromium.googlesource.com%2Fchromium%2Fsrc%2F%2B%2Fmain%2Fdocs%2Ftesting%2Fweb_platform_tests.md&data=05%7C01%7CAna.Sollano%40microsoft.com%7Cb0a2fbe347734699403a08da3815ec92%7C72f988bf86f141af91ab2d7cd011db47%7C0%7C0%7C637883964057764552%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&sdata=b0Y8R1uLUgCUCzVZtHLsLW12SSj4GinRbw85xmoWvJg%3D&reserved=0>?
>
> Yes.
> https://wpt.fyi/results/css/css-grid/animation?label=experimental&label=master&aligned
> <https://nam06.safelinks.protection.outlook.com/?url=https%3A%2F%2Fwpt.fyi%2Fresults%2Fcss%2Fcss-grid%2Fanimation%3Flabel%3Dexperimental%26label%3Dmaster%26aligned&data=05%7C01%7CAna.Sollano%40microsoft.com%7Cb0a2fbe347734699403a08da3815ec92%7C72f988bf86f141af91ab2d7cd011db47%7C0%7C0%7C637883964057764552%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&sdata=UWPxkc3%2FIQy5eJWhNkQ5CxU5SYe1AfSSfA1OiIQB5es%3D&reserved=0>

>
>
> Flag name
>
> --enable-blink-features=CSSGridTemplatePropertyInterpolation
>
>
> Requires code in //chrome?
>
> False
>
> Tracking bug
>
> https://bugs.chromium.org/p/chromium/issues/detail?id=759665

> <https://nam06.safelinks.protection.outlook.com/?url=https%3A%2F%2Fbugs.chromium.org%2Fp%2Fchromium%2Fissues%2Fdetail%3Fid%3D759665&data=05%7C01%7CAna.Sollano%40microsoft.com%7Cb0a2fbe347734699403a08da3815ec92%7C72f988bf86f141af91ab2d7cd011db47%7C0%7C0%7C637883964057764552%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&sdata=xSa0Nyhok8HU2Azh%2FhQ5vuS21Sh45ipG%2BwgVPpq%2BENM%3D&reserved=0>

>
> Estimated milestones
>
> No milestones specified
>
>
> Link to entry on the Chrome Platform Status
>
> https://chromestatus.com/feature/6037871692611584

> <https://nam06.safelinks.protection.outlook.com/?url=https%3A%2F%2Fchromestatus.com%2Ffeature%2F6037871692611584&data=05%7C01%7CAna.Sollano%40microsoft.com%7Cb0a2fbe347734699403a08da3815ec92%7C72f988bf86f141af91ab2d7cd011db47%7C0%7C0%7C637883964057764552%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&sdata=Un0P6tjq0ARKUWsn51chYU10v6Ev57Tb%2BJzNUFDDHJc%3D&reserved=0>
>
> --
> 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
> <mailto:blink-dev+...@chromium.org>.
> To view this discussion on the web visit
> https://groups.google.com/a/chromium.org/d/msgid/blink-dev/BYAPR00MB0453CE7DEC12281ED54DFB7CFDCE9%40BYAPR00MB0453.namprd00.prod.outlook.com
> <https://groups.google.com/a/chromium.org/d/msgid/blink-dev/BYAPR00MB0453CE7DEC12281ED54DFB7CFDCE9%40BYAPR00MB0453.namprd00.prod.outlook.com?utm_medium=email&utm_source=footer>.

[Chris Harrelson]

LGTM2

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/fbb57b11-1d41-0293-cfb6-c058e41e7914%40igalia.com.

[Rick Byers]

LGTM3

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