From d05fa342d0befc051daab7783914340e97b1d1ed Mon Sep 17 00:00:00 2001 From: Chris Green Date: Tue, 4 May 2021 20:57:36 +0100 Subject: [PATCH] Add failing test for style resolving behavior Less specific shorthand style properties are being applied instead of the more specific styles if there is another element also with one of the more specific styles. This is due to the common styles being pulled out as class names for de-duplication. Ref #2007 Close #2010 --- .../StyleSheet/__tests__/createStyleResolver-test.js | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/packages/react-native-web/src/exports/StyleSheet/__tests__/createStyleResolver-test.js b/packages/react-native-web/src/exports/StyleSheet/__tests__/createStyleResolver-test.js index e4d3d09d..97fec84e 100644 --- a/packages/react-native-web/src/exports/StyleSheet/__tests__/createStyleResolver-test.js +++ b/packages/react-native-web/src/exports/StyleSheet/__tests__/createStyleResolver-test.js @@ -77,6 +77,16 @@ describe('StyleSheet/createStyleResolver', () => { expect(styleResolver.resolve({ pointerEvents: 'box-none' })).toMatchSnapshot(); }); + test.skip('long form style properties take precedence over shorthand properties', () => { + const registeredStyle1 = ReactNativePropRegistry.register({ paddingHorizontal: '40px' }); + const inlineStyle1 = { padding: '8px', paddingHorizontal: '40px' }; + expect(styleResolver.resolve([registeredStyle1, inlineStyle1])).toMatchSnapshot(); + + const registeredStyle2 = ReactNativePropRegistry.register({ marginVertical: '40px' }); + const inlineStyle2 = { margin: '8px', marginVertical: '40px' }; + expect(styleResolver.resolve([registeredStyle2, inlineStyle2])).toMatchSnapshot(); + }); + describe('sheet', () => { beforeEach(() => { ExecutionEnvironment.canUseDOM = false;