zoriya/react-native-web
1
0
Fork 0
mirror of https://github.com/zoriya/react-native-web.git synced 2026-05-23 23:06:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

[fix] better cross-browser support for textDecoration styles

Browse Source 
Safari requires '-webkit' prefixes for CSS3 text-decoration styles, and
IE/Edge only support CSS2 text-decoration styles. This patch provides a
fallback for the CSS2 case and relies on the CSS3 properties for color
and style.

Close #1053

Co-authored-by: Nicolas Gallagher <nicolasgallagher@gmail.com>
This commit is contained in:
Anton Nyman
2018-07-27 12:54:07 +02:00
committed by Nicolas Gallagher
parent c7c1f29016
commit d29e31d9d6
2 changed files with 14 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/react-native-web/src/exports/StyleSheet/__tests__/createReactDOMStyle-test.js
Vendored
+3 -1
View File
@@ -247,7 +247,9 @@ describe('StyleSheet/createReactDOMStyle', () => {
textDecorationStyle: 'dashed'
})
).toEqual({
textDecoration: 'underline dashed rgba(255,0,0,1.00)'
textDecoration: 'underline',
textDecorationColor: 'rgba(255,0,0,1.00)',
textDecorationStyle: 'dashed'
});
});
});
packages/react-native-web/src/exports/StyleSheet/createReactDOMStyle.js
Vendored
+11 -3
View File
@@ -95,10 +95,18 @@ const resolveShadow = (resolvedStyle, style) => {
const resolveTextDecoration = (resolvedStyle, style) => {
const { textDecorationColor, textDecorationLine, textDecorationStyle } = style;
const color = normalizeColor(textDecorationColor) || '';
const lineStyle = textDecorationStyle || '';
const color = normalizeColor(textDecorationColor);
if (textDecorationLine) {
resolvedStyle.textDecoration = `${textDecorationLine} ${lineStyle} ${color}`.trim();
// use 'text-decoration' for browsers that support CSS2 text-decoration (e.g., IE, Edge)
resolvedStyle.textDecoration = textDecorationLine;
if (textDecorationColor) {
resolvedStyle.textDecorationColor = color;
}
if (textDecorationStyle) {
resolvedStyle.textDecorationStyle = textDecorationStyle;
}
}
};