Skip to content

fix: linear gradient color stop fix up spec #45969

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
intergalacticspacehighway wants to merge 9 commits into from
Closed

fix: linear gradient color stop fix up spec #45969

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
c7d2638
rename position to stops
intergalacticspacehighway Aug 10, 2024
c39dbb6
add color stop fix up testcases
intergalacticspacehighway Aug 10, 2024
baafd1e
add more tests
intergalacticspacehighway Aug 10, 2024
914b0b7
add more tests
intergalacticspacehighway Aug 10, 2024
210a491
cleanup example
intergalacticspacehighway Aug 10, 2024
e3f51c9
update api snapshot
intergalacticspacehighway Aug 10, 2024
0b3be72
nit typo
intergalacticspacehighway Aug 10, 2024
0add917
nit cleanup
intergalacticspacehighway Aug 10, 2024
e3c272e
rename stops to positions
intergalacticspacehighway Aug 11, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/react-native/Libraries/StyleSheet/StyleSheetTypes.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -279,7 +279,7 @@ export type GradientValue = {
direction: string | undefined;
colorStops: Array<{
color: ColorValue;
position: number | undefined;
positions: string[] | undefined;
}>;
};

Expand Down
2 changes: 1 addition & 1 deletion packages/react-native/Libraries/StyleSheet/StyleSheetTypes.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -715,7 +715,7 @@ export type GradientValue = {
direction?: string,
colorStops: $ReadOnlyArray<{
color: ____ColorValue_Internal,
position?: string,
positions?: string[],
}>,
};

Expand Down
214 changes: 200 additions & 14 deletions packages/react-native/Libraries/StyleSheet/__tests__/processBackgroundImage-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -197,9 +197,9 @@ describe('processBackgroundImage', () => {
const result = processBackgroundImage(input);
expect(result[0].colorStops).toEqual([
{color: processColor('red'), position: 0},
{color: processColor('green'), position: 0.25},
{color: processColor('green'), position: 0.3},
{color: processColor('blue'), position: 0.6},
{color: processColor('yellow'), position: 0.75},
{color: processColor('yellow'), position: 0.8},
{color: processColor('purple'), position: 1},
]);
});
Expand Down Expand Up @@ -282,8 +282,8 @@ describe('processBackgroundImage', () => {
type: 'linearGradient',
direction: 'to bottom right',
colorStops: [
{color: 'red', position: '0%'},
{color: 'blue', position: '100%'},
{color: 'red', positions: ['0%']},
{color: 'blue', positions: ['100%']},
],
},
];
Expand Down Expand Up @@ -341,41 +341,227 @@ describe('processBackgroundImage', () => {
expect(result[0].end.y).toBeCloseTo(0.146447, 5);
});

