Use only public API in CSSProperty-test (#10429)

* Use only public API in CSSProperty-test

* Move test to ReactDOMServerIntegration

* Add explanation

src/renderers/dom/shared/__tests__/CSSProperty-test.js

@@ -1,37 +0,0 @@
-/**
- * Copyright 2014-present, Facebook, Inc.
- * All rights reserved.
- *
- * This source code is licensed under the BSD-style license found in the
- * LICENSE file in the root directory of this source tree. An additional grant
- * of patent rights can be found in the PATENTS file in the same directory.
- *
- * @emails react-core
- */
-
-'use strict';
-
-describe('CSSProperty', () => {
-  var CSSProperty;
-
-  beforeEach(() => {
-    jest.resetModules();
-    // TODO: can we express this test with only public API?
-    CSSProperty = require('CSSProperty');
-  });
-
-  it('should generate browser prefixes for its `isUnitlessNumber`', () => {
-    expect(CSSProperty.isUnitlessNumber.lineClamp).toBeTruthy();
-    expect(CSSProperty.isUnitlessNumber.WebkitLineClamp).toBeTruthy();
-    expect(CSSProperty.isUnitlessNumber.msFlexGrow).toBeTruthy();
-    expect(CSSProperty.isUnitlessNumber.MozFlexGrow).toBeTruthy();
-    expect(CSSProperty.isUnitlessNumber.msGridRow).toBeTruthy();
-    expect(CSSProperty.isUnitlessNumber.msGridRowEnd).toBeTruthy();
-    expect(CSSProperty.isUnitlessNumber.msGridRowSpan).toBeTruthy();
-    expect(CSSProperty.isUnitlessNumber.msGridRowStart).toBeTruthy();
-    expect(CSSProperty.isUnitlessNumber.msGridColumn).toBeTruthy();
-    expect(CSSProperty.isUnitlessNumber.msGridColumnEnd).toBeTruthy();
-    expect(CSSProperty.isUnitlessNumber.msGridColumnSpan).toBeTruthy();
-    expect(CSSProperty.isUnitlessNumber.msGridColumnStart).toBeTruthy();
-  });
-});

src/renderers/dom/shared/__tests__/ReactDOMServerIntegration-test.js

@@ -791,6 +791,43 @@ describe('ReactDOMServerIntegration', () => {
         expect(e.style.width).toBe('');
         expect(e.hasAttribute('style')).toBe(false);
       });
+
+      itRenders('unitless-number rules with prefixes', async render => {
+        const {style} = await render(
+          <div
+            style={{
+              lineClamp: 10,
+              WebkitLineClamp: 10,
+              MozFlexGrow: 10,
+              msFlexGrow: 10,
+              msGridRow: 10,
+              msGridRowEnd: 10,
+              msGridRowSpan: 10,
+              msGridRowStart: 10,
+              msGridColumn: 10,
+              msGridColumnEnd: 10,
+              msGridColumnSpan: 10,
+              msGridColumnStart: 10,
+            }}
+          />,
+        );
+
+        expect(style.lineClamp).toBe('10');
+        expect(style.WebkitLineClamp).toBe('10');
+        expect(style.MozFlexGrow).toBe('10');
+        // jsdom is inconsistent in the style property name
+        // it uses on the client and when processing server markup.
+        // But it should be there either way.
+        expect(style.MsFlexGrow || style.msFlexGrow).toBe('10');
+        expect(style.MsGridRow || style.msGridRow).toBe('10');
+        expect(style.MsGridRowEnd || style.msGridRowEnd).toBe('10');
+        expect(style.MsGridRowSpan || style.msGridRowSpan).toBe('10');
+        expect(style.MsGridRowStart || style.msGridRowStart).toBe('10');
+        expect(style.MsGridColumn || style.msGridColumn).toBe('10');
+        expect(style.MsGridColumnEnd || style.msGridColumnEnd).toBe('10');
+        expect(style.MsGridColumnSpan || style.msGridColumnSpan).toBe('10');
+        expect(style.MsGridColumnStart || style.msGridColumnStart).toBe('10');
+      });
     });
 
     describe('aria attributes', function() {