Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: linear gradient
px
and transition hint syntax support (#48410)
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