diff --git a/apps/website/docs/api/02-css/index.md b/apps/website/docs/api/02-css/index.md index ed30d4c8..4a1b567d 100644 --- a/apps/website/docs/api/02-css/index.md +++ b/apps/website/docs/api/02-css/index.md @@ -130,7 +130,7 @@ The following tables represent the compatibility status of the strict CSS API fo | color | ✅ | ✅ | | | columnGap | ✅ | ✅ | | | cursor | ❌ | ✅ Partial | | -| direction | ❌ | ❌ | | +| direction | ✅ | ✅ | | | display: block | 🟡 Partial | 🟡 Partial | [#2](https://github.com/facebook/react-strict-dom/issues/2) | | display: contents | ✅ | ✅ | | | display: flex | ✅ | ✅ | | @@ -156,13 +156,13 @@ The following tables represent the compatibility status of the strict CSS API fo | gap | ✅ | ✅ | | | height | ✅ | ✅ | | | inlineSize | 🟡 | 🟡 | | -| inset | 🟡 | 🟡 | | -| insetBlock | 🟡 | 🟡 | | -| insetBlockEnd | 🟡 | 🟡 | | -| insetBlockStart | 🟡 | 🟡 | | -| insetInline | 🟡 | 🟡 | | -| insetInlineEnd | 🟡 | 🟡 | | -| insetInlineStart | 🟡 | 🟡 | | +| inset | ✅ | ✅ | | +| insetBlock | ✅ | ✅ | | +| insetBlockEnd | ✅ | ✅ | | +| insetBlockStart | ✅ | ✅ | | +| insetInline | ✅ | ✅ | | +| insetInlineEnd | ✅ | ✅ | | +| insetInlineStart | ✅ | ✅ | | | isolation | ✅ | ✅ | | | justifyContent | ✅ | ✅ | | | justifyItems | ❌ | ❌ | | @@ -175,13 +175,13 @@ The following tables represent the compatibility status of the strict CSS API fo | listStylePosition | ❌ | ❌ | | | listStyleType | ❌ | ❌ | | | margin | ✅ | ✅ | | -| marginBlock | 🟡 | 🟡 | | -| marginBlockEnd | 🟡 | 🟡 | | -| marginBlockStart | 🟡 | 🟡 | | +| marginBlock | ✅ | ✅ | | +| marginBlockEnd | ✅ | ✅ | | +| marginBlockStart | ✅ | ✅ | | | marginBottom | ✅ | ✅ | | -| marginInline | 🟡 | 🟡 | | -| marginInlineEnd | 🟡 | 🟡 | | -| marginInlineStart | 🟡 | 🟡 | | +| marginInline | ✅ | ✅ | | +| marginInlineEnd | ✅ | ✅ | | +| marginInlineStart | ✅ | ✅ | | | marginLeft | ✅ | ✅ | | | marginRight | ✅ | ✅ | | | marginTop | ✅ | ✅ | | @@ -208,13 +208,13 @@ The following tables represent the compatibility status of the strict CSS API fo | overflowX | ❌ | ❌ | | | overflowY | ❌ | ❌ | | | padding | ✅ | ✅ | | -| paddingBlock | 🟡 | 🟡 | | -| paddingBlockEnd | 🟡 | 🟡 | | -| paddingBlockStart | 🟡 | 🟡 | | +| paddingBlock | ✅ | ✅ | | +| paddingBlockEnd | ✅ | ✅ | | +| paddingBlockStart | ✅ | ✅ | | | paddingBottom | ✅ | ✅ | | -| paddingInline | 🟡 | 🟡 | | -| paddingInlineEnd | 🟡 | 🟡 | | -| paddingInlineStart | 🟡 | 🟡 | | +| paddingInline | ✅ | ✅ | | +| paddingInlineEnd | ✅ | ✅ | | +| paddingInlineStart | ✅ | ✅ | | | paddingLeft | ✅ | ✅ | | | paddingRight | ✅ | ✅ | | | paddingTop | ✅ | ✅ | | diff --git a/packages/react-strict-dom/src/native/css/__tests__/__snapshots__/fixContentBox-test.js.snap b/packages/react-strict-dom/src/native/css/__tests__/__snapshots__/fixContentBox-test.js.snap deleted file mode 100644 index 90399ff4..00000000 --- a/packages/react-strict-dom/src/native/css/__tests__/__snapshots__/fixContentBox-test.js.snap +++ /dev/null @@ -1,106 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`fixContentBox boxSizing: content-box: allDifferent 1`] = ` -{ - "borderBottomWidth": 3, - "borderLeftWidth": 4, - "borderRightWidth": 2, - "borderTopWidth": 1, - "height": 144, - "paddingBottom": 30, - "paddingLeft": 40, - "paddingRight": 20, - "paddingTop": 10, - "width": 166, -} -`; - -exports[`fixContentBox boxSizing: content-box: auto 1`] = ` -{ - "borderWidth": 2, - "height": 74, - "padding": 10, - "width": "auto", -} -`; - -exports[`fixContentBox boxSizing: content-box: height 1`] = ` -{ - "borderWidth": 2, - "height": 74, - "padding": 10, -} -`; - -exports[`fixContentBox boxSizing: content-box: logical 1`] = ` -{ - "borderBlockWidth": 5, - "borderInlineWidth": 5, - "height": 100, - "paddingBlock": 10, - "paddingInline": 20, - "paddingInlineEnd": 30, - "paddingLeft": 40, - "width": 140, -} -`; - -exports[`fixContentBox boxSizing: content-box: maxHeight 1`] = ` -{ - "borderWidth": 2, - "maxHeight": 74, - "padding": 10, -} -`; - -exports[`fixContentBox boxSizing: content-box: maxWidth 1`] = ` -{ - "borderWidth": 2, - "maxWidth": 124, - "padding": 10, -} -`; - -exports[`fixContentBox boxSizing: content-box: minHeight 1`] = ` -{ - "borderWidth": 2, - "minHeight": 74, - "padding": 10, -} -`; - -exports[`fixContentBox boxSizing: content-box: minWidth 1`] = ` -{ - "borderWidth": 2, - "minWidth": 124, - "padding": 10, -} -`; - -exports[`fixContentBox boxSizing: content-box: null 1`] = ` -{ - "borderWidth": 2, - "height": 74, - "padding": 10, - "width": null, -} -`; - -exports[`fixContentBox boxSizing: content-box: string 1`] = ` -{ - "borderWidth": 2, - "boxSizing": "content-box", - "height": 50, - "padding": 10, - "width": "50%", -} -`; - -exports[`fixContentBox boxSizing: content-box: width 1`] = ` -{ - "borderWidth": 2, - "overflow": "hidden", - "padding": 10, - "width": 124, -} -`; diff --git a/packages/react-strict-dom/src/native/css/__tests__/fixContentBox-test.js b/packages/react-strict-dom/src/native/css/__tests__/fixContentBox-test.js deleted file mode 100644 index bc69805b..00000000 --- a/packages/react-strict-dom/src/native/css/__tests__/fixContentBox-test.js +++ /dev/null @@ -1,121 +0,0 @@ -/** - * Copyright (c) Meta Platforms, Inc. and affiliates. - * - * This source code is licensed under the MIT license found in the - * LICENSE file in the root directory of this source tree. - */ - -import { fixContentBox } from '../fixContentBox'; - -describe('fixContentBox', () => { - beforeEach(() => { - jest.spyOn(console, 'warn'); - console.warn.mockImplementation(() => {}); - }); - - afterEach(() => { - console.warn.mockRestore(); - }); - - test('boxSizing: content-box', () => { - const styles = { - width: { - boxSizing: 'content-box', - borderWidth: 2, - padding: 10, - width: 100, - // test that unrelated properties are unmodified - overflow: 'hidden' - }, - height: { - boxSizing: 'content-box', - borderWidth: 2, - padding: 10, - height: 50 - }, - maxWidth: { - boxSizing: 'content-box', - borderWidth: 2, - padding: 10, - maxWidth: 100 - }, - minWidth: { - boxSizing: 'content-box', - borderWidth: 2, - padding: 10, - minWidth: 100 - }, - maxHeight: { - boxSizing: 'content-box', - borderWidth: 2, - padding: 10, - maxHeight: 50 - }, - minHeight: { - boxSizing: 'content-box', - borderWidth: 2, - padding: 10, - minHeight: 50 - }, - allDifferent: { - boxSizing: 'content-box', - borderTopWidth: 1, - borderRightWidth: 2, - borderBottomWidth: 3, - borderLeftWidth: 4, - paddingTop: 10, - paddingRight: 20, - paddingBottom: 30, - paddingLeft: 40, - width: 100, - height: 100 - }, - logical: { - boxSizing: 'content-box', - borderBlockWidth: 5, - borderInlineWidth: 5, - paddingBlock: 10, - paddingInline: 20, - paddingInlineEnd: 30, - paddingLeft: 40, - width: 100, - height: 100 - }, - auto: { - boxSizing: 'content-box', - borderWidth: 2, - padding: 10, - height: 50, - width: 'auto' - }, - null: { - boxSizing: 'content-box', - borderWidth: 2, - padding: 10, - height: 50, - width: null - }, - string: { - boxSizing: 'content-box', - borderWidth: 2, - padding: 10, - height: 50, - width: '50%' - } - }; - - expect(fixContentBox(styles.width)).toMatchSnapshot('width'); - expect(fixContentBox(styles.height)).toMatchSnapshot('height'); - expect(fixContentBox(styles.maxWidth)).toMatchSnapshot('maxWidth'); - expect(fixContentBox(styles.maxHeight)).toMatchSnapshot('maxHeight'); - expect(fixContentBox(styles.minWidth)).toMatchSnapshot('minWidth'); - expect(fixContentBox(styles.minHeight)).toMatchSnapshot('minHeight'); - expect(fixContentBox(styles.allDifferent)).toMatchSnapshot('allDifferent'); - expect(fixContentBox(styles.logical)).toMatchSnapshot('logical'); - expect(fixContentBox(styles.auto)).toMatchSnapshot('auto'); - expect(fixContentBox(styles.null)).toMatchSnapshot('null'); - expect(fixContentBox(styles.string)).toMatchSnapshot('string'); - - expect(console.warn).toHaveBeenCalledTimes(1); - }); -}); diff --git a/packages/react-strict-dom/src/native/css/fixContentBox.js b/packages/react-strict-dom/src/native/css/fixContentBox.js deleted file mode 100644 index be399e06..00000000 --- a/packages/react-strict-dom/src/native/css/fixContentBox.js +++ /dev/null @@ -1,113 +0,0 @@ -/** - * Copyright (c) Meta Platforms, Inc. and affiliates. - * - * This source code is licensed under the MIT license found in the - * LICENSE file in the root directory of this source tree. - * - * @flow strict - */ - -import type { ReactNativeStyle } from '../../types/renderer.native'; - -import { warnMsg } from '../../shared/logUtils'; - -type Direction = 0 | 1 | 2 | 3; - -const TOP: Direction = 0; -const RIGHT: Direction = 1; -const BOTTOM: Direction = 2; -const LEFT: Direction = 3; - -// TODO: check for RTL and flip START and END -const START: Direction = LEFT; -const END: Direction = RIGHT; - -const borderMapping: [string, Direction[]][] = [ - ['borderWidth', [TOP, RIGHT, BOTTOM, LEFT]], - ['borderTopWidth', [TOP]], - ['borderRightWidth', [RIGHT]], - ['borderBottomWidth', [BOTTOM]], - ['borderLeftWidth', [LEFT]], - ['borderStartWidth', [START]], - ['borderEndWidth', [END]] -]; - -const paddingMapping: [string, Direction[]][] = [ - ['padding', [TOP, RIGHT, BOTTOM, LEFT]], - ['paddingVertical', [TOP, BOTTOM]], - ['paddingHorizontal', [LEFT, RIGHT]], - ['paddingTop', [TOP]], - ['paddingRight', [RIGHT]], - ['paddingBottom', [BOTTOM]], - ['paddingLeft', [LEFT]], - ['paddingStart', [START]], - ['paddingEnd', [END]] -]; - -export function fixContentBox(flatStyle: ReactNativeStyle): ReactNativeStyle { - const border: [number, number, number, number] = [0, 0, 0, 0]; - const padding: [number, number, number, number] = [0, 0, 0, 0]; - - for (const [styleProp, directions] of borderMapping) { - if (typeof flatStyle[styleProp] === 'number') { - for (const direction of directions) { - border[direction] = flatStyle[styleProp]; - } - } - } - - for (const [styleProp, directions] of paddingMapping) { - if (typeof flatStyle[styleProp] === 'number') { - for (const direction of directions) { - padding[direction] = flatStyle[styleProp]; - } - } - } - - const correctionVertical = - border[TOP] + padding[TOP] + padding[BOTTOM] + border[BOTTOM]; - const correctionHorizontal = - border[LEFT] + padding[LEFT] + padding[RIGHT] + border[RIGHT]; - - const correctionMapping = new Map([ - ['width', correctionHorizontal], - ['minWidth', correctionHorizontal], - ['maxWidth', correctionHorizontal], - ['height', correctionVertical], - ['minHeight', correctionVertical], - ['maxHeight', correctionVertical] - ]); - - const nextStyle: ReactNativeStyle = {}; - for (const styleProp of Object.keys(flatStyle)) { - const correction = correctionMapping.get(styleProp); - const styleValue = flatStyle[styleProp]; - if (correction != null) { - if (styleValue == null) { - nextStyle[styleProp] = null; - continue; - } - if (styleValue === 'auto') { - nextStyle[styleProp] = styleValue; - continue; - } - if (typeof styleValue !== 'number') { - if (__DEV__) { - warnMsg( - `unsupported style value in "${styleProp}:${String( - styleValue - )}" when used with "boxSizing:'content-box'". Expected a value that resolves to a number. Percentage values can only be used with "boxSizing:'border-box'".` - ); - } - return flatStyle; - } - nextStyle[styleProp] = styleValue + correction; - } else { - if (styleProp !== 'boxSizing') { - nextStyle[styleProp] = styleValue; - } - } - } - - return nextStyle; -} diff --git a/packages/react-strict-dom/src/native/css/index.js b/packages/react-strict-dom/src/native/css/index.js index e6324b1c..19c64f2e 100644 --- a/packages/react-strict-dom/src/native/css/index.js +++ b/packages/react-strict-dom/src/native/css/index.js @@ -17,13 +17,11 @@ import { CSSLengthUnitValue } from './CSSLengthUnitValue'; import { CSSTransformValue } from './CSSTransformValue'; import { CSSUnparsedValue } from './typed-om/CSSUnparsedValue'; import { errorMsg } from '../../shared/logUtils'; -import { fixContentBox } from './fixContentBox'; import { flattenStyle } from './flattenStyleXStyles'; import { lengthStyleKeySet } from './isLengthStyleKey'; import { mediaQueryMatches } from './mediaQueryMatches'; import { processStyle } from './processStyle'; import { resolveVariableReferences } from './customProperties'; -import { version } from '../modules/version'; export const __customProperties: MutableCustomProperties = {}; @@ -303,7 +301,7 @@ export function props( const options = this; const nativeProps: ReactNativeProps = { style: {} }; - let nextStyle: ReactNativeStyle = nativeProps.style; + const nextStyle: ReactNativeStyle = nativeProps.style; const flatStyle = resolveStyle(style, options) as $FlowFixMe; @@ -394,63 +392,10 @@ export function props( nativeProps.cursorColor = styleValue; } } - // inset - else if (styleProp === 'inset') { - nextStyle.top ??= styleValue; - nextStyle.start ??= styleValue; - nextStyle.end ??= styleValue; - nextStyle.bottom ??= styleValue; - } else if (styleProp === 'insetBlock') { - nextStyle.top ??= styleValue; - nextStyle.bottom ??= styleValue; - } else if (styleProp === 'insetBlockEnd') { - nextStyle.bottom = flatStyle.bottom ?? styleValue; - } else if (styleProp === 'insetBlockStart') { - nextStyle.top = flatStyle.top ?? styleValue; - } else if (styleProp === 'insetInline') { - nextStyle.end ??= styleValue; - nextStyle.start ??= styleValue; - } else if (styleProp === 'insetInlineEnd') { - nextStyle.end = flatStyle.end ?? styleValue; - } else if (styleProp === 'insetInlineStart') { - nextStyle.start = flatStyle.start ?? styleValue; - } // lineClamp polyfill else if (styleProp === 'lineClamp') { nativeProps.numberOfLines = styleValue; } - // marginBlock - else if (styleProp === 'marginBlock') { - nextStyle.marginVertical = styleValue; - } else if (styleProp === 'marginBlockStart') { - nextStyle.marginTop ??= styleValue; - } else if (styleProp === 'marginBlockEnd') { - nextStyle.marginBottom ??= styleValue; - } - // marginInline - else if (styleProp === 'marginInline') { - nextStyle.marginHorizontal = styleValue; - } else if (styleProp === 'marginInlineStart') { - nextStyle.marginStart = styleValue; - } else if (styleProp === 'marginInlineEnd') { - nextStyle.marginEnd = styleValue; - } - // paddingBlock - else if (styleProp === 'paddingBlock') { - nextStyle.paddingVertical = styleValue; - } else if (styleProp === 'paddingBlockStart') { - nextStyle.paddingTop ??= styleValue; - } else if (styleProp === 'paddingBlockEnd') { - nextStyle.paddingBottom ??= styleValue; - } - // paddingInline - else if (styleProp === 'paddingInline') { - nextStyle.paddingHorizontal = styleValue; - } else if (styleProp === 'paddingInlineStart') { - nextStyle.paddingStart = styleValue; - } else if (styleProp === 'paddingInlineEnd') { - nextStyle.paddingEnd = styleValue; - } // '::placeholder' polyfill else if (styleProp === 'placeholderTextColor') { nativeProps.placeholderTextColor = styleValue; @@ -477,12 +422,6 @@ export function props( } } - // boxSizing:"content-box" polyfill - const boxSizingValue = nextStyle.boxSizing; - if (boxSizingValue === 'content-box' && !version.experimental) { - nextStyle = fixContentBox(nextStyle); - } - // Print an error message if flex properties are used without // "display:flex" being set. React Native is always using "flex" // layout but web uses "flow" layout by default, which can lead diff --git a/packages/react-strict-dom/tests/__snapshots__/compat-test.native.js.snap-native b/packages/react-strict-dom/tests/__snapshots__/compat-test.native.js.snap-native index 49a90201..08f72854 100644 --- a/packages/react-strict-dom/tests/__snapshots__/compat-test.native.js.snap-native +++ b/packages/react-strict-dom/tests/__snapshots__/compat-test.native.js.snap-native @@ -68,7 +68,7 @@ exports[` "as" equals "view": as=view 1`] = ` style={ { "boxSizing": "content-box", - "paddingHorizontal": 32, + "paddingInline": 32, "position": "static", } } @@ -82,7 +82,7 @@ exports[` default: default 1`] = ` style={ { "boxSizing": "content-box", - "paddingHorizontal": 32, + "paddingInline": 32, "position": "static", } } diff --git a/packages/react-strict-dom/tests/__snapshots__/css-test.native.js.snap-native b/packages/react-strict-dom/tests/__snapshots__/css-test.native.js.snap-native index 1e18e109..a97b6fc0 100644 --- a/packages/react-strict-dom/tests/__snapshots__/css-test.native.js.snap-native +++ b/packages/react-strict-dom/tests/__snapshots__/css-test.native.js.snap-native @@ -161,6 +161,14 @@ exports[`properties: general caretColor: unsupported caret color 1`] = ` } `; +exports[`properties: general direction: inherit 1`] = ` +{ + "style": { + "direction": "inherit", + }, +} +`; + exports[`properties: general direction: ltr 1`] = ` { "style": { @@ -1022,10 +1030,7 @@ exports[`properties: logical direction inlineSize: minInlineSize after minWidth exports[`properties: logical direction inset: inset 1`] = ` { "style": { - "bottom": 1, - "end": 1, - "start": 1, - "top": 1, + "inset": 1, }, } `; @@ -1034,6 +1039,7 @@ exports[`properties: logical direction inset: inset vs top 1`] = ` { "style": { "bottom": 100, + "insetBlockStart": 3, "left": 10, "right": 10, "top": 100, @@ -1044,8 +1050,7 @@ exports[`properties: logical direction inset: inset vs top 1`] = ` exports[`properties: logical direction inset: insetBlock 1`] = ` { "style": { - "bottom": 2, - "top": 2, + "insetBlock": 2, }, } `; @@ -1054,6 +1059,7 @@ exports[`properties: logical direction inset: insetBlock vs top 1`] = ` { "style": { "bottom": 100, + "insetBlockStart": 3, "top": 100, }, } @@ -1062,7 +1068,7 @@ exports[`properties: logical direction inset: insetBlock vs top 1`] = ` exports[`properties: logical direction inset: insetBlockEnd 1`] = ` { "style": { - "bottom": 4, + "insetBlockEnd": 4, }, } `; @@ -1071,6 +1077,7 @@ exports[`properties: logical direction inset: insetBlockEnd vs bottom 1`] = ` { "style": { "bottom": 100, + "insetBlockEnd": 4, }, } `; @@ -1078,7 +1085,7 @@ exports[`properties: logical direction inset: insetBlockEnd vs bottom 1`] = ` exports[`properties: logical direction inset: insetBlockStart 1`] = ` { "style": { - "top": 3, + "insetBlockStart": 3, }, } `; @@ -1086,6 +1093,7 @@ exports[`properties: logical direction inset: insetBlockStart 1`] = ` exports[`properties: logical direction inset: insetBlockStart vs top 1`] = ` { "style": { + "insetBlockStart": 3, "top": 100, }, } @@ -1094,8 +1102,7 @@ exports[`properties: logical direction inset: insetBlockStart vs top 1`] = ` exports[`properties: logical direction inset: insetInline 1`] = ` { "style": { - "end": 5, - "start": 5, + "insetInline": 5, }, } `; @@ -1103,7 +1110,7 @@ exports[`properties: logical direction inset: insetInline 1`] = ` exports[`properties: logical direction inset: insetInlineEnd 1`] = ` { "style": { - "end": 7, + "insetInlineEnd": 7, }, } `; @@ -1111,7 +1118,7 @@ exports[`properties: logical direction inset: insetInlineEnd 1`] = ` exports[`properties: logical direction inset: insetInlineStart 1`] = ` { "style": { - "start": 6, + "insetInlineStart": 6, }, } `; @@ -1119,7 +1126,7 @@ exports[`properties: logical direction inset: insetInlineStart 1`] = ` exports[`properties: logical direction margin: marginBlock 1`] = ` { "style": { - "marginVertical": 1, + "marginBlock": 1, }, } `; @@ -1127,7 +1134,7 @@ exports[`properties: logical direction margin: marginBlock 1`] = ` exports[`properties: logical direction margin: marginBlockEnd 1`] = ` { "style": { - "marginBottom": 3, + "marginBlockEnd": 3, }, } `; @@ -1135,7 +1142,7 @@ exports[`properties: logical direction margin: marginBlockEnd 1`] = ` exports[`properties: logical direction margin: marginBlockStart 1`] = ` { "style": { - "marginTop": 2, + "marginBlockStart": 2, }, } `; @@ -1143,7 +1150,7 @@ exports[`properties: logical direction margin: marginBlockStart 1`] = ` exports[`properties: logical direction margin: marginInline 1`] = ` { "style": { - "marginHorizontal": 1, + "marginInline": 1, }, } `; @@ -1151,7 +1158,7 @@ exports[`properties: logical direction margin: marginInline 1`] = ` exports[`properties: logical direction margin: marginInlineEnd 1`] = ` { "style": { - "marginEnd": 3, + "marginInlineEnd": 3, }, } `; @@ -1159,7 +1166,7 @@ exports[`properties: logical direction margin: marginInlineEnd 1`] = ` exports[`properties: logical direction margin: marginInlineStart 1`] = ` { "style": { - "marginStart": 2, + "marginInlineStart": 2, }, } `; @@ -1167,7 +1174,7 @@ exports[`properties: logical direction margin: marginInlineStart 1`] = ` exports[`properties: logical direction padding: paddingBlock 1`] = ` { "style": { - "paddingVertical": 1, + "paddingBlock": 1, }, } `; @@ -1175,7 +1182,7 @@ exports[`properties: logical direction padding: paddingBlock 1`] = ` exports[`properties: logical direction padding: paddingBlockEnd 1`] = ` { "style": { - "paddingBottom": 3, + "paddingBlockEnd": 3, }, } `; @@ -1183,7 +1190,7 @@ exports[`properties: logical direction padding: paddingBlockEnd 1`] = ` exports[`properties: logical direction padding: paddingBlockStart 1`] = ` { "style": { - "paddingTop": 2, + "paddingBlockStart": 2, }, } `; @@ -1191,7 +1198,7 @@ exports[`properties: logical direction padding: paddingBlockStart 1`] = ` exports[`properties: logical direction padding: paddingInline 1`] = ` { "style": { - "paddingHorizontal": 1, + "paddingInline": 1, }, } `; @@ -1199,7 +1206,7 @@ exports[`properties: logical direction padding: paddingInline 1`] = ` exports[`properties: logical direction padding: paddingInlineEnd 1`] = ` { "style": { - "paddingEnd": 3, + "paddingInlineEnd": 3, }, } `; @@ -1207,7 +1214,7 @@ exports[`properties: logical direction padding: paddingInlineEnd 1`] = ` exports[`properties: logical direction padding: paddingInlineStart 1`] = ` { "style": { - "paddingStart": 2, + "paddingInlineStart": 2, }, } `; diff --git a/packages/react-strict-dom/tests/css-test.native.js b/packages/react-strict-dom/tests/css-test.native.js index e1b52a48..507891cc 100644 --- a/packages/react-strict-dom/tests/css-test.native.js +++ b/packages/react-strict-dom/tests/css-test.native.js @@ -241,6 +241,9 @@ describe('properties: general', () => { test('direction', () => { const styles = css.create({ + inherit: { + direction: 'inherit' + }, ltr: { direction: 'ltr' }, @@ -248,6 +251,9 @@ describe('properties: general', () => { direction: 'rtl' } }); + expect(css.props.call(mockOptions, styles.inherit)).toMatchSnapshot( + 'inherit' + ); expect(css.props.call(mockOptions, styles.ltr)).toMatchSnapshot('ltr'); expect(css.props.call(mockOptions, styles.rtl)).toMatchSnapshot('rtl'); });