support new content alignments: space_between, space_around, space_evenly

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

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<DivContainerData> = {};
     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);

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

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

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

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

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');
+    });
+});

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');
+    });
+});

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": {}
+}

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": {}
+}

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": {}
+}

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": {}
+}

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": {}
+}

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": {}
+}

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
+              }
+            }
+          ]
+        }
+      }
+    ]
+  }
+}

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
+              }
+            }
+          ]
+        }
+      }
+    ]
+  }
+}

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
+              }
+            }
+          ]
+        }
+      }
+    ]
+  }
+}

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
+              }
+            }
+          ]
+        }
+      }
+    ]
+  }
+}

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
+              }
+            }
+          ]
+        }
+      }
+    ]
+  }
+}

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
+              }
+            }
+          ]
+        }
+      }
+    ]
+  }
+}