[fix] minor inconsistency in textShadow style resolution

React Native doesn't apply textShadow styles when the 'height' or
'width' offset is 0.
This commit is contained in:
Nicolas Gallagher
2018-05-23 14:13:46 -07:00
parent a40521f485
commit da38e87b50
2 changed files with 44 additions and 10 deletions

View File

@@ -252,15 +252,49 @@ describe('StyleSheet/createReactDOMStyle', () => {
});
});
test('textShadowOffset', () => {
expect(
createReactDOMStyle({
textShadowColor: 'red',
textShadowOffset: { width: 1, height: 2 },
textShadowRadius: 5
})
).toEqual({
textShadow: '1px 2px 5px rgba(255,0,0,1.00)'
describe('textShadow styles', () => {
test('textShadowColor only', () => {
expect(createReactDOMStyle({ textShadowColor: 'red' })).toEqual({});
});
test('textShadowOffset only', () => {
expect(createReactDOMStyle({ textShadowOffset: { width: 1, height: 2 } })).toEqual({});
});
test('textShadowRadius only', () => {
expect(createReactDOMStyle({ textShadowRadius: 5 })).toEqual({});
});
test('textShadowColor and textShadowOffset only', () => {
expect(
createReactDOMStyle({ textShadowColor: 'red', textShadowOffset: { width: 0, height: 0 } })
).toEqual({});
expect(
createReactDOMStyle({ textShadowColor: 'red', textShadowOffset: { width: -1, height: 0 } })
).toEqual({
textShadow: '-1px 0px 0px rgba(255,0,0,1.00)'
});
expect(
createReactDOMStyle({ textShadowColor: 'red', textShadowOffset: { width: 1, height: 2 } })
).toEqual({
textShadow: '1px 2px 0px rgba(255,0,0,1.00)'
});
});
test('textShadowColor and textShadowRadius only', () => {
expect(createReactDOMStyle({ textShadowColor: 'red', textShadowRadius: 5 })).toEqual({});
});
test('textShadowColor, textShadowOffset, textShadowRadius', () => {
expect(
createReactDOMStyle({
textShadowColor: 'rgba(50,60,70,0.50)',
textShadowOffset: { width: 5, height: 10 },
textShadowRadius: 15
})
).toEqual({
textShadow: '5px 10px 15px rgba(50,60,70,0.50)'
});
});
});

View File

@@ -120,7 +120,7 @@ const resolveTextShadow = (resolvedStyle, style) => {
const blurRadius = normalizeValue(null, textShadowRadius || 0);
const color = normalizeColor(textShadowColor);
if (color) {
if (color && (height !== 0 || width !== 0)) {
resolvedStyle.textShadow = `${offsetX} ${offsetY} ${blurRadius} ${color}`;
}
};