[csswg-drafts] [css-values-4] How to interpolate <ratio>? (#4953)

tabatkins has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-values-4] How to interpolate <ratio>? ==
I'm moving the definition of `<ratio>` over to V&U right now, per #4908, but I'm stuck on how ratios should interpolate (which is simply not defined right now in Sizing, the only place where a ratio is potentially interpolable).

Two obvious answers:

1. Keep around the original pair of values, and interpolate numerator and denominator separately.
2. Resolve the ratio into a single number, and interpolate that value. (Aka turn it into `X / 1` form.)

[Here's a test showing off the behaviors.](http://software.hixie.ch/utilities/js/live-dom-viewer/saved/7966)

I think that, in general, I like "interpolate numerator and denominator separately" better. In particular, if the two ratios are on the same scale, the behavior ends up being *identical* to just interpolating the width and height independently.

Note, tho, the fourth box on that page - it's still interpolating between the same two ratios, but one ratio is expressed as `5/1`, and the other is `300/200`. This gives a *ridiculous* result, that just happens to land on the exact right sizes at the beginning and end.  This means that option 1 is *scale-dependent*, which is probably not a good thing to have!

Further complications: if we go with "interpolate the divided result", that implies that the computed value has to be the divided result, I think? Which means that if you write `3/2`, we'll lose that information, and can only serialize it as `1.5/1`, which seems bad.

So I'm not sure. What does the group think? Option 1, with a warning that people probably want to ensure their numbers are on similar scales? (They usually will be.) Or Option 2, and bite the bullet on serialization?

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/4953 using your GitHub account

Received on Wednesday, 15 April 2020 21:48:41 UTC