[css-properties-values-api-1] What is the computed value of a <transform-list> in the middle of a layout dependent matrix decomposed interpolation? #425

alancutter · 2017-07-06T05:04:55Z

The <transform-list> 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:

<!DOCTYPE html>
<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: '<transform-list>',
  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 <transform-list> 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 <transform-list> 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 <transform-list-2> := <transform-list> | blend(<transform-list-2>, <transform-list-2>, <number>) instead (but with a better name) and to serialise it as the original transform functions instead of as a matrix that incorporates layout computations.

The text was updated successfully, but these errors were encountered:

shans · 2017-10-19T00:06:44Z

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.

css-meeting-bot · 2017-11-09T18:42:54Z

The Working Group just discussed What is the computed value of a <transform-list> 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

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

Previously we did not handle the case of computing the value of an interpolated transform, which occurs when we interpolate between two different transform types containing percentages. The correct result is currently not spec'd [1], so this patch fixes this by just returning "none" in this case. [1] w3c/css-houdini-drafts#425 Bug: 816803 Change-Id: I97c8f6b71f651a8d547fb4cb307121eba7dabdb6

Previously we did not handle the case of computing the value of an interpolated transform, which occurs when we interpolate between two different transform types containing percentages. The correct result is currently not spec'd [1], so this patch fixes this by just returning "none" in this case. [1] w3c/css-houdini-drafts#425 Bug: 816803 Change-Id: I97c8f6b71f651a8d547fb4cb307121eba7dabdb6 Reviewed-on: https://chromium-review.googlesource.com/942595 Reviewed-by: nainar <[email protected]> Commit-Queue: Darren Shen <[email protected]> Cr-Commit-Position: refs/heads/master@{#540258}

…nterpolated transform., a=testonly Automatic update from web-platform-tests[css-typed-om] Fix computed value of an interpolated transform. Previously we did not handle the case of computing the value of an interpolated transform, which occurs when we interpolate between two different transform types containing percentages. The correct result is currently not spec'd [1], so this patch fixes this by just returning "none" in this case. [1] w3c/css-houdini-drafts#425 Bug: 816803 Change-Id: I97c8f6b71f651a8d547fb4cb307121eba7dabdb6 Reviewed-on: https://chromium-review.googlesource.com/942595 Reviewed-by: nainar <[email protected]> Commit-Queue: Darren Shen <[email protected]> Cr-Commit-Position: refs/heads/master@{#540258} wpt-commits: a77669c83cc75fcec4df6e46f6a07edf8c20d1a4 wpt-pr: 9731 wpt-commits: a77669c83cc75fcec4df6e46f6a07edf8c20d1a4 wpt-pr: 9731

tabatkins · 2018-07-02T06:09:22Z

This issue was moved to w3c/csswg-drafts#2854

…nterpolated transform., a=testonly Automatic update from web-platform-tests[css-typed-om] Fix computed value of an interpolated transform. Previously we did not handle the case of computing the value of an interpolated transform, which occurs when we interpolate between two different transform types containing percentages. The correct result is currently not spec'd [1], so this patch fixes this by just returning "none" in this case. [1] w3c/css-houdini-drafts#425 Bug: 816803 Change-Id: I97c8f6b71f651a8d547fb4cb307121eba7dabdb6 Reviewed-on: https://chromium-review.googlesource.com/942595 Reviewed-by: nainar <nainarchromium.org> Commit-Queue: Darren Shen <shendchromium.org> Cr-Commit-Position: refs/heads/master{#540258} wpt-commits: a77669c83cc75fcec4df6e46f6a07edf8c20d1a4 wpt-pr: 9731 wpt-commits: a77669c83cc75fcec4df6e46f6a07edf8c20d1a4 wpt-pr: 9731 UltraBlame original commit: 945ce59d8db798c3a827709f0069b54735ab7349

shans added the css-properties-values-api-1 label Jul 24, 2017

shans added the Needs Feedback/Review label Oct 19, 2017

nainar added Needs Edits and removed Needs Feedback/Review labels Jan 4, 2018

chromium-wpt-export-bot mentioned this issue Mar 1, 2018

[css-typed-om] Fix computed value of an interpolated transform. web-platform-tests/wpt#9731

Merged

tabatkins mentioned this issue Jul 2, 2018

[css-transforms-1] What is the computed value of a <transform-list> in the middle of a layout dependent matrix decomposed interpolation? w3c/csswg-drafts#2854

Open

tabatkins closed this as completed Jul 2, 2018

This was referenced Sep 12, 2023

[css-values-4] mix() can not represent retargeted transitions w3c/csswg-drafts#9341

Closed

[css-values] Abandon mix()? w3c/csswg-drafts#9343

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[css-properties-values-api-1] What is the computed value of a <transform-list> in the middle of a layout dependent matrix decomposed interpolation? #425

[css-properties-values-api-1] What is the computed value of a <transform-list> in the middle of a layout dependent matrix decomposed interpolation? #425

alancutter commented Jul 6, 2017 •

edited

Loading

shans commented Oct 19, 2017

css-meeting-bot commented Nov 9, 2017

tabatkins commented Jul 2, 2018

[css-properties-values-api-1] What is the computed value of a <transform-list> in the middle of a layout dependent matrix decomposed interpolation? #425

[css-properties-values-api-1] What is the computed value of a <transform-list> in the middle of a layout dependent matrix decomposed interpolation? #425

Comments

alancutter commented Jul 6, 2017 • edited Loading

shans commented Oct 19, 2017

css-meeting-bot commented Nov 9, 2017

tabatkins commented Jul 2, 2018

alancutter commented Jul 6, 2017 •

edited

Loading