diff --git a/client/web/divkit/src/components/container/Container.module.css b/client/web/divkit/src/components/container/Container.module.css index a464321ba..627c8e0dc 100644 --- a/client/web/divkit/src/components/container/Container.module.css +++ b/client/web/divkit/src/components/container/Container.module.css @@ -23,6 +23,18 @@ justify-content: flex-end; } +.container_orientation_vertical.container_valign_space-between { + justify-content: space-between; +} + +.container_orientation_vertical.container_valign_space-around { + justify-content: space-around; +} + +.container_orientation_vertical.container_valign_space-evenly { + justify-content: space-evenly; +} + /*.container_orientation_horizontal { }*/ @@ -38,6 +50,18 @@ justify-content: flex-end; } +.container_orientation_horizontal.container_halign_space-between { + justify-content: space-between; +} + +.container_orientation_horizontal.container_halign_space-around { + justify-content: space-around; +} + +.container_orientation_horizontal.container_halign_space-evenly { + justify-content: space-evenly; +} + .container_orientation_overlap { display: grid; grid-template-rows: 100%; diff --git a/client/web/divkit/src/components/container/Container.svelte b/client/web/divkit/src/components/container/Container.svelte index 1b2eb9a3a..4dff779b9 100644 --- a/client/web/divkit/src/components/container/Container.svelte +++ b/client/web/divkit/src/components/container/Container.svelte @@ -7,14 +7,16 @@ import type { LayoutParams } from '../../types/layoutParams'; import type { DivBase, TemplateContext } from '../../../typings/common'; import type { DivBaseData } from '../../types/base'; - import type { AlignmentHorizontal, AlignmentVertical } from '../../types/alignment'; - import { SeparatorStyle, prepareMargins } from '../../utils/container'; + import type { + ContentAlignmentHorizontal, + ContentAlignmentVertical + } from '../../types/alignment'; + import type { SeparatorStyle } from '../../utils/container'; + import { prepareMargins } from '../../utils/container'; import { ROOT_CTX, RootCtxValue } from '../../context/root'; import { wrapError } from '../../utils/wrapError'; import { genClassName } from '../../utils/genClassName'; import { correctContainerOrientation } from '../../utils/correctContainerOrientation'; - import { correctAlignmentVertical } from '../../utils/correctAlignmentVertical'; - import { correctAlignmentHorizontal } from '../../utils/correctAlignmentHorizontal'; import { assignIfDifferent } from '../../utils/assignIfDifferent'; import { correctDrawableStyle, DrawableStyle } from '../../utils/correctDrawableStyles'; import { calcAdditionalPaddings, calcItemsGap } from '../../utils/container'; @@ -23,6 +25,8 @@ import ContainerSeparators from './ContainerSeparators.svelte'; import Unknown from '../utilities/Unknown.svelte'; import Outer from '../utilities/Outer.svelte'; + import { correctContentAlignmentVertical } from '../../utils/correctContentAlignmentVertical'; + import { correctContentAlignmentHorizontal } from '../../utils/correctContentAlignmentHorizontal'; export let json: Partial = {}; export let templateContext: TemplateContext; @@ -32,14 +36,22 @@ const HALIGN_MAP = { left: 'start', center: 'center', - right: 'end' + right: 'end', + // 'space-*' values doesn't supported for cross-axis in wrap-container + 'space-between': 'start', + 'space-around': 'start', + 'space-evenly': 'start' } as const; const VALIGN_MAP = { top: 'start', center: 'center', bottom: 'end', - baseline: 'baseline' + baseline: 'baseline', + // 'space-*' doesn't supported for cross-axis in wrap-container + 'space-between': 'start', + 'space-around': 'start', + 'space-evenly': 'start' } as const; const AVAIL_SEPARATOR_SHAPES = ['rounded_rectangle', 'circle']; @@ -79,16 +91,16 @@ orientation = correctContainerOrientation($jsonOrientation, orientation); } - let contentVAlign: AlignmentVertical = 'top'; + let contentVAlign: ContentAlignmentVertical = 'top'; $: jsonContentVAlign = rootCtx.getDerivedFromVars(json.content_alignment_vertical); $: { - contentVAlign = correctAlignmentVertical($jsonContentVAlign, contentVAlign); + contentVAlign = correctContentAlignmentVertical($jsonContentVAlign, contentVAlign); } - let contentHAlign: AlignmentHorizontal = 'left'; + let contentHAlign: ContentAlignmentHorizontal = 'left'; $: jsonContentHAlign = rootCtx.getDerivedFromVars(json.content_alignment_horizontal); $: { - contentHAlign = correctAlignmentHorizontal($jsonContentHAlign, contentHAlign); + contentHAlign = correctContentAlignmentHorizontal($jsonContentHAlign, contentHAlign); } $: jsonLayoutMode = rootCtx.getDerivedFromVars(json.layout_mode); diff --git a/client/web/divkit/src/types/alignment.d.ts b/client/web/divkit/src/types/alignment.d.ts index 5f8d052c2..4c8907d59 100644 --- a/client/web/divkit/src/types/alignment.d.ts +++ b/client/web/divkit/src/types/alignment.d.ts @@ -1,3 +1,7 @@ export type AlignmentHorizontal = 'left' | 'center' | 'right'; export type AlignmentVertical = 'top' | 'center' | 'bottom' | 'baseline'; + +export type ContentAlignmentHorizontal = 'left' | 'center' | 'right' | 'space-between' | 'space-around' | 'space-evenly'; + +export type ContentAlignmentVertical = 'top' | 'center' | 'bottom' | 'baseline' | 'space-between' | 'space-around' | 'space-evenly'; diff --git a/client/web/divkit/src/types/container.d.ts b/client/web/divkit/src/types/container.d.ts index 92fefb6c4..152d4e881 100644 --- a/client/web/divkit/src/types/container.d.ts +++ b/client/web/divkit/src/types/container.d.ts @@ -1,6 +1,9 @@ import type { DivBaseData } from './base'; import type { DivActionableData } from './actionable'; -import type { AlignmentHorizontal, AlignmentVertical } from './alignment'; +import type { + ContentAlignmentHorizontal, + ContentAlignmentVertical +} from './alignment'; import type { BooleanInt } from '../../typings/common'; import type { Drawable } from './drawable'; import type { DivAspect } from './image'; @@ -20,8 +23,8 @@ export interface ContainerSeparator { export interface DivContainerData extends DivBaseData, DivActionableData { type: 'container'; - content_alignment_horizontal?: AlignmentHorizontal; - content_alignment_vertical?: AlignmentVertical; + content_alignment_horizontal?: ContentAlignmentHorizontal; + content_alignment_vertical?: ContentAlignmentVertical; orientation?: ContainerOrientation; items: DivBaseData[]; // auto_animations_enabled diff --git a/client/web/divkit/src/utils/correctContentAlignmentHorizontal.ts b/client/web/divkit/src/utils/correctContentAlignmentHorizontal.ts new file mode 100644 index 000000000..c116d213f --- /dev/null +++ b/client/web/divkit/src/utils/correctContentAlignmentHorizontal.ts @@ -0,0 +1,19 @@ +import type { ContentAlignmentHorizontal } from '../types/alignment'; + +export function correctContentAlignmentHorizontal( + orientation: string | undefined, + defaultVal: ContentAlignmentHorizontal +): ContentAlignmentHorizontal { + if ( + orientation === 'left' || + orientation === 'center' || + orientation === 'right' || + orientation === 'space-between' || + orientation === 'space-around' || + orientation === 'space-evenly' + ) { + return orientation; + } + + return defaultVal; +} diff --git a/client/web/divkit/src/utils/correctContentAlignmentVertical.ts b/client/web/divkit/src/utils/correctContentAlignmentVertical.ts new file mode 100644 index 000000000..68741fd35 --- /dev/null +++ b/client/web/divkit/src/utils/correctContentAlignmentVertical.ts @@ -0,0 +1,20 @@ +import type { ContentAlignmentVertical } from '../types/alignment'; + +export function correctContentAlignmentVertical( + orientation: string | undefined, + defaultVal: ContentAlignmentVertical +): ContentAlignmentVertical { + if ( + orientation === 'top' || + orientation === 'center' || + orientation === 'bottom' || + orientation === 'baseline' || + orientation === 'space-between' || + orientation === 'space-around' || + orientation === 'space-evenly' + ) { + return orientation; + } + + return defaultVal; +} diff --git a/client/web/divkit/tests/hermione/screens/crossplatform/components/div-container/horizontal-orientation-space-around-alignment/chromeMobile/horizontal-orientation-space-around-alignment.png b/client/web/divkit/tests/hermione/screens/crossplatform/components/div-container/horizontal-orientation-space-around-alignment/chromeMobile/horizontal-orientation-space-around-alignment.png new file mode 100644 index 000000000..f1c2b0187 Binary files /dev/null and b/client/web/divkit/tests/hermione/screens/crossplatform/components/div-container/horizontal-orientation-space-around-alignment/chromeMobile/horizontal-orientation-space-around-alignment.png differ diff --git a/client/web/divkit/tests/hermione/screens/crossplatform/components/div-container/horizontal-orientation-space-around-alignment/firefoxMobile/horizontal-orientation-space-around-alignment.png b/client/web/divkit/tests/hermione/screens/crossplatform/components/div-container/horizontal-orientation-space-around-alignment/firefoxMobile/horizontal-orientation-space-around-alignment.png new file mode 100644 index 000000000..f835ff174 Binary files /dev/null and b/client/web/divkit/tests/hermione/screens/crossplatform/components/div-container/horizontal-orientation-space-around-alignment/firefoxMobile/horizontal-orientation-space-around-alignment.png differ diff --git a/client/web/divkit/tests/hermione/screens/crossplatform/components/div-container/horizontal-orientation-space-between-alignment/chromeMobile/horizontal-orientation-space-between-alignment.png b/client/web/divkit/tests/hermione/screens/crossplatform/components/div-container/horizontal-orientation-space-between-alignment/chromeMobile/horizontal-orientation-space-between-alignment.png new file mode 100644 index 000000000..bf49d5de5 Binary files /dev/null and b/client/web/divkit/tests/hermione/screens/crossplatform/components/div-container/horizontal-orientation-space-between-alignment/chromeMobile/horizontal-orientation-space-between-alignment.png differ diff --git a/client/web/divkit/tests/hermione/screens/crossplatform/components/div-container/horizontal-orientation-space-between-alignment/firefoxMobile/horizontal-orientation-space-between-alignment.png b/client/web/divkit/tests/hermione/screens/crossplatform/components/div-container/horizontal-orientation-space-between-alignment/firefoxMobile/horizontal-orientation-space-between-alignment.png new file mode 100644 index 000000000..8b4347a80 Binary files /dev/null and b/client/web/divkit/tests/hermione/screens/crossplatform/components/div-container/horizontal-orientation-space-between-alignment/firefoxMobile/horizontal-orientation-space-between-alignment.png differ diff --git a/client/web/divkit/tests/hermione/screens/crossplatform/components/div-container/horizontal-orientation-space-evenly-alignment/chromeMobile/horizontal-orientation-space-evenly-alignment.png b/client/web/divkit/tests/hermione/screens/crossplatform/components/div-container/horizontal-orientation-space-evenly-alignment/chromeMobile/horizontal-orientation-space-evenly-alignment.png new file mode 100644 index 000000000..bc874f624 Binary files /dev/null and b/client/web/divkit/tests/hermione/screens/crossplatform/components/div-container/horizontal-orientation-space-evenly-alignment/chromeMobile/horizontal-orientation-space-evenly-alignment.png differ diff --git a/client/web/divkit/tests/hermione/screens/crossplatform/components/div-container/horizontal-orientation-space-evenly-alignment/firefoxMobile/horizontal-orientation-space-evenly-alignment.png b/client/web/divkit/tests/hermione/screens/crossplatform/components/div-container/horizontal-orientation-space-evenly-alignment/firefoxMobile/horizontal-orientation-space-evenly-alignment.png new file mode 100644 index 000000000..558606fea Binary files /dev/null and b/client/web/divkit/tests/hermione/screens/crossplatform/components/div-container/horizontal-orientation-space-evenly-alignment/firefoxMobile/horizontal-orientation-space-evenly-alignment.png differ diff --git a/client/web/divkit/tests/hermione/screens/crossplatform/components/div-container/vertical-orientation-space-around-alignment/chromeMobile/vertical-orientation-space-around-alignment.png b/client/web/divkit/tests/hermione/screens/crossplatform/components/div-container/vertical-orientation-space-around-alignment/chromeMobile/vertical-orientation-space-around-alignment.png new file mode 100644 index 000000000..07c618035 Binary files /dev/null and b/client/web/divkit/tests/hermione/screens/crossplatform/components/div-container/vertical-orientation-space-around-alignment/chromeMobile/vertical-orientation-space-around-alignment.png differ diff --git a/client/web/divkit/tests/hermione/screens/crossplatform/components/div-container/vertical-orientation-space-around-alignment/firefoxMobile/vertical-orientation-space-around-alignment.png b/client/web/divkit/tests/hermione/screens/crossplatform/components/div-container/vertical-orientation-space-around-alignment/firefoxMobile/vertical-orientation-space-around-alignment.png new file mode 100644 index 000000000..69e0de547 Binary files /dev/null and b/client/web/divkit/tests/hermione/screens/crossplatform/components/div-container/vertical-orientation-space-around-alignment/firefoxMobile/vertical-orientation-space-around-alignment.png differ diff --git a/client/web/divkit/tests/hermione/screens/crossplatform/components/div-container/vertical-orientation-space-between-alignment/chromeMobile/vertical-orientation-space-between-alignment.png b/client/web/divkit/tests/hermione/screens/crossplatform/components/div-container/vertical-orientation-space-between-alignment/chromeMobile/vertical-orientation-space-between-alignment.png new file mode 100644 index 000000000..820f9d525 Binary files /dev/null and b/client/web/divkit/tests/hermione/screens/crossplatform/components/div-container/vertical-orientation-space-between-alignment/chromeMobile/vertical-orientation-space-between-alignment.png differ diff --git a/client/web/divkit/tests/hermione/screens/crossplatform/components/div-container/vertical-orientation-space-between-alignment/firefoxMobile/vertical-orientation-space-between-alignment.png b/client/web/divkit/tests/hermione/screens/crossplatform/components/div-container/vertical-orientation-space-between-alignment/firefoxMobile/vertical-orientation-space-between-alignment.png new file mode 100644 index 000000000..66d6928af Binary files /dev/null and b/client/web/divkit/tests/hermione/screens/crossplatform/components/div-container/vertical-orientation-space-between-alignment/firefoxMobile/vertical-orientation-space-between-alignment.png differ diff --git a/client/web/divkit/tests/hermione/screens/crossplatform/components/div-container/vertical-orientation-space-evenly-alignment/chromeMobile/vertical-orientation-space-evenly-alignment.png b/client/web/divkit/tests/hermione/screens/crossplatform/components/div-container/vertical-orientation-space-evenly-alignment/chromeMobile/vertical-orientation-space-evenly-alignment.png new file mode 100644 index 000000000..ad73f2257 Binary files /dev/null and b/client/web/divkit/tests/hermione/screens/crossplatform/components/div-container/vertical-orientation-space-evenly-alignment/chromeMobile/vertical-orientation-space-evenly-alignment.png differ diff --git a/client/web/divkit/tests/hermione/screens/crossplatform/components/div-container/vertical-orientation-space-evenly-alignment/firefoxMobile/vertical-orientation-space-evenly-alignment.png b/client/web/divkit/tests/hermione/screens/crossplatform/components/div-container/vertical-orientation-space-evenly-alignment/firefoxMobile/vertical-orientation-space-evenly-alignment.png new file mode 100644 index 000000000..0a6250e11 Binary files /dev/null and b/client/web/divkit/tests/hermione/screens/crossplatform/components/div-container/vertical-orientation-space-evenly-alignment/firefoxMobile/vertical-orientation-space-evenly-alignment.png differ diff --git a/client/web/divkit/tests/hermione/screens/crossplatform/components/div-container/wrap/horizontal-orientation-space-around-alignment/chromeMobile/horizontal-orientation-space-around-alignment.png b/client/web/divkit/tests/hermione/screens/crossplatform/components/div-container/wrap/horizontal-orientation-space-around-alignment/chromeMobile/horizontal-orientation-space-around-alignment.png new file mode 100644 index 000000000..6794a3a90 Binary files /dev/null and b/client/web/divkit/tests/hermione/screens/crossplatform/components/div-container/wrap/horizontal-orientation-space-around-alignment/chromeMobile/horizontal-orientation-space-around-alignment.png differ diff --git a/client/web/divkit/tests/hermione/screens/crossplatform/components/div-container/wrap/horizontal-orientation-space-around-alignment/firefoxMobile/horizontal-orientation-space-around-alignment.png b/client/web/divkit/tests/hermione/screens/crossplatform/components/div-container/wrap/horizontal-orientation-space-around-alignment/firefoxMobile/horizontal-orientation-space-around-alignment.png new file mode 100644 index 000000000..bbbb2f091 Binary files /dev/null and b/client/web/divkit/tests/hermione/screens/crossplatform/components/div-container/wrap/horizontal-orientation-space-around-alignment/firefoxMobile/horizontal-orientation-space-around-alignment.png differ diff --git a/client/web/divkit/tests/hermione/screens/crossplatform/components/div-container/wrap/horizontal-orientation-space-between-alignment/chromeMobile/horizontal-orientation-space-between-alignment.png b/client/web/divkit/tests/hermione/screens/crossplatform/components/div-container/wrap/horizontal-orientation-space-between-alignment/chromeMobile/horizontal-orientation-space-between-alignment.png new file mode 100644 index 000000000..e89a566f6 Binary files /dev/null and b/client/web/divkit/tests/hermione/screens/crossplatform/components/div-container/wrap/horizontal-orientation-space-between-alignment/chromeMobile/horizontal-orientation-space-between-alignment.png differ diff --git a/client/web/divkit/tests/hermione/screens/crossplatform/components/div-container/wrap/horizontal-orientation-space-between-alignment/firefoxMobile/horizontal-orientation-space-between-alignment.png b/client/web/divkit/tests/hermione/screens/crossplatform/components/div-container/wrap/horizontal-orientation-space-between-alignment/firefoxMobile/horizontal-orientation-space-between-alignment.png new file mode 100644 index 000000000..f9bfb0c54 Binary files /dev/null and b/client/web/divkit/tests/hermione/screens/crossplatform/components/div-container/wrap/horizontal-orientation-space-between-alignment/firefoxMobile/horizontal-orientation-space-between-alignment.png differ diff --git a/client/web/divkit/tests/hermione/screens/crossplatform/components/div-container/wrap/horizontal-orientation-space-evenly-alignment/chromeMobile/horizontal-orientation-space-evenly-alignment.png b/client/web/divkit/tests/hermione/screens/crossplatform/components/div-container/wrap/horizontal-orientation-space-evenly-alignment/chromeMobile/horizontal-orientation-space-evenly-alignment.png new file mode 100644 index 000000000..961551aef Binary files /dev/null and b/client/web/divkit/tests/hermione/screens/crossplatform/components/div-container/wrap/horizontal-orientation-space-evenly-alignment/chromeMobile/horizontal-orientation-space-evenly-alignment.png differ diff --git a/client/web/divkit/tests/hermione/screens/crossplatform/components/div-container/wrap/horizontal-orientation-space-evenly-alignment/firefoxMobile/horizontal-orientation-space-evenly-alignment.png b/client/web/divkit/tests/hermione/screens/crossplatform/components/div-container/wrap/horizontal-orientation-space-evenly-alignment/firefoxMobile/horizontal-orientation-space-evenly-alignment.png new file mode 100644 index 000000000..ba918d6a2 Binary files /dev/null and b/client/web/divkit/tests/hermione/screens/crossplatform/components/div-container/wrap/horizontal-orientation-space-evenly-alignment/firefoxMobile/horizontal-orientation-space-evenly-alignment.png differ diff --git a/client/web/divkit/tests/hermione/screens/crossplatform/components/div-container/wrap/vertical-orientation-space-around-alignment/chromeMobile/vertical-orientation-space-around-alignment.png b/client/web/divkit/tests/hermione/screens/crossplatform/components/div-container/wrap/vertical-orientation-space-around-alignment/chromeMobile/vertical-orientation-space-around-alignment.png new file mode 100644 index 000000000..b5ac274d3 Binary files /dev/null and b/client/web/divkit/tests/hermione/screens/crossplatform/components/div-container/wrap/vertical-orientation-space-around-alignment/chromeMobile/vertical-orientation-space-around-alignment.png differ diff --git a/client/web/divkit/tests/hermione/screens/crossplatform/components/div-container/wrap/vertical-orientation-space-around-alignment/firefoxMobile/vertical-orientation-space-around-alignment.png b/client/web/divkit/tests/hermione/screens/crossplatform/components/div-container/wrap/vertical-orientation-space-around-alignment/firefoxMobile/vertical-orientation-space-around-alignment.png new file mode 100644 index 000000000..8dd4cf6bb Binary files /dev/null and b/client/web/divkit/tests/hermione/screens/crossplatform/components/div-container/wrap/vertical-orientation-space-around-alignment/firefoxMobile/vertical-orientation-space-around-alignment.png differ diff --git a/client/web/divkit/tests/hermione/screens/crossplatform/components/div-container/wrap/vertical-orientation-space-between-alignment/chromeMobile/vertical-orientation-space-between-alignment.png b/client/web/divkit/tests/hermione/screens/crossplatform/components/div-container/wrap/vertical-orientation-space-between-alignment/chromeMobile/vertical-orientation-space-between-alignment.png new file mode 100644 index 000000000..2fb63f02f Binary files /dev/null and b/client/web/divkit/tests/hermione/screens/crossplatform/components/div-container/wrap/vertical-orientation-space-between-alignment/chromeMobile/vertical-orientation-space-between-alignment.png differ diff --git a/client/web/divkit/tests/hermione/screens/crossplatform/components/div-container/wrap/vertical-orientation-space-between-alignment/firefoxMobile/vertical-orientation-space-between-alignment.png b/client/web/divkit/tests/hermione/screens/crossplatform/components/div-container/wrap/vertical-orientation-space-between-alignment/firefoxMobile/vertical-orientation-space-between-alignment.png new file mode 100644 index 000000000..88c119bb7 Binary files /dev/null and b/client/web/divkit/tests/hermione/screens/crossplatform/components/div-container/wrap/vertical-orientation-space-between-alignment/firefoxMobile/vertical-orientation-space-between-alignment.png differ diff --git a/client/web/divkit/tests/hermione/screens/crossplatform/components/div-container/wrap/vertical-orientation-space-evenly-alignment/chromeMobile/vertical-orientation-space-evenly-alignment.png b/client/web/divkit/tests/hermione/screens/crossplatform/components/div-container/wrap/vertical-orientation-space-evenly-alignment/chromeMobile/vertical-orientation-space-evenly-alignment.png new file mode 100644 index 000000000..08f06b220 Binary files /dev/null and b/client/web/divkit/tests/hermione/screens/crossplatform/components/div-container/wrap/vertical-orientation-space-evenly-alignment/chromeMobile/vertical-orientation-space-evenly-alignment.png differ diff --git a/client/web/divkit/tests/hermione/screens/crossplatform/components/div-container/wrap/vertical-orientation-space-evenly-alignment/firefoxMobile/vertical-orientation-space-evenly-alignment.png b/client/web/divkit/tests/hermione/screens/crossplatform/components/div-container/wrap/vertical-orientation-space-evenly-alignment/firefoxMobile/vertical-orientation-space-evenly-alignment.png new file mode 100644 index 000000000..106788aa2 Binary files /dev/null and b/client/web/divkit/tests/hermione/screens/crossplatform/components/div-container/wrap/vertical-orientation-space-evenly-alignment/firefoxMobile/vertical-orientation-space-evenly-alignment.png differ diff --git a/client/web/divkit/tests/utils/correctContentAlignmentHorizontal.test.ts b/client/web/divkit/tests/utils/correctContentAlignmentHorizontal.test.ts new file mode 100644 index 000000000..10cb0bcb8 --- /dev/null +++ b/client/web/divkit/tests/utils/correctContentAlignmentHorizontal.test.ts @@ -0,0 +1,14 @@ +import { correctContentAlignmentHorizontal } from '../../src/utils/correctContentAlignmentHorizontal'; + +describe('correctContentAlignmentHorizontal', () => { + test('simple', () => { + expect(correctContentAlignmentHorizontal(undefined, 'left')).toBe('left'); + expect(correctContentAlignmentHorizontal('left', 'center')).toBe('left'); + expect(correctContentAlignmentHorizontal('center', 'left')).toBe('center'); + expect(correctContentAlignmentHorizontal('right', 'left')).toBe('right'); + expect(correctContentAlignmentHorizontal('space-between', 'left')).toBe('space-between'); + expect(correctContentAlignmentHorizontal('space-around', 'left')).toBe('space-around'); + expect(correctContentAlignmentHorizontal('space-evenly', 'left')).toBe('space-evenly'); + expect(correctContentAlignmentHorizontal('smth', 'left')).toBe('left'); + }); +}); diff --git a/client/web/divkit/tests/utils/correctContentAlignmentVertical.test.ts b/client/web/divkit/tests/utils/correctContentAlignmentVertical.test.ts new file mode 100644 index 000000000..59de9e0ae --- /dev/null +++ b/client/web/divkit/tests/utils/correctContentAlignmentVertical.test.ts @@ -0,0 +1,15 @@ +import { correctContentAlignmentVertical } from '../../src/utils/correctContentAlignmentVertical'; + +describe('correctContentAlignmentVertical', () => { + test('simple', () => { + expect(correctContentAlignmentVertical(undefined, 'top')).toBe('top'); + expect(correctContentAlignmentVertical('top', 'center')).toBe('top'); + expect(correctContentAlignmentVertical('center', 'top')).toBe('center'); + expect(correctContentAlignmentVertical('bottom', 'top')).toBe('bottom'); + expect(correctContentAlignmentVertical('baseline', 'top')).toBe('baseline'); + expect(correctContentAlignmentVertical('space-between', 'top')).toBe('space-between'); + expect(correctContentAlignmentVertical('space-around', 'top')).toBe('space-around'); + expect(correctContentAlignmentVertical('space-evenly', 'top')).toBe('space-evenly'); + expect(correctContentAlignmentVertical('smth', 'top')).toBe('top'); + }); +}); diff --git a/test_data/snapshot_test_data/div-container/horizontal-orientation-space-around-alignment.json b/test_data/snapshot_test_data/div-container/horizontal-orientation-space-around-alignment.json new file mode 100644 index 000000000..e0712e73e --- /dev/null +++ b/test_data/snapshot_test_data/div-container/horizontal-orientation-space-around-alignment.json @@ -0,0 +1,52 @@ +{ + "description": "Horizontal container with content_alignment_horizontal = space-around", + "platforms": [ + "web" + ], + "card": { + "log_id": "snapshot_test_card", + "states": [ + { + "state_id": 0, + "div": { + "type": "container", + "orientation": "horizontal", + "content_alignment_horizontal": "space-around", + "border": { + "stroke": { + "color": "#BBFF0000", + "width": 2 + } + }, + "items": [ + { + "type": "image", + "image_url": "https://alicekit.s3.yandex.net/images_for_divs/chess.png", + "width": { + "type": "fixed", + "value": 100 + }, + "height": { + "type": "fixed", + "value": 100 + } + }, + { + "type": "image", + "image_url": "https://alicekit.s3.yandex.net/images_for_divs/chess.png", + "width": { + "type": "fixed", + "value": 50 + }, + "height": { + "type": "fixed", + "value": 50 + } + } + ] + } + } + ] + }, + "templates": {} +} diff --git a/test_data/snapshot_test_data/div-container/horizontal-orientation-space-between-alignment.json b/test_data/snapshot_test_data/div-container/horizontal-orientation-space-between-alignment.json new file mode 100644 index 000000000..b913f55e8 --- /dev/null +++ b/test_data/snapshot_test_data/div-container/horizontal-orientation-space-between-alignment.json @@ -0,0 +1,52 @@ +{ + "description": "Horizontal container with content_alignment_horizontal = space-between", + "platforms": [ + "web" + ], + "card": { + "log_id": "snapshot_test_card", + "states": [ + { + "state_id": 0, + "div": { + "type": "container", + "orientation": "horizontal", + "content_alignment_horizontal": "space-between", + "border": { + "stroke": { + "color": "#BBFF0000", + "width": 2 + } + }, + "items": [ + { + "type": "image", + "image_url": "https://alicekit.s3.yandex.net/images_for_divs/chess.png", + "width": { + "type": "fixed", + "value": 100 + }, + "height": { + "type": "fixed", + "value": 100 + } + }, + { + "type": "image", + "image_url": "https://alicekit.s3.yandex.net/images_for_divs/chess.png", + "width": { + "type": "fixed", + "value": 50 + }, + "height": { + "type": "fixed", + "value": 50 + } + } + ] + } + } + ] + }, + "templates": {} +} diff --git a/test_data/snapshot_test_data/div-container/horizontal-orientation-space-evenly-alignment.json b/test_data/snapshot_test_data/div-container/horizontal-orientation-space-evenly-alignment.json new file mode 100644 index 000000000..2d9bd0bf4 --- /dev/null +++ b/test_data/snapshot_test_data/div-container/horizontal-orientation-space-evenly-alignment.json @@ -0,0 +1,52 @@ +{ + "description": "Horizontal container with content_alignment_horizontal = space-evenly", + "platforms": [ + "web" + ], + "card": { + "log_id": "snapshot_test_card", + "states": [ + { + "state_id": 0, + "div": { + "type": "container", + "orientation": "horizontal", + "content_alignment_horizontal": "space-evenly", + "border": { + "stroke": { + "color": "#BBFF0000", + "width": 2 + } + }, + "items": [ + { + "type": "image", + "image_url": "https://alicekit.s3.yandex.net/images_for_divs/chess.png", + "width": { + "type": "fixed", + "value": 100 + }, + "height": { + "type": "fixed", + "value": 100 + } + }, + { + "type": "image", + "image_url": "https://alicekit.s3.yandex.net/images_for_divs/chess.png", + "width": { + "type": "fixed", + "value": 50 + }, + "height": { + "type": "fixed", + "value": 50 + } + } + ] + } + } + ] + }, + "templates": {} +} diff --git a/test_data/snapshot_test_data/div-container/vertical-orientation-space-around-alignment.json b/test_data/snapshot_test_data/div-container/vertical-orientation-space-around-alignment.json new file mode 100644 index 000000000..4f680440e --- /dev/null +++ b/test_data/snapshot_test_data/div-container/vertical-orientation-space-around-alignment.json @@ -0,0 +1,56 @@ +{ + "description": "Vertical container with content_alignment_vertical = space-around", + "platforms": [ + "web" + ], + "card": { + "log_id": "snapshot_test_card", + "states": [ + { + "state_id": 0, + "div": { + "type": "container", + "orientation": "vertical", + "content_alignment_vertical": "space-around", + "height": { + "type": "fixed", + "value": 500 + }, + "border": { + "stroke": { + "color": "#BBFF0000", + "width": 2 + } + }, + "items": [ + { + "type": "image", + "image_url": "https://alicekit.s3.yandex.net/images_for_divs/chess.png", + "width": { + "type": "fixed", + "value": 100 + }, + "height": { + "type": "fixed", + "value": 100 + } + }, + { + "type": "image", + "image_url": "https://alicekit.s3.yandex.net/images_for_divs/chess.png", + "width": { + "type": "fixed", + "value": 50 + }, + "height": { + "type": "fixed", + "value": 50 + } + } + ] + } + } + ] + }, + "templates": {} +} diff --git a/test_data/snapshot_test_data/div-container/vertical-orientation-space-between-alignment.json b/test_data/snapshot_test_data/div-container/vertical-orientation-space-between-alignment.json new file mode 100644 index 000000000..963eebc4a --- /dev/null +++ b/test_data/snapshot_test_data/div-container/vertical-orientation-space-between-alignment.json @@ -0,0 +1,56 @@ +{ + "description": "Vertical container with content_alignment_vertical = space-between", + "platforms": [ + "web" + ], + "card": { + "log_id": "snapshot_test_card", + "states": [ + { + "state_id": 0, + "div": { + "type": "container", + "orientation": "vertical", + "content_alignment_vertical": "space-between", + "height": { + "type": "fixed", + "value": 500 + }, + "border": { + "stroke": { + "color": "#BBFF0000", + "width": 2 + } + }, + "items": [ + { + "type": "image", + "image_url": "https://alicekit.s3.yandex.net/images_for_divs/chess.png", + "width": { + "type": "fixed", + "value": 100 + }, + "height": { + "type": "fixed", + "value": 100 + } + }, + { + "type": "image", + "image_url": "https://alicekit.s3.yandex.net/images_for_divs/chess.png", + "width": { + "type": "fixed", + "value": 50 + }, + "height": { + "type": "fixed", + "value": 50 + } + } + ] + } + } + ] + }, + "templates": {} +} diff --git a/test_data/snapshot_test_data/div-container/vertical-orientation-space-evenly-alignment.json b/test_data/snapshot_test_data/div-container/vertical-orientation-space-evenly-alignment.json new file mode 100644 index 000000000..5fffcbb34 --- /dev/null +++ b/test_data/snapshot_test_data/div-container/vertical-orientation-space-evenly-alignment.json @@ -0,0 +1,56 @@ +{ + "description": "Vertical container with content_alignment_vertical = space-evenly", + "platforms": [ + "web" + ], + "card": { + "log_id": "snapshot_test_card", + "states": [ + { + "state_id": 0, + "div": { + "type": "container", + "orientation": "vertical", + "content_alignment_vertical": "space-evenly", + "height": { + "type": "fixed", + "value": 500 + }, + "border": { + "stroke": { + "color": "#BBFF0000", + "width": 2 + } + }, + "items": [ + { + "type": "image", + "image_url": "https://alicekit.s3.yandex.net/images_for_divs/chess.png", + "width": { + "type": "fixed", + "value": 100 + }, + "height": { + "type": "fixed", + "value": 100 + } + }, + { + "type": "image", + "image_url": "https://alicekit.s3.yandex.net/images_for_divs/chess.png", + "width": { + "type": "fixed", + "value": 50 + }, + "height": { + "type": "fixed", + "value": 50 + } + } + ] + } + } + ] + }, + "templates": {} +} diff --git a/test_data/snapshot_test_data/div-container/wrap/horizontal-orientation-space-around-alignment.json b/test_data/snapshot_test_data/div-container/wrap/horizontal-orientation-space-around-alignment.json new file mode 100644 index 000000000..0b156c070 --- /dev/null +++ b/test_data/snapshot_test_data/div-container/wrap/horizontal-orientation-space-around-alignment.json @@ -0,0 +1,91 @@ +{ + "description": "Horizontal wrap-container with content_alignment_horizontal = space-around", + "platforms": [ + "web" + ], + "templates": { + "wrapped_text": { + "type": "text", + "paddings": { + "left": 10, + "top": 10, + "right": 10, + "bottom": 10 + }, + "border": { + "stroke": { + "color": "#FF0000" + } + }, + "font_size": 12 + } + }, + "card": { + "log_id": "snapshot_test_card", + "states": [ + { + "state_id": 0, + "div": { + "type": "container", + "orientation": "horizontal", + "width": { + "type": "fixed", + "value": 300 + }, + "height": { + "type": "fixed", + "value": 450 + }, + "border": { + "stroke": { + "color": "#0000FF" + } + }, + "content_alignment_horizontal": "space-around", + "layout_mode": "wrap", + "items": [ + { + "type": "wrapped_text", + "text": "One", + "width": { + "type": "wrap_content" + } + }, + { + "type": "wrapped_text", + "text": "Two", + "width": { + "type": "fixed", + "value": 100 + } + }, + { + "type": "wrapped_text", + "text": "Three", + "width": { + "type": "fixed", + "value": 120 + } + }, + { + "type": "wrapped_text", + "text": "Four", + "width": { + "type": "fixed", + "value": 180 + } + }, + { + "type": "wrapped_text", + "text": "Five", + "width": { + "type": "fixed", + "value": 250 + } + } + ] + } + } + ] + } +} diff --git a/test_data/snapshot_test_data/div-container/wrap/horizontal-orientation-space-between-alignment.json b/test_data/snapshot_test_data/div-container/wrap/horizontal-orientation-space-between-alignment.json new file mode 100644 index 000000000..7e23222c6 --- /dev/null +++ b/test_data/snapshot_test_data/div-container/wrap/horizontal-orientation-space-between-alignment.json @@ -0,0 +1,91 @@ +{ + "description": "Horizontal wrap-container with content_alignment_horizontal = space-between", + "platforms": [ + "web" + ], + "templates": { + "wrapped_text": { + "type": "text", + "paddings": { + "left": 10, + "top": 10, + "right": 10, + "bottom": 10 + }, + "border": { + "stroke": { + "color": "#FF0000" + } + }, + "font_size": 12 + } + }, + "card": { + "log_id": "snapshot_test_card", + "states": [ + { + "state_id": 0, + "div": { + "type": "container", + "orientation": "horizontal", + "width": { + "type": "fixed", + "value": 300 + }, + "height": { + "type": "fixed", + "value": 450 + }, + "border": { + "stroke": { + "color": "#0000FF" + } + }, + "content_alignment_horizontal": "space-between", + "layout_mode": "wrap", + "items": [ + { + "type": "wrapped_text", + "text": "One", + "width": { + "type": "wrap_content" + } + }, + { + "type": "wrapped_text", + "text": "Two", + "width": { + "type": "fixed", + "value": 100 + } + }, + { + "type": "wrapped_text", + "text": "Three", + "width": { + "type": "fixed", + "value": 120 + } + }, + { + "type": "wrapped_text", + "text": "Four", + "width": { + "type": "fixed", + "value": 180 + } + }, + { + "type": "wrapped_text", + "text": "Five", + "width": { + "type": "fixed", + "value": 250 + } + } + ] + } + } + ] + } +} diff --git a/test_data/snapshot_test_data/div-container/wrap/horizontal-orientation-space-evenly-alignment.json b/test_data/snapshot_test_data/div-container/wrap/horizontal-orientation-space-evenly-alignment.json new file mode 100644 index 000000000..90d95174b --- /dev/null +++ b/test_data/snapshot_test_data/div-container/wrap/horizontal-orientation-space-evenly-alignment.json @@ -0,0 +1,91 @@ +{ + "description": "Horizontal wrap-container with content_alignment_horizontal = space-evenly", + "platforms": [ + "web" + ], + "templates": { + "wrapped_text": { + "type": "text", + "paddings": { + "left": 10, + "top": 10, + "right": 10, + "bottom": 10 + }, + "border": { + "stroke": { + "color": "#FF0000" + } + }, + "font_size": 12 + } + }, + "card": { + "log_id": "snapshot_test_card", + "states": [ + { + "state_id": 0, + "div": { + "type": "container", + "orientation": "horizontal", + "width": { + "type": "fixed", + "value": 300 + }, + "height": { + "type": "fixed", + "value": 450 + }, + "border": { + "stroke": { + "color": "#0000FF" + } + }, + "content_alignment_horizontal": "space-evenly", + "layout_mode": "wrap", + "items": [ + { + "type": "wrapped_text", + "text": "One", + "width": { + "type": "wrap_content" + } + }, + { + "type": "wrapped_text", + "text": "Two", + "width": { + "type": "fixed", + "value": 100 + } + }, + { + "type": "wrapped_text", + "text": "Three", + "width": { + "type": "fixed", + "value": 120 + } + }, + { + "type": "wrapped_text", + "text": "Four", + "width": { + "type": "fixed", + "value": 180 + } + }, + { + "type": "wrapped_text", + "text": "Five", + "width": { + "type": "fixed", + "value": 250 + } + } + ] + } + } + ] + } +} diff --git a/test_data/snapshot_test_data/div-container/wrap/vertical-orientation-space-around-alignment.json b/test_data/snapshot_test_data/div-container/wrap/vertical-orientation-space-around-alignment.json new file mode 100644 index 000000000..a9129b6ef --- /dev/null +++ b/test_data/snapshot_test_data/div-container/wrap/vertical-orientation-space-around-alignment.json @@ -0,0 +1,91 @@ +{ + "description": "Vertical wrap-container with content_alignment_horizontal = space-around", + "platforms": [ + "web" + ], + "templates": { + "wrapped_text": { + "type": "text", + "width": { + "type": "wrap_content" + }, + "paddings": { + "left": 10, + "top": 10, + "right": 10, + "bottom": 10 + }, + "border": { + "stroke": { + "color": "#FF0000" + } + }, + "font_size": 12 + } + }, + "card": { + "log_id": "snapshot_test_card", + "states": [ + { + "state_id": 0, + "div": { + "type": "container", + "orientation": "vertical", + "width": { + "type": "fixed", + "value": 300 + }, + "height": { + "type": "fixed", + "value": 450 + }, + "border": { + "stroke": { + "color": "#0000FF" + } + }, + "content_alignment_vertical": "space-around", + "layout_mode": "wrap", + "items": [ + { + "type": "wrapped_text", + "text": "One" + }, + { + "type": "wrapped_text", + "text": "Two", + "height": { + "type": "fixed", + "value": 100 + } + }, + { + "type": "wrapped_text", + "text": "Three", + "height": { + "type": "fixed", + "value": 150 + } + }, + { + "type": "wrapped_text", + "text": "Four", + "height": { + "type": "fixed", + "value": 250 + } + }, + { + "type": "wrapped_text", + "text": "Five", + "height": { + "type": "fixed", + "value": 400 + } + } + ] + } + } + ] + } +} diff --git a/test_data/snapshot_test_data/div-container/wrap/vertical-orientation-space-between-alignment.json b/test_data/snapshot_test_data/div-container/wrap/vertical-orientation-space-between-alignment.json new file mode 100644 index 000000000..0109fa8e5 --- /dev/null +++ b/test_data/snapshot_test_data/div-container/wrap/vertical-orientation-space-between-alignment.json @@ -0,0 +1,91 @@ +{ + "description": "Vertical wrap-container with content_alignment_horizontal = space-between", + "platforms": [ + "web" + ], + "templates": { + "wrapped_text": { + "type": "text", + "width": { + "type": "wrap_content" + }, + "paddings": { + "left": 10, + "top": 10, + "right": 10, + "bottom": 10 + }, + "border": { + "stroke": { + "color": "#FF0000" + } + }, + "font_size": 12 + } + }, + "card": { + "log_id": "snapshot_test_card", + "states": [ + { + "state_id": 0, + "div": { + "type": "container", + "orientation": "vertical", + "width": { + "type": "fixed", + "value": 300 + }, + "height": { + "type": "fixed", + "value": 450 + }, + "border": { + "stroke": { + "color": "#0000FF" + } + }, + "content_alignment_vertical": "space-between", + "layout_mode": "wrap", + "items": [ + { + "type": "wrapped_text", + "text": "One" + }, + { + "type": "wrapped_text", + "text": "Two", + "height": { + "type": "fixed", + "value": 100 + } + }, + { + "type": "wrapped_text", + "text": "Three", + "height": { + "type": "fixed", + "value": 150 + } + }, + { + "type": "wrapped_text", + "text": "Four", + "height": { + "type": "fixed", + "value": 250 + } + }, + { + "type": "wrapped_text", + "text": "Five", + "height": { + "type": "fixed", + "value": 400 + } + } + ] + } + } + ] + } +} diff --git a/test_data/snapshot_test_data/div-container/wrap/vertical-orientation-space-evenly-alignment.json b/test_data/snapshot_test_data/div-container/wrap/vertical-orientation-space-evenly-alignment.json new file mode 100644 index 000000000..af5b467a1 --- /dev/null +++ b/test_data/snapshot_test_data/div-container/wrap/vertical-orientation-space-evenly-alignment.json @@ -0,0 +1,91 @@ +{ + "description": "Vertical wrap-container with content_alignment_horizontal = space-evenly", + "platforms": [ + "web" + ], + "templates": { + "wrapped_text": { + "type": "text", + "width": { + "type": "wrap_content" + }, + "paddings": { + "left": 10, + "top": 10, + "right": 10, + "bottom": 10 + }, + "border": { + "stroke": { + "color": "#FF0000" + } + }, + "font_size": 12 + } + }, + "card": { + "log_id": "snapshot_test_card", + "states": [ + { + "state_id": 0, + "div": { + "type": "container", + "orientation": "vertical", + "width": { + "type": "fixed", + "value": 300 + }, + "height": { + "type": "fixed", + "value": 450 + }, + "border": { + "stroke": { + "color": "#0000FF" + } + }, + "content_alignment_vertical": "space-evenly", + "layout_mode": "wrap", + "items": [ + { + "type": "wrapped_text", + "text": "One" + }, + { + "type": "wrapped_text", + "text": "Two", + "height": { + "type": "fixed", + "value": 100 + } + }, + { + "type": "wrapped_text", + "text": "Three", + "height": { + "type": "fixed", + "value": 150 + } + }, + { + "type": "wrapped_text", + "text": "Four", + "height": { + "type": "fixed", + "value": 250 + } + }, + { + "type": "wrapped_text", + "text": "Five", + "height": { + "type": "fixed", + "value": 400 + } + } + ] + } + } + ] + } +}