fix: Use correct CSSDouble value for svg gradient interpolators#9012
fix: Use correct CSSDouble value for svg gradient interpolators#9012
CSSDouble value for svg gradient interpolators#9012Conversation
| keyframes: { | ||
| from: { | ||
| gradient: [ | ||
| { color: '#ff00cc', offset: '0%', opacity: 1 }, |
There was a problem hiding this comment.
I did some cleanup of unnecessary opacity values that only polluted examples.
| x1: true, | ||
| x2: true, | ||
| y1: true, | ||
| y2: true, |
There was a problem hiding this comment.
I think we can simply convert all % to numbers instead of passing percentages, as percentages in C++ mean that we need a value relative to some dimensions of the current or the parent component.
| {"x1", value<CSSDouble>(0)}, | ||
| {"x2", value<CSSDouble>(1)}, | ||
| {"y1", value<CSSDouble>(0)}, | ||
| {"y2", value<CSSDouble>(0)}, | ||
| {"gradient", value<SVGStops>(SVGStops())}, | ||
| {"gradientUnits", value<CSSIndex>(0)}, |
There was a problem hiding this comment.
It's a harder case than we initially thought: xs and ys can be either relative or absolute depending on 'gradientUnits' value.
|
Also in the radial gradient examples there is still and example saying that you cannot interpolate between relative and absolute. We should look into that after we solve the rest of the issues. |
|
Suddenly, the "Scanning beam" looks much different -- I might want to look into that later. |
2 participants
Summary
The old implementation used incorrect
CSSLengthandCSSKeywordtypes, which aren't valid as gradient-specific props are always numeric, even%should be convert to a number before being used. Since these values aren'tpx, we cannot useCSSLengthand should treat%as normal double numbers, e.g.50% -> 0.5without interpolating them with parent's/component's dimensions taken into the consideration.