Skip to content

Commit

Permalink
feat: linear gradient px and transition hint syntax support (#48410)
Browse files Browse the repository at this point in the history
Summary:
- Adds support for color transition hint syntax in linear gradients. e.g. `linear-gradient(red, 20%, green)`
- Adds `px` support. Combination of `px` and `%` also works.
- Simplified color stops parsing.
- The `processColorTransitionHint` and `getFixedColorStops` is moved to native code so it can support combination of `px` and `%` units as it requires gradient line length, which is derived from view dimensions and gradient line angle.
- Follows CSS [spec](https://drafts.csswg.org/css-images-4/#coloring-gradient-line) (Refer transition hint section) and implementation is referred from [blink engine source](https://github.com/chromium/chromium/blob/a296b1bad6dc1ed9d751b7528f7ca2134227b828/third_party/blink/renderer/core/css/css_gradient_value.cc#L240).

## Changelog:

[GENERAL] [ADDED] - Linear gradient color transition hint syntax and `px` unit support.

Pull Request resolved: #48410

Test Plan:
Added testcase in processBackgroundImage-test.ts and example in LinearGradientExample.js

<img width="500" alt="Screenshot 2025-01-05 at 11 38 13 PM" src="https://github.com/user-attachments/assets/62858bb7-1dbf-40cf-8dd4-ec0daf84ac1b" />

## Todo

Add testcases for `getFixedColorStops` and `processColorTransitionHint` in native code for both platforms. That's the only downside of moving it out of JS 🤦

Reviewed By: NickGerleman

Differential Revision: D67870375

Pulled By: joevilches

fbshipit-source-id: b91d741f3108c25df8000d220726bf180c64be60
  • Loading branch information
intergalacticspacehighway authored and facebook-github-bot committed Jan 16, 2025
1 parent c65117e commit cc89ddd
Show file tree
Hide file tree
Showing 12 changed files with 926 additions and 262 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -372,7 +372,7 @@ export type GradientValue = {
// Angle or direction enums
direction?: string | undefined;
colorStops: ReadonlyArray<{
color: ColorValue;
color: ColorValue | null;
positions?: ReadonlyArray<string[]> | undefined;
}>;
};
Expand Down
Loading

0 comments on commit cc89ddd

Please sign in to comment.