[css-transforms-1] What is the computed value of a in the middle of a layout dependent matrix decomposed interpolation?

[tabatkins]

From @alancutter on July 6, 2017 5:4

The syntax enables custom properties to animate like the transform property.
One quirk of transform is that the serialisation procedure requires layout information in order to turn percentages of the element's box dimensions into a matrix.

Unfortunately this procedure requires layout information to turn an animation between translateX(100%) and rotate(45deg) into a single matrix. There is currently no way of representing such a value in CSS independent of what the layout is. You would need something like blend(translateX(100%), rotate(45deg), 0.5).

Here's a more concrete example:

">

>
<style>
#target {
  /* Animation is paused at halfway. */
  animation: x 1s -0.5s linear paused;
  --y: var(--x);
}
@keyframes x {
  from { --x: translateX(100%); }
  to { --x: rotate(45deg); }
}
style>

<div id="target">div>

<script>
CSS.registerProperty({
  name: '--x',
  syntax: '',
  initialValue: 'none',
});

// What should the computed value of --y be?
console.log(getComputedStyle(target).getPropertyValue('--y'));
script>

Should the serialisation of the computed value of custom properties be the same as transform and depend on layout computations?
Should this layout computation dependency "infect" other custom properties that reference it via var()?
What happens when we try to serialise a custom property inside a layout worklet in the middle of layout computation?

I don't think depending on layout computation is a good idea here.
I recommend using := | blend(, , ) instead (but with a better name) and to serialise it as the original transform functions instead of as a matrix that incorporates layout computations.

Copied from original issue: w3c/css-houdini-drafts#425

[tabatkins]

From @shans on October 19, 2017 0:6

We definitely can't depend on layout to produce computed styles. I think something like your blend suggestion makes sense. Flagging this for discussion with the Houdini TF.

[tabatkins]

From @css-meeting-bot on November 9, 2017 18:42

The Working Group just discussed What is the computed value of a in the middle of a layout dependent matrix decomposed interpolation?, and agreed to the following resolutions:

• RESOLVED: Add generic interpolation function. Name TBD. For Units and Values spec.

The full IRC log of that discussion

Topic: What is the computed value of a in the middle of a layout dependent matrix decomposed interpolation?
GitHub: https://github.com/w3c/css-houdini-drafts/issues/425
Scribenick: nainar
TabAtkins: Problem - you have a rtanstition between translate 30% and rotation 30 deg. The 30% is less dependant on lyaout info.
TabAtkins: you are in the middle of transition - due to incomaptiblilty you get matrix
TabAtkins: What should CSSOM return for Computed value?
TabAtkins: string based computd vaue can return layout dependant, but typed om cant
dbaron: interpolatematrix in gecko internally. This is important for intepolation rules for transform Needs to interpolate between partial inter-polation results. So that you can change in the middle3of transtion
dbaron: There is other rationale for interpolation this.
dbaron: Thought we agrred to add this to transform spec?
TabAtkins: Happy to add it but not there currently
surma: why cant we interpolate on % value
dbaron: you cant represent computed value without layout
TabAtkins: GCS does used vaoue for this. We are trying to return ComputedValue which isnt representable as a list
surma: Sounds like you need to solve geenrically.
TabAtkins: Add interpolate function that interpolates between two values. Like cross fade
TabAtkins: Proposal name is blend
dbaron: Sounds too imge-y
mwoodrow: Happy to accept concept not name
dholbert: You could simplify calc in many cases.
s/calc/to calc/
TabAtkins: computed value from 10 px to 10 px should be a px value not the function
RESOLVED: Add generic interpolation function. Name TBD. For Units and Values spec.
s/Units and Values/Values and Units/

[fantasai]

@tabatkins Edits checked in, please look them over and close out the issue if they're acceptable to resolve this issue?

[tabatkins]

Yeah, this'll need some edits in Transforms to specify that it's used, but mix() is indeed sufficient for the purposes.