it('should process an style object with mix of default and undefined stop positions', () => {
it('should fix up stop positions #1', () => {
const input = [
{
type: 'linearGradient',
colorStops: [
{color: 'red'},
{color: 'red', positions: ['40%']},
{color: 'blue'},
{color: 'green'},
{color: 'purple', position: '80%'},
{color: 'pink'},
{color: 'purple'},
],
},
];
const result = processBackgroundImage(input);
expect(result[0].colorStops).toEqual([
const output = [
{
color: processColor('red'),
position: 0,
position: 0.4,
},
{
color: processColor('blue'),
position: 0.25,
position: 0.6,
},
{
color: processColor('green'),
position: 0.5,
position: 0.8,
},
{
color: processColor('purple'),
position: 1,
},
];
const result = processBackgroundImage(input);
const result1 = processBackgroundImage(
`linear-gradient(red 40%, blue, green, purple)`,
);
expect(result[0].colorStops).toEqual(output);
expect(result1[0].colorStops).toEqual(output);
});

it('should process multiple stop positions', () => {
const input = [
{
type: 'linearGradient',
colorStops: [
{color: 'red', positions: ['40%', '80%']},
{color: 'blue'},
{color: 'green'},
],
},
];
const result = processBackgroundImage(input);
const result2 = processBackgroundImage(
`linear-gradient(red 40% 80%, blue, green)`,
);
const output = [
{
color: processColor('red'),
position: 0.4,
},
{
color: processColor('red'),
position: 0.8,
},
{
color: processColor('pink'),
color: processColor('blue'),
position: 0.9,
},
{
color: processColor('green'),
position: 1,
},
];
expect(result[0].colorStops).toEqual(output);
expect(result2[0].colorStops).toEqual(output);
});

it('should fix up stop positions #2', () => {
const input = [
{
type: 'linearGradient',
colorStops: [
{color: 'red'},
{color: 'blue', positions: ['20%']},
{color: 'green'},
],
},
];
const output = [
{
color: processColor('red'),
position: 0,
},
{
color: processColor('blue'),
position: 0.2,
},
{
color: processColor('green'),
position: 1,
},
];
const result = processBackgroundImage(input);
const result1 = processBackgroundImage(
`linear-gradient(red , blue 20%, green)`,
);
expect(result[0].colorStops).toEqual(output);
expect(result1[0].colorStops).toEqual(output);
});

it('should fix up stop positions #3', () => {
const input = [
{
type: 'linearGradient',
colorStops: [
{color: 'red', positions: ['-50%']},
{color: 'blue'},
{color: 'green'},
],
},
];
const output = [
{
color: processColor('red'),
position: -0.5,
},
{
color: processColor('blue'),
position: 0.25,
},
{
color: processColor('green'),
position: 1,
},
];
const result = processBackgroundImage(input);
const result1 = processBackgroundImage(
`linear-gradient(red -50%, blue, green)`,
);
expect(result[0].colorStops).toEqual(output);
expect(result1[0].colorStops).toEqual(output);
});

it('should fix up stop positions #4', () => {
const input = [
{
type: 'linearGradient',
colorStops: [
{color: 'red'},
{color: 'blue', positions: ['-50%']},
{color: 'green', positions: ['150%']},
{color: 'yellow'},
],
},
];
const output = [
{
color: processColor('red'),
position: 0,
},
{
color: processColor('blue'),
position: 0,
},
{
color: processColor('green'),
position: 1.5,
},
{
color: processColor('yellow'),
position: 1.5,
},
];
const result = processBackgroundImage(input);
const result1 = processBackgroundImage(
`linear-gradient(red, blue -50%, green 150%, yellow)`,
);
expect(result[0].colorStops).toEqual(output);
expect(result1[0].colorStops).toEqual(output);
});

it('should fix up stop positions #5', () => {
const result = processBackgroundImage(
'linear-gradient(red 40% 20%, blue 90% 120% , green)',
);
expect(result[0].colorStops).toEqual([
{color: processColor('red'), position: 0.4},
{color: processColor('red'), position: 0.4},
{color: processColor('blue'), position: 0.9},
{color: processColor('blue'), position: 1.2},
{color: processColor('green'), position: 1.2},
]);
});

it('should fix up stop positions #6', () => {
const result = processBackgroundImage(
'linear-gradient(red 40% 20%, blue 90% 120% , green 200% 300%)',
);
expect(result[0].colorStops).toEqual([
{color: processColor('red'), position: 0.4},
{color: processColor('red'), position: 0.4},
{color: processColor('blue'), position: 0.9},
{color: processColor('blue'), position: 1.2},
{color: processColor('green'), position: 2},
{color: processColor('green'), position: 3},
]);
});

it('should return empty array for invalid multiple stop positions', () => {
const result = processBackgroundImage([
{
type: 'linearGradient',
colorStops: [
{color: 'red', positions: ['40% 20']},
{color: 'blue', positions: ['90% 120%']},
{color: 'green', positions: ['200% 300%']},
],
},
]);
const result1 = processBackgroundImage(
'linear-gradient(red 40% 20, blue 90% 120% , green 200% 300%)',
);
expect(result).toEqual([]);
expect(result1).toEqual([]);
});
});
Loading