[fix] textDecoration{Color,Line,Style} styles

Attempting to fallback to CSS2 text-decoration is not reliable for inline
styles. This patch assumes CSS3 text-decoration support when server-rendering,
and uses CSS.supports to check for runtime support. When CSS3 support is
available the long-form properties are preserved.

Fix #1312

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', () => {

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;
         }