Intent to prototype and ship: CSS grid-template properties interpolation
232 views
Skip to first unread message
Ana Sollano Kim
May 17, 2022, 12:49:04 PM5/17/22
to blin...@chromium.org
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
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
Manuel Rego Casasnovas
May 18, 2022, 11:32:12 AM5/18/22
to Ana Sollano Kim, blin...@chromium.org
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>
> <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>
> /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?/
>
> 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>
>
> --
> 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>.
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>
> <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>
>
> 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
>
> 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
>
>
> /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>?
> 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
> <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>
>
> 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
> <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>
> Estimated milestones
>
> No milestones specified
>
>
> Link to entry on the Chrome Platform Status
>
> https://chromestatus.com/feature/6037871692611584
>
> --
> 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
May 18, 2022, 11:35:19 AM5/18/22
to Manuel Rego Casasnovas, Ana Sollano Kim, blin...@chromium.org
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
May 18, 2022, 2:11:37 PM5/18/22
to Chris Harrelson, Manuel Rego Casasnovas, Ana Sollano Kim, blin...@chromium.org
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.
Reply all
Reply to author
Forward
0 new messages