1348500 - [css-grid][css-animation] Honour grid-item height/width animation with percentage value in grid

Status: RESOLVED WONTFIX

(Core :: Layout, enhancement)

Description

[Robert Utasi [:hunboy]]

Attachment: accordion.html

At the current state with grid we can make animated accordion.

In the past the "auto" value of height was not animatable. Now with grid grid-template-rows: auto value  - the percentage value is animatable. It's a good news for end-users making css only accordion.

Only 1 stilistic problem left: with precentage value it preserves the space for the animation in the grid. Note it works well with constant height. Only precentage value is affected.

Testcase attached.

The current crossbrowser state is: chrome canary does absolutely same as firefox does, so I marked this bug as "dev-doc-needed".

Another testcase attached in a separated comment.

Comment 1

[Robert Utasi [:hunboy]]

Attachment: simplified comparison testcase - width: constant or percentage

Brian, Mats pointed to you for more info about this feature, pls take a look at this. This is basically already an animation issue and related to "auto" value is not animatable feature. But yes, it's animatable now , just pre-serves the space for the animation.

Any plan for it in these days to make this working properly in a same way as constant width/height does? Thanks for your time.

Comment 2

[Mats Palmgren (inactive)]

Attachment: Testcase #3

Here are a few grids (without animation) with different percentage
image widths.  Note how the first column is the same in all cases
regardless of the percentage.  The first column has 'auto' size,
so the percentage base for the image is indefinite and thus behaves
as width:auto, which for track sizing purposes is the min-content
contribution, i.e. the intrinsic size of the image.

So I think the animation of the percentage in the previous example
is working correctly per spec(s). (And Chrome agrees on the layout
so I don't think we should try to "fix" this without spec changes.)

Comment 3

[Mats Palmgren (inactive)]

Brian do you have any advice on how to implement animation for
grid-template-columns/rows?
https://drafts.csswg.org/css-grid/#track-sizing
"
Animatable: 	as a simple list of length, percentage, or calc, provided the only differences are the values of the length, percentage, or calc components in the list 
"

As far as I know, no UA implements that yet, so we should take the current
spec text with a grain of salt.  Note that these properties are kind of
special in that the computed values are the resolved values:
https://drafts.csswg.org/css-grid/#resolved-track-list

So I think animating them as "an array of nscoord values" would be fine.
Do we have support for that kind of thing already?

(Let's ignore the fact that the before/after array lengths might be
different for now.)

Comment 4

[Mats Palmgren (inactive)]

Let's pretend we animation support for the track sizes per above.
Would it be possible to tie animations on grid items to an "implied"
animation of their grid container track sizes?

Comment 5

[Brian Birtles (:birtles, Feb 26~ parental leave)]

It sounds like there are two questions here. The first is about animating "auto". This is already a problem with 'width' etc. irrespective of grid. The proposed solution is to make calc() support 'auto' so that you could, for example, write "calc(auto - 10px)".[1] Presumably once we do that, if you're 25% of the way animating between '100px' and 'auto', you'd get a computed value of "calc(75px + 0.25 * auto)". You can see some notes about what needs to be done to make that happen in [1].

For the second question about how to implement animation of new types, it basically just involves adding the necessary handling to StyleAnimationValue. I think you might find the implementation of animation of the background-position and background-size properties a helpful reference: https://hg.mozilla.org/mozilla-central/rev/eb947f317c42ec7168e44ace57714af65472cfe6

The trouble with the last point is that we're currently working on replacing StyleAnimationValue as part of the stylo project. As a result, any code you add to StyleAnimationValue will also need to be added to Servo's interpolation functions.

[1] https://groups.google.com/forum/#!topic/mozilla.dev.tech.layout/fFuJqwXvu2I

Comment 6

[Robert Utasi [:hunboy]]

Attachment: minmax testcase

Brian, probably my English wasnot too proper (as usual), so clarifying the issue:

 - animating "auto" is Bug 571344 and probably never will be supported.
 - this question is for the percentage values.

Now I add 1 new testcase, where there is no "auto" at all, I use minmax. This type of accordion shows 100px height text as min, and when you click to "More" label it shows the remaining text as well. It's almost complete - animates the percentage value from 100px to 100%, the bug is for preserving the space for the animation here - it pre-serves the 100% and animates inside that.

So the expected result: animating the the frame-space as well during animation in a same way as with constant value does.

The heuristic way is using grid whilst height 100% is supported in that, and it's animatable.

Comment 7

[Mats Palmgren (inactive)]

Thanks Brian, I'll have a look StyleAnimationValue.  I filed bug 1348519 about that part.

Comment 8

[Mats Palmgren (inactive)]

As for this bug, I think what we're doing now is the correct behavior per specs
and is compatible with Chrome, so I don't intend to fix this specifically for
grid items.  It boils down to general support for animation to/from 'auto'.

(the minmax testcase is basically the same as before, x% of an indefinite
percentage base behaves as 'auto')