diff --git a/packages/react-native-web/src/exports/StyleSheet/__tests__/createReactDOMStyle-test.js b/packages/react-native-web/src/exports/StyleSheet/__tests__/createReactDOMStyle-test.js index 9ae47a2f8..473594adb 100644 --- a/packages/react-native-web/src/exports/StyleSheet/__tests__/createReactDOMStyle-test.js +++ b/packages/react-native-web/src/exports/StyleSheet/__tests__/createReactDOMStyle-test.js @@ -141,16 +141,6 @@ describe('StyleSheet/createReactDOMStyle', () => { }); }); - test('textDecorationLine', () => { - expect( - createReactDOMStyle({ - textDecorationLine: 'underline' - }) - ).toEqual({ - textDecoration: 'underline' - }); - }); - describe('transform', () => { // passthrough if transform value is ever a string test('string', () => { diff --git a/packages/react-native-web/src/exports/StyleSheet/createReactDOMStyle.js b/packages/react-native-web/src/exports/StyleSheet/createReactDOMStyle.js index c08dc3323..492882312 100644 --- a/packages/react-native-web/src/exports/StyleSheet/createReactDOMStyle.js +++ b/packages/react-native-web/src/exports/StyleSheet/createReactDOMStyle.js @@ -7,6 +7,7 @@ * @noflow */ +import { canUseDOM } from 'fbjs/lib/ExecutionEnvironment'; import { MONOSPACE_FONT_STACK, SYSTEM_FONT_STACK, STYLE_SHORT_FORM_EXPANSIONS } from './constants'; import normalizeValueWithProperty from './normalizeValueWithProperty'; @@ -23,6 +24,13 @@ import normalizeValueWithProperty from './normalizeValueWithProperty'; const emptyObject = {}; +const supportsCSS3TextDecoration = + !canUseDOM || + (window.CSS != null && + window.CSS.supports != null && + (window.CSS.supports('text-decoration-line', 'none') || + window.CSS.supports('-webkit-text-decoration-line', 'none'))); + /** * Transform */ @@ -144,7 +152,11 @@ const createReactDOMStyle = style => { case 'textDecorationLine': { // use 'text-decoration' for browsers that only support CSS2 // text-decoration (e.g., IE, Edge) - resolvedStyle.textDecoration = value; + if (!supportsCSS3TextDecoration) { + resolvedStyle.textDecoration = value; + } else { + resolvedStyle.textDecorationLine = value; + } break; }