mirror of
https://github.com/zhigang1992/react-native-web.git
synced 2026-01-12 22:51:09 +08:00
[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:
@@ -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)'
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
@@ -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}`;
|
||||
}
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user