xmlui 0.10.13 → 0.10.14

package/dist/scripts/src/components/Stack/Stack.spec.js

@@ -0,0 +1,654 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const fixtures_1 = require("../../testing/fixtures");
+const component_test_helpers_1 = require("../../testing/component-test-helpers");
+const PAGE_WIDTH = 1280;
+const PAGE_HEIGHT = 720;
+fixtures_1.test.use({ viewport: { width: PAGE_WIDTH, height: PAGE_HEIGHT } });
+// =============================================================================
+// BASIC FUNCTIONALITY TESTS
+// =============================================================================
+fixtures_1.test.describe("Basic Functionality", () => {
+    (0, fixtures_1.test)("can render empty", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        yield initTestBed(`<Stack testId="stack"></Stack>`);
+        yield (0, fixtures_1.expect)(page.getByTestId("stack")).toBeAttached();
+        yield (0, fixtures_1.expect)(page.getByTestId("stack")).toBeEmpty();
+    }));
+});
+// =============================================================================
+// LAYOUT TESTS
+// =============================================================================
+fixtures_1.test.describe("Layout", () => {
+    // "(horizontal) children with unspecified dimensions" -> width is content size, height is content size
+    (0, fixtures_1.test)("(horizontal) children with unspecified dimensions", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        yield initTestBed(`
+      <Stack testId="stack" orientation="horizontal" backgroundColor="lightgray" gap="0">
+        <Text testId="item_0" backgroundColor="cyan">Text #1</Text>
+        <Text testId="item_1" backgroundColor="yellow">Text #2</Text>
+        <Text testId="item_2" backgroundColor="lightgreen">Text #3</Text>
+      </Stack>
+    `);
+        const { width: stackWidth, height: stackHeight } = yield (0, component_test_helpers_1.getBounds)(page.getByTestId("stack"));
+        const { width: itemWidth0, height: itemHeight0 } = yield (0, component_test_helpers_1.getBounds)(page.getByTestId("item_0"));
+        const { width: itemWidth1 } = yield (0, component_test_helpers_1.getBounds)(page.getByTestId("item_1"));
+        const { width: itemWidth2, right: itemRight2 } = yield (0, component_test_helpers_1.getBounds)(page.getByTestId("item_2"));
+        const itemWidthSum = itemWidth0 + itemWidth1 + itemWidth2;
+        // ensure the elements are not overflowing and that the stack is not as wide as the width-sum of the elements
+        // this can be stated, since we set the viewport size at the start,
+        // which is bigger than the width-sum of the elements
+        (0, fixtures_1.expect)(itemWidthSum).toBeLessThan(stackWidth);
+        //no gaps between elements
+        // with tolerance, since we are comparing floating point number. The pixel values could be non-whole numbers
+        // in which case adding up fractions could have a very small difference that would make the test fail
+        (0, fixtures_1.expect)(itemWidthSum).toEqualWithTolerance(itemRight2);
+        // enusre that the stack is as tall as the tallest element (they all have the same height in this case)
+        (0, fixtures_1.expect)(stackHeight).toEqual(itemHeight0);
+    }));
+    // "(vertical) children with unspecified dimensions" -> width fills available space, height is content size
+    (0, fixtures_1.test)("(vertical) children with unspecified dimensions, orientation is implicit", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed, }) {
+        yield initTestBed(`
+      <Stack testId="stack" backgroundColor="lightgray" gap="0">
+        <Text testId="item_0" backgroundColor="cyan">Text #1</Text>
+        <Text testId="item_1" backgroundColor="yellow">Text #2</Text>
+        <Text testId="item_2" backgroundColor="lightgreen">Text #3</Text>
+      </Stack>
+    `);
+        const { height: stackHeight, width: stackWidth } = yield (0, component_test_helpers_1.getBounds)(page.getByTestId("stack"));
+        const itemDims0 = yield (0, component_test_helpers_1.getBounds)(page.getByTestId("item_0"));
+        const itemDims1 = yield (0, component_test_helpers_1.getBounds)(page.getByTestId("item_1"));
+        const itemDims2 = yield (0, component_test_helpers_1.getBounds)(page.getByTestId("item_2"));
+        const itemHeightSum = itemDims0.height + itemDims1.height + itemDims2.height;
+        (0, fixtures_1.expect)(itemHeightSum).toEqualWithTolerance(stackHeight);
+        (0, fixtures_1.expect)(itemDims0.width).toEqual(stackWidth);
+        (0, fixtures_1.expect)(itemDims1.width).toEqual(stackWidth);
+        (0, fixtures_1.expect)(itemDims2.width).toEqual(stackWidth);
+    }));
+    // "(horizontal) block children with unspecified dimensions" -> width is content size,
+    // height is content size, block children are treated as inline elements
+    (0, fixtures_1.test)("(horizontal) block children with unspecified dimensions", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        yield initTestBed(`
+      <Fragment>
+        <Stack testId="stack" orientation="horizontal" backgroundColor="lightgray" gap="0">
+          <Text testId="item_0" backgroundColor="cyan">Heading 1</Text>
+          <Text testId="item_1" backgroundColor="yellow">Heading 2</Text>
+          <Text testId="item_2" backgroundColor="lightgreen">Heading 3</Text>
+        </Stack>
+        <Stack testId="stack2" orientation="horizontal" backgroundColor="lightgray">
+          <Text testId="item_3" backgroundColor="coral">Heading 1Heading 2Heading 3</Text>
+        </Stack>
+      </Fragment>
+    `);
+        const { width: stackWidth, height: stackHeight } = yield (0, component_test_helpers_1.getBounds)(page.getByTestId("stack"));
+        const { width: itemWidth0, height: itemHeight0 } = yield (0, component_test_helpers_1.getBounds)(page.getByTestId("item_0"));
+        const { width: itemWidth1, height: itemHeight1 } = yield (0, component_test_helpers_1.getBounds)(page.getByTestId("item_1"));
+        const { width: itemWidth2, height: itemHeight2 } = yield (0, component_test_helpers_1.getBounds)(page.getByTestId("item_2"));
+        const { width: itemWidth3 } = yield (0, component_test_helpers_1.getBounds)(page.getByTestId("item_3"));
+        const itemWidthSum = itemWidth0 + itemWidth1 + itemWidth2;
+        const tallestItemHeight = Math.max(itemHeight0, itemHeight1, itemHeight2);
+        (0, fixtures_1.expect)(itemWidthSum).toBeLessThan(stackWidth);
+        (0, fixtures_1.expect)(itemWidthSum).toEqualWithTolerance(itemWidth3);
+        (0, fixtures_1.expect)(stackHeight).toEqual(tallestItemHeight);
+    }));
+    // "(horizontal) children with fixed dimensions" -> Stack does not alter dimensions
+    (0, fixtures_1.test)("(horizontal) children with fixed dimensions", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        yield initTestBed(`
+      <Stack testId="stack" orientation="horizontal" gap="0">
+        <Text testId="item_0" backgroundColor="cyan" width="72px" height="36px">72 x 36</Text>
+        <Text testId="item_1" backgroundColor="yellow" width="144px" height="72px">144 x 72</Text>
+        <Text testId="item_2" backgroundColor="lightgreen" width="64px" height="48px">64 x 48</Text>
+      </Stack>
+    `);
+        const { height: stackHeight } = yield (0, component_test_helpers_1.getBounds)(page.getByTestId("stack"));
+        const itemDims0 = yield (0, component_test_helpers_1.getBounds)(page.getByTestId("item_0"));
+        const itemDims1 = yield (0, component_test_helpers_1.getBounds)(page.getByTestId("item_1"));
+        const itemDims2 = yield (0, component_test_helpers_1.getBounds)(page.getByTestId("item_2"));
+        const tallestItemHeight = 72;
+        const itemWidthSum = 72 + 144 + 64;
+        //no gaps between items
+        (0, fixtures_1.expect)(itemWidthSum).toEqualWithTolerance(itemDims2.right);
+        (0, fixtures_1.expect)(stackHeight).toEqual(tallestItemHeight);
+        (0, fixtures_1.expect)(itemDims0).toMatchObject({ width: 72, height: 36 });
+        (0, fixtures_1.expect)(itemDims1).toMatchObject({ width: 144, height: 72 });
+        (0, fixtures_1.expect)(itemDims2).toMatchObject({ width: 64, height: 48 });
+    }));
+    // "(vertical) children with fixed dimensions" -> Stack does not alter dimensions
+    (0, fixtures_1.test)("(vertical) children with fixed dimensions", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        yield initTestBed(`
+      <Stack testId="stack" orientation="vertical" gap="0">
+        <Text testId="item_0" backgroundColor="cyan" width="72px" height="36px">72 x 36</Text>
+        <Text testId="item_1" backgroundColor="yellow" width="144px" height="72px">144 x 72</Text>
+        <Text testId="item_2" backgroundColor="lightgreen" width="64px" height="48px">64 x 48</Text>
+      </Stack>
+    `);
+        const { width: stackWidth, height: stackHeight } = yield (0, component_test_helpers_1.getBounds)(page.getByTestId("stack"));
+        const itemDims0 = yield (0, component_test_helpers_1.getBounds)(page.getByTestId("item_0"));
+        const itemDims1 = yield (0, component_test_helpers_1.getBounds)(page.getByTestId("item_1"));
+        const itemDims2 = yield (0, component_test_helpers_1.getBounds)(page.getByTestId("item_2"));
+        const widestItemWidth = 144;
+        const itemHeightSum = 36 + 72 + 48;
+        (0, fixtures_1.expect)(widestItemWidth).toBeLessThan(stackWidth);
+        (0, fixtures_1.expect)(itemHeightSum).toEqualWithTolerance(itemDims2.bottom);
+        (0, fixtures_1.expect)(itemHeightSum).toEqualWithTolerance(stackHeight);
+        (0, fixtures_1.expect)(itemDims0).toMatchObject({ width: 72, height: 36 });
+        (0, fixtures_1.expect)(itemDims1).toMatchObject({ width: 144, height: 72 });
+        (0, fixtures_1.expect)(itemDims2).toMatchObject({ width: 64, height: 48 });
+    }));
+    // (horizontal) children with fixed width and unspecified height -> item height is the same as stack height
+    (0, fixtures_1.test)("(horizontal) children with fixed width and unspecified height", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed, }) {
+        yield initTestBed(`
+      <Stack testId="stack" orientation="horizontal" gap="0">
+        <Text testId="item_0" backgroundColor="cyan" width="72px">W: 72</Text>
+        <Text testId="item_1" backgroundColor="yellow" width="144px">W: 144</Text>
+        <Text testId="item_2" backgroundColor="lightgreen" width="48px">W: 48 + long, long, long text</Text>
+      </Stack>
+    `);
+        const { height: stackHeight, width: stackWidth } = yield (0, component_test_helpers_1.getBounds)(page.getByTestId("stack"));
+        const itemDims0 = yield (0, component_test_helpers_1.getBounds)(page.getByTestId("item_0"));
+        const itemDims1 = yield (0, component_test_helpers_1.getBounds)(page.getByTestId("item_1"));
+        const itemDims2 = yield (0, component_test_helpers_1.getBounds)(page.getByTestId("item_2"));
+        const itemWidthSum = itemDims0.width + itemDims1.width + itemDims2.width;
+        (0, fixtures_1.expect)(itemWidthSum).toEqualWithTolerance(itemDims2.right);
+        (0, fixtures_1.expect)(itemWidthSum).toBeLessThan(stackWidth);
+        (0, fixtures_1.expect)(itemDims0.height).toEqual(stackHeight);
+        (0, fixtures_1.expect)(itemDims1.height).toEqual(stackHeight);
+        (0, fixtures_1.expect)(itemDims2.height).toEqual(stackHeight);
+        (0, fixtures_1.expect)(itemDims0.width).toEqual(72);
+        (0, fixtures_1.expect)(itemDims1.width).toEqual(144);
+        (0, fixtures_1.expect)(itemDims2.width).toEqual(48);
+    }));
+    // (vertical) children with fixed height and unspecified width -> width fills available space
+    (0, fixtures_1.test)("(vertical) children with fixed height and unspecified width ", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed, }) {
+        yield initTestBed(`
+      <Stack testId="stack" orientation="vertical" gap="0">
+        <Text testId="item_0" backgroundColor="cyan" height="36px">H: 36</Text>
+        <Text testId="item_1" backgroundColor="yellow" height="72px">H: 72</Text>
+        <Text testId="item_2" backgroundColor="lightgreen" height="48px">H: 48 + long, long, long text</Text>
+      </Stack>
+    `);
+        const { height: stackHeight, width: stackWidth } = yield (0, component_test_helpers_1.getBounds)(page.getByTestId("stack"));
+        const itemDims0 = yield (0, component_test_helpers_1.getBounds)(page.getByTestId("item_0"));
+        const itemDims1 = yield (0, component_test_helpers_1.getBounds)(page.getByTestId("item_1"));
+        const itemDims2 = yield (0, component_test_helpers_1.getBounds)(page.getByTestId("item_2"));
+        const itemHeightSum = 36 + 72 + 48;
+        (0, fixtures_1.expect)(itemHeightSum).toEqualWithTolerance(itemDims2.bottom);
+        (0, fixtures_1.expect)(itemHeightSum).toEqualWithTolerance(stackHeight);
+        (0, fixtures_1.expect)(itemDims0.width).toEqual(stackWidth);
+        (0, fixtures_1.expect)(itemDims1.width).toEqual(stackWidth);
+        (0, fixtures_1.expect)(itemDims2.width).toEqual(stackWidth);
+        (0, fixtures_1.expect)(itemDims0.height).toEqual(36);
+        (0, fixtures_1.expect)(itemDims1.height).toEqual(72);
+        (0, fixtures_1.expect)(itemDims2.height).toEqual(48);
+    }));
+    // (horizontal) children with fixed height and unspecified width -> item widths are conent size, item heights are not altered
+    (0, fixtures_1.test)("(horizontal) children with fixed height and unspecified width", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed, }) {
+        yield initTestBed(`
+      <Stack testId="stack" orientation="horizontal" gap="0">
+        <Text testId="item_0" backgroundColor="cyan" height="36px">H: 36</Text>
+        <Text testId="item_1" backgroundColor="yellow" height="72px">H: 72</Text>
+        <Text testId="item_2" backgroundColor="lightgreen" height="48px">H: 48</Text>
+      </Stack>
+    `);
+        const { height: stackHeight, width: stackWidth } = yield (0, component_test_helpers_1.getBounds)(page.getByTestId("stack"));
+        const itemDims0 = yield (0, component_test_helpers_1.getBounds)(page.getByTestId("item_0"));
+        const itemDims1 = yield (0, component_test_helpers_1.getBounds)(page.getByTestId("item_1"));
+        const itemDims2 = yield (0, component_test_helpers_1.getBounds)(page.getByTestId("item_2"));
+        const itemWidthSum = itemDims0.width + itemDims1.width + itemDims2.width;
+        const tallestItemHeight = 72;
+        (0, fixtures_1.expect)(itemWidthSum).toBeLessThan(stackWidth);
+        (0, fixtures_1.expect)(stackHeight).toEqual(tallestItemHeight);
+        (0, fixtures_1.expect)(itemDims0.height).toEqual(36);
+        (0, fixtures_1.expect)(itemDims1.height).toEqual(72);
+        (0, fixtures_1.expect)(itemDims2.height).toEqual(48);
+    }));
+    // (vertical) children with fixed width and unspecified height -> item heights are content size, widths are not altered
+    (0, fixtures_1.test)("(vertical) children with fixed width and unspecified height", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed, }) {
+        yield initTestBed(`
+      <Stack testId="stack" orientation="vertical" gap="0">
+        <Text testId="item_0" backgroundColor="cyan" width="72px">W: 72</Text>
+        <Text testId="item_1" backgroundColor="yellow" width="144px">W: 144</Text>
+        <Text testId="item_2" backgroundColor="lightgreen" width="48px">W: 48 + long, long, long text</Text>
+      </Stack>
+    `);
+        const { height: stackHeight } = yield (0, component_test_helpers_1.getBounds)(page.getByTestId("stack"));
+        const itemDims0 = yield (0, component_test_helpers_1.getBounds)(page.getByTestId("item_0"));
+        const itemDims1 = yield (0, component_test_helpers_1.getBounds)(page.getByTestId("item_1"));
+        const itemDims2 = yield (0, component_test_helpers_1.getBounds)(page.getByTestId("item_2"));
+        const itemHeightSum = itemDims0.height + itemDims1.height + itemDims2.height;
+        (0, fixtures_1.expect)(itemHeightSum).toEqualWithTolerance(itemDims2.bottom);
+        (0, fixtures_1.expect)(itemHeightSum).toEqualWithTolerance(stackHeight);
+        (0, fixtures_1.expect)(itemDims0.width).toEqual(72);
+        (0, fixtures_1.expect)(itemDims1.width).toEqual(144);
+        (0, fixtures_1.expect)(itemDims2.width).toEqual(48);
+    }));
+    (0, fixtures_1.test)("(horizontal) percentage sizing", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        yield initTestBed(`
+      <Stack testId="stack" orientation="horizontal" backgroundColor="lightgray" gap="0">
+        <Text testId="item_0" backgroundColor="cyan" width="20%">W: 20%</Text>
+        <H2 testId="item_1" backgroundColor="yellow" width="50%">W: 50%</H2>
+        <H5 testId="item_2" backgroundColor="lightgreen" width="20%">W: 20% + long, long, long text</H5>
+      </Stack>
+    `);
+        const { width: stackWidth } = yield (0, component_test_helpers_1.getBounds)(page.getByTestId("stack"));
+        const { width: itemWidth0 } = yield (0, component_test_helpers_1.getBounds)(page.getByTestId("item_0"));
+        const { width: itemWidth1 } = yield (0, component_test_helpers_1.getBounds)(page.getByTestId("item_1"));
+        const { width: itemWidth2, right: lastItemRight } = yield (0, component_test_helpers_1.getBounds)(page.getByTestId("item_2"));
+        const itemWidthSum = itemWidth0 + itemWidth1 + itemWidth2;
+        (0, fixtures_1.expect)(stackWidth).toEqual(PAGE_WIDTH);
+        (0, fixtures_1.expect)(itemWidthSum).toEqualWithTolerance(lastItemRight);
+        (0, fixtures_1.expect)(itemWidth0).toEqualWithTolerance(0.2 * stackWidth);
+        (0, fixtures_1.expect)(itemWidth1).toEqualWithTolerance(0.5 * stackWidth);
+        (0, fixtures_1.expect)(itemWidth2).toEqualWithTolerance(0.2 * stackWidth);
+    }));
+    (0, fixtures_1.test)("(vertical) percentage sizing", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        yield initTestBed(`
+      <Stack testId="stack" height="180px" orientation="vertical" backgroundColor="lightgray" gap="0">
+        <Text testId="item_0" backgroundColor="cyan" height="20%">W: 20%</Text>
+        <Text testId="item_1" backgroundColor="yellow" height="50%">W: 50%</Text>
+        <Text testId="item_2" backgroundColor="lightgreen" height="20%">W: 20% + long, long, long text</Text>
+      </Stack>
+    `);
+        const { height: stackHeight, width: stackWidth } = yield (0, component_test_helpers_1.getBounds)(page.getByTestId("stack"));
+        const { height: itemHeight0, width: itemWidth0 } = yield (0, component_test_helpers_1.getBounds)(page.getByTestId("item_0"));
+        const { height: itemHeight1 } = yield (0, component_test_helpers_1.getBounds)(page.getByTestId("item_1"));
+        const { height: itemHeight2, bottom: lastItemBottom } = yield (0, component_test_helpers_1.getBounds)(page.getByTestId("item_2"));
+        const itemHeightSum = itemHeight0 + itemHeight1 + itemHeight2;
+        (0, fixtures_1.expect)(itemWidth0).toEqual(stackWidth);
+        (0, fixtures_1.expect)(itemHeightSum).toEqualWithTolerance(lastItemBottom);
+        (0, fixtures_1.expect)(itemHeight0).toEqualWithTolerance(0.2 * stackHeight);
+        (0, fixtures_1.expect)(itemHeight1).toEqualWithTolerance(0.5 * stackHeight);
+        (0, fixtures_1.expect)(itemHeight2).toEqualWithTolerance(0.2 * stackHeight);
+    }));
+    (0, fixtures_1.test)("(horizontal) percentage sizing fully filled", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        yield initTestBed(`
+      <Stack testId="stack" orientation="horizontal" backgroundColor="lightgray" gap="0">
+        <Text testId="item_0" backgroundColor="cyan" width="20%">W: 20%</Text>
+        <H2 testId="item_1" backgroundColor="yellow" width="50%">W: 50%</H2>
+        <H5 testId="item_2" backgroundColor="lightgreen" width="30%">W: 30% + long, long, long text</H5>
+      </Stack>
+    `);
+        const { width: stackWidth } = yield (0, component_test_helpers_1.getBounds)(page.getByTestId("stack"));
+        const { right: lastItemRight } = yield (0, component_test_helpers_1.getBounds)(page.getByTestId("item_2"));
+        (0, fixtures_1.expect)(stackWidth).toEqualWithTolerance(lastItemRight);
+    }));
+    (0, fixtures_1.test)("(vertical) percentage sizing fully filled", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        yield initTestBed(`
+      <Stack testId="stack" height="180px" orientation="vertical" backgroundColor="lightgray" gap="0">
+        <Text testId="item_0" backgroundColor="cyan" height="20%">W: 20%</Text>
+        <Text testId="item_1" backgroundColor="yellow" height="50%">W: 50%</Text>
+        <Text testId="item_2" backgroundColor="lightgreen" height="30%">W: 30% + long, long, long text</Text>
+      </Stack>
+    `);
+        const { height: stackHeight } = yield (0, component_test_helpers_1.getBounds)(page.getByTestId("stack"));
+        const { bottom: lastItemBottom } = yield (0, component_test_helpers_1.getBounds)(page.getByTestId("item_2"));
+        (0, fixtures_1.expect)(stackHeight).toEqualWithTolerance(lastItemBottom);
+    }));
+    // (horizontal) percentage overflow X
+    (0, fixtures_1.test)("(horizontal) percentage overflow X", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        yield initTestBed(`
+      <Stack testId="stack" orientation="horizontal" backgroundColor="lightgray" gap="0">
+        <Text testId="item_0" backgroundColor="cyan" width="30%">W: 30%</Text>
+        <H2 testId="item_1" backgroundColor="yellow" width="50%">W: 50%</H2>
+        <H5 testId="item_2" backgroundColor="lightgreen" width="40%">W: 40% + long, long, long text</H5>
+      </Stack>
+    `);
+        const isOverflown = yield (0, component_test_helpers_1.overflows)(page.getByTestId("stack"), "x");
+        (0, fixtures_1.expect)(isOverflown).toEqual(true);
+    }));
+    // (vertical) percentage overflow Y
+    (0, fixtures_1.test)("(vertical) percentage overflow Y", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        yield initTestBed(`
+      <Stack testId="stack" orientation="vertical" height="180px" backgroundColor="lightgray" gap="0">
+        <Text testId="item_0" backgroundColor="cyan" height="30%">H: 30%</Text>
+        <H2 testId="item_1" backgroundColor="yellow" height="60%">H: 60%</H2>
+        <H5 testId="item_2" backgroundColor="lightgreen" height="20%">H: 20% + long, long, long text</H5>
+      </Stack>
+    `);
+        const isOverflown = yield (0, component_test_helpers_1.overflows)(page.getByTestId("stack"), "y");
+        (0, fixtures_1.expect)(isOverflown).toEqual(true);
+    }));
+    (0, fixtures_1.test)("(horizontal) star sizing", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        yield initTestBed(`
+      <Stack testId="stack" width="100%" orientation="horizontal" backgroundColor="lightgray" gap="0">
+        <Text testId="item_0" backgroundColor="cyan" width="100px">W: 100</Text>
+        <Text testId="item_1" backgroundColor="yellow" width="3*">W: 3*</Text>
+        <Text testId="item_2" backgroundColor="lightgreen" width="*">W: *</Text>
+      </Stack>
+    `);
+        const { width: stackWidth } = yield (0, component_test_helpers_1.getBounds)(page.getByTestId("stack"));
+        const { width: itemWidth0 } = yield (0, component_test_helpers_1.getBounds)(page.getByTestId("item_0"));
+        const { width: itemWidth1 } = yield (0, component_test_helpers_1.getBounds)(page.getByTestId("item_1"));
+        const { width: itemWidth2, right: lastItemRight } = yield (0, component_test_helpers_1.getBounds)(page.getByTestId("item_2"));
+        const itemWidthSum = itemWidth0 + itemWidth1 + itemWidth2;
+        const expectedItemWidth0 = 100;
+        const expectedItemWidth1 = (stackWidth - 100) * (3 / 4);
+        const expectedItemWidth2 = (stackWidth - 100) * (1 / 4);
+        (0, fixtures_1.expect)(itemWidthSum).toEqualWithTolerance(lastItemRight);
+        (0, fixtures_1.expect)(itemWidth0).toEqual(expectedItemWidth0);
+        (0, fixtures_1.expect)(itemWidth1).toEqualWithTolerance(expectedItemWidth1);
+        (0, fixtures_1.expect)(itemWidth2).toEqualWithTolerance(expectedItemWidth2);
+    }));
+    // (horizontal) star sizing comparison -> Larger Stack have larger star sized children, px sizes are same
+    (0, fixtures_1.test)("(horizontal) star sizing comparison", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        yield initTestBed(`
+      <Fragment>
+        <Stack testId="stack_0" orientation="horizontal" width="600px" gap="0">
+          <Text testId="ref_item_0" backgroundColor="cyan" width="100px">W: 100</Text>
+          <Text testId="ref_item_1" backgroundColor="yellow" width="3*">W: 3*</Text>
+          <Text testId="ref_item_2" backgroundColor="lightgreen" width="*">W: *</Text>
+        </Stack>
+        <Stack testId="stack_1" orientation="horizontal" width="300px" gap="0">
+          <Text testId="item_0" backgroundColor="cyan" width="100px">W: 100</Text>
+          <Text testId="item_1" backgroundColor="yellow" width="3*">W: 3*</Text>
+          <Text testId="item_2" backgroundColor="lightgreen" width="*">W: *</Text>
+        </Stack>
+      </Fragment>
+    `);
+        const { width: refItemWidth0 } = yield (0, component_test_helpers_1.getBounds)(page.getByTestId("ref_item_0"));
+        const { width: refItemWidth1 } = yield (0, component_test_helpers_1.getBounds)(page.getByTestId("ref_item_1"));
+        const { width: refItemWidth2 } = yield (0, component_test_helpers_1.getBounds)(page.getByTestId("ref_item_2"));
+        const { width: itemWidth0 } = yield (0, component_test_helpers_1.getBounds)(page.getByTestId("item_0"));
+        const { width: itemWidth1 } = yield (0, component_test_helpers_1.getBounds)(page.getByTestId("item_1"));
+        const { width: itemWidth2 } = yield (0, component_test_helpers_1.getBounds)(page.getByTestId("item_2"));
+        (0, fixtures_1.expect)(refItemWidth0).toEqual(itemWidth0);
+        (0, fixtures_1.expect)(refItemWidth1).toBeGreaterThan(itemWidth1);
+        (0, fixtures_1.expect)(refItemWidth2).toBeGreaterThan(itemWidth2);
+    }));
+    // (vertical) star sizing comparison -> Larger Stack have larger star sized children, px sizes are same
+    (0, fixtures_1.test)("(vertical) star sizing comparison", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        yield initTestBed(`
+      <Fragment>
+        <Stack testId="stack_0" orientation="vertical" height="600px" gap="0">
+          <Text testId="ref_item_0" backgroundColor="cyan" height="100px">W: 100</Text>
+          <Text testId="ref_item_1" backgroundColor="yellow" height="3*">W: 3*</Text>
+          <Text testId="ref_item_2" backgroundColor="lightgreen" height="*">W: *</Text>
+        </Stack>
+        <Stack testId="stack_1" orientation="vertical" height="300px" gap="0">
+          <Text testId="item_0" backgroundColor="cyan" height="100px">W: 100</Text>
+          <Text testId="item_1" backgroundColor="yellow" height="3*">W: 3*</Text>
+          <Text testId="item_2" backgroundColor="lightgreen" height="*">W: *</Text>
+        </Stack>
+      </Fragment>
+    `);
+        const { height: refItemHeight0 } = yield (0, component_test_helpers_1.getBounds)(page.getByTestId("ref_item_0"));
+        const { height: refItemHeight1 } = yield (0, component_test_helpers_1.getBounds)(page.getByTestId("ref_item_1"));
+        const { height: refItemHeight2 } = yield (0, component_test_helpers_1.getBounds)(page.getByTestId("ref_item_2"));
+        const { height: itemHeight0 } = yield (0, component_test_helpers_1.getBounds)(page.getByTestId("item_0"));
+        const { height: itemHeight1 } = yield (0, component_test_helpers_1.getBounds)(page.getByTestId("item_1"));
+        const { height: itemHeight2 } = yield (0, component_test_helpers_1.getBounds)(page.getByTestId("item_2"));
+        (0, fixtures_1.expect)(refItemHeight0).toEqual(itemHeight0);
+        (0, fixtures_1.expect)(refItemHeight1).toBeGreaterThan(itemHeight1);
+        (0, fixtures_1.expect)(refItemHeight2).toBeGreaterThan(itemHeight2);
+    }));
+    // (horizontal) gaps + percentage -> children use available space
+    (0, fixtures_1.test)("(horizontal) paddings + percentage", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        yield initTestBed(`
+      <Stack testId="stack" orientation="horizontal" backgroundColor="lightgray" gap="0"
+        paddingHorizontal="50px" paddingVertical="50px">
+        <Text testId="item_0" backgroundColor="cyan" width="25%">W: 25%</Text>
+        <Text testId="item_1" backgroundColor="yellow" width="50%">W: 50%</Text>
+        <Text testId="item_2" backgroundColor="lightgreen" width="25%">W: 25%</Text>
+      </Stack>
+    `);
+        const { width: stackWidth } = yield (0, component_test_helpers_1.getBounds)(page.getByTestId("stack"));
+        const { width: itemWidth0, left: firstItemLeft } = yield (0, component_test_helpers_1.getBounds)(page.getByTestId("item_0"));
+        const { width: itemWidth1 } = yield (0, component_test_helpers_1.getBounds)(page.getByTestId("item_1"));
+        const { width: itemWidth2, right: lastItemRight } = yield (0, component_test_helpers_1.getBounds)(page.getByTestId("item_2"));
+        const itemWidthSum = itemWidth0 + itemWidth1 + itemWidth2;
+        (0, fixtures_1.expect)(firstItemLeft).toEqual(50);
+        (0, fixtures_1.expect)(lastItemRight).toEqual(stackWidth - 50);
+        (0, fixtures_1.expect)(itemWidthSum).toEqualWithTolerance(stackWidth - 2 * 50);
+    }));
+    // (vertical) gaps + percentage -> children use available space
+    (0, fixtures_1.test)("(vertical) paddings + percentage", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        yield initTestBed(`
+      <Stack testId="stack" orientation="vertical" backgroundColor="lightgray" gap="0"
+        height="240px" paddingHorizontal="50px" paddingVertical="50px">
+        <Text testId="item_0" backgroundColor="cyan" height="25%">H: 25%</Text>
+        <Text testId="item_1" backgroundColor="yellow" height="50%">H: 50%</Text>
+        <Text testId="item_2" backgroundColor="lightgreen" height="25%">H: 25%</Text>
+      </Stack>
+    `);
+        const { height: stackHeight } = yield (0, component_test_helpers_1.getBounds)(page.getByTestId("stack"));
+        const { top: firstItemTop } = yield (0, component_test_helpers_1.getBounds)(page.getByTestId("item_0"));
+        const { bottom: lastItemBottom } = yield (0, component_test_helpers_1.getBounds)(page.getByTestId("item_2"));
+        (0, fixtures_1.expect)(firstItemTop).toEqual(50);
+        (0, fixtures_1.expect)(lastItemBottom).toEqual(stackHeight - 50);
+    }));
+    (0, fixtures_1.test)("(horizontal) gaps", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        yield initTestBed(`
+      <Stack orientation="horizontal" backgroundColor="lightgray" gap="50px">
+        <Stack testId="item_0" backgroundColor="red" height="36px" width="36px" />
+        <Stack testId="item_1" backgroundColor="green" height="36px" width="36px" />
+        <Stack testId="item_2" backgroundColor="blue" height="36px" width="36px" />
+      </Stack>
+    `);
+        const itemDims0 = yield (0, component_test_helpers_1.getBounds)(page.getByTestId("item_0"));
+        const itemDims1 = yield (0, component_test_helpers_1.getBounds)(page.getByTestId("item_1"));
+        const itemDims2 = yield (0, component_test_helpers_1.getBounds)(page.getByTestId("item_2"));
+        (0, fixtures_1.expect)(itemDims0.left).toEqual(0);
+        (0, fixtures_1.expect)(itemDims1.left).toEqual(itemDims0.right + 50);
+        (0, fixtures_1.expect)(itemDims2.left).toEqual(2 * (itemDims0.right + 50));
+    }));
+    (0, fixtures_1.test)("(vertical) gaps", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        yield initTestBed(`
+      <Stack orientation="vertical" backgroundColor="lightgray" gap="50px">
+        <Stack testId="item_0" backgroundColor="red" height="36px" width="36px" />
+        <Stack testId="item_1" backgroundColor="green" height="36px" width="36px" />
+        <Stack testId="item_2" backgroundColor="blue" height="36px" width="36px" />
+      </Stack>
+    `);
+        const itemDims0 = yield (0, component_test_helpers_1.getBounds)(page.getByTestId("item_0"));
+        const itemDims1 = yield (0, component_test_helpers_1.getBounds)(page.getByTestId("item_1"));
+        const itemDims2 = yield (0, component_test_helpers_1.getBounds)(page.getByTestId("item_2"));
+        (0, fixtures_1.expect)(itemDims0.top).toEqual(0);
+        (0, fixtures_1.expect)(itemDims1.top).toEqual(itemDims0.bottom + 50);
+        (0, fixtures_1.expect)(itemDims2.top).toEqual(2 * (itemDims0.bottom + 50));
+    }));
+    // (horizontal) gaps + percentage -> gaps push the content out of the container
+    (0, fixtures_1.test)("(horizontal) gaps + percentage", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        yield initTestBed(`
+      <Stack testId="stack" orientation="horizontal" backgroundColor="lightgray" padding="1rem" gap="2rem">
+        <Stack backgroundColor="red" height="36px" width="25%" />
+        <Stack backgroundColor="green" height="36px" width="50%" />
+        <Stack backgroundColor="blue" height="36px" width="25%" />
+      </Stack>
+    `);
+        const isOverflown = yield (0, component_test_helpers_1.overflows)(page.getByTestId("stack"), "x");
+        (0, fixtures_1.expect)(isOverflown).toEqual(true);
+    }));
+    // (horizontal) gaps + star sizing -> gaps don't push the content out of the container
+    (0, fixtures_1.test)("(horizontal) gaps + star sizing", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        yield initTestBed(`
+      <Stack testId="stack" orientation="horizontal" backgroundColor="lightgray" padding="1rem" gap="2rem">
+        <Stack backgroundColor="red" height="36px" width="*" />
+        <Stack backgroundColor="green" height="36px" width="*" />
+        <Stack backgroundColor="blue" height="36px" width="*" />
+        <Stack backgroundColor="purple" height="36px" width="*" />
+      </Stack>
+    `);
+        const isOverflown = yield (0, component_test_helpers_1.overflows)(page.getByTestId("stack"), "x");
+        (0, fixtures_1.expect)(isOverflown).toEqual(false);
+    }));
+    (0, fixtures_1.test)("(horizontal) rtl rendering direction", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        yield initTestBed(`
+      <Stack testId="stack" orientation="horizontal" gap="1rem" direction="rtl">
+        <Stack testId="item_0" backgroundColor="red" height="36px" width="36px" />
+        <Stack testId="item_1" backgroundColor="green" height="36px" width="36px" />
+        <Stack testId="item_2" backgroundColor="blue" height="36px" width="36px" />
+      </Stack>
+    `);
+        const { right: stackRight } = yield (0, component_test_helpers_1.getBounds)(page.getByTestId("stack"));
+        const { right: itemRight0, left: itemLeft0 } = yield (0, component_test_helpers_1.getBounds)(page.getByTestId("item_0"));
+        const { left: itemLeft1 } = yield (0, component_test_helpers_1.getBounds)(page.getByTestId("item_1"));
+        const { left: itemLeft2 } = yield (0, component_test_helpers_1.getBounds)(page.getByTestId("item_2"));
+        (0, fixtures_1.expect)(itemLeft2).toBeLessThan(itemLeft1);
+        (0, fixtures_1.expect)(itemLeft1).toBeLessThan(itemLeft0);
+        (0, fixtures_1.expect)(itemRight0).toEqual(stackRight);
+    }));
+    (0, fixtures_1.test)("(horizontal) reverse rendering direction", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        yield initTestBed(`
+      <Stack testId="stack" orientation="horizontal" gap="1rem" reverse="true">
+        <Stack testId="item_0" backgroundColor="red" height="36px" width="36px" />
+        <Stack testId="item_1" backgroundColor="green" height="36px" width="36px" />
+        <Stack testId="item_2" backgroundColor="blue" height="36px" width="36px" />
+      </Stack>
+    `);
+        const { right: stackRight } = yield (0, component_test_helpers_1.getBounds)(page.getByTestId("stack"));
+        const { right: itemRight0, left: itemLeft0 } = yield (0, component_test_helpers_1.getBounds)(page.getByTestId("item_0"));
+        const { left: itemLeft1 } = yield (0, component_test_helpers_1.getBounds)(page.getByTestId("item_1"));
+        const { left: itemLeft2 } = yield (0, component_test_helpers_1.getBounds)(page.getByTestId("item_2"));
+        (0, fixtures_1.expect)(itemLeft2).toBeLessThan(itemLeft1);
+        (0, fixtures_1.expect)(itemLeft1).toBeLessThan(itemLeft0);
+        (0, fixtures_1.expect)(itemRight0).toEqual(stackRight);
+    }));
+    (0, fixtures_1.test)("(vertical) reverse rendering direction", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        yield initTestBed(`
+      <Stack testId="stack" orientation="vertical" gap="1rem" reverse="true">
+        <Stack testId="item_0" backgroundColor="red" height="36px" width="36px" />
+        <Stack testId="item_1" backgroundColor="green" height="36px" width="36px" />
+        <Stack testId="item_2" backgroundColor="blue" height="36px" width="36px" />
+      </Stack>
+    `);
+        const { bottom: stackBottom } = yield (0, component_test_helpers_1.getBounds)(page.getByTestId("stack"));
+        const { bottom: itemBottom0, top: itemTop0 } = yield (0, component_test_helpers_1.getBounds)(page.getByTestId("item_0"));
+        const { top: itemTop1 } = yield (0, component_test_helpers_1.getBounds)(page.getByTestId("item_1"));
+        const { top: itemTop2 } = yield (0, component_test_helpers_1.getBounds)(page.getByTestId("item_2"));
+        (0, fixtures_1.expect)(itemTop2).toBeLessThan(itemTop1);
+        (0, fixtures_1.expect)(itemTop1).toBeLessThan(itemTop0);
+        (0, fixtures_1.expect)(itemBottom0).toEqual(stackBottom);
+    }));
+    (0, fixtures_1.test)("(horizontal) content wrapping", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        yield initTestBed(`
+      <Stack testId="stack" orientation="horizontal" gap="1rem" wrapContent="true">
+        <Stack testId="item_0" backgroundColor="red" height="36px" width="25%" />
+        <Stack testId="item_1" backgroundColor="green" height="36px" width="40%" />
+        <Stack testId="item_2" backgroundColor="blue" height="36px" width="20%" />
+        <Stack testId="item_3" backgroundColor="purple" height="36px" width="30%" />
+      </Stack>
+    `);
+        const { right: stackRight, bottom: stackBottom } = yield (0, component_test_helpers_1.getBounds)(page.getByTestId("stack"));
+        const { left: itemLeft0, bottom: itemBottom0 } = yield (0, component_test_helpers_1.getBounds)(page.getByTestId("item_0"));
+        const { left: itemLeft1 } = yield (0, component_test_helpers_1.getBounds)(page.getByTestId("item_1"));
+        const { left: itemLeft2, right: itemRight2 } = yield (0, component_test_helpers_1.getBounds)(page.getByTestId("item_2"));
+        const { left: itemLeft3, bottom: itemBottom3, top: itemTop3, } = yield (0, component_test_helpers_1.getBounds)(page.getByTestId("item_3"));
+        (0, fixtures_1.expect)(itemLeft0).toBeLessThan(itemLeft1);
+        (0, fixtures_1.expect)(itemLeft1).toBeLessThan(itemLeft2);
+        (0, fixtures_1.expect)(itemRight2).toBeLessThan(stackRight);
+        (0, fixtures_1.expect)(itemBottom0).toBeLessThan(itemTop3);
+        (0, fixtures_1.expect)(itemLeft3).toEqual(itemLeft0);
+        (0, fixtures_1.expect)(itemBottom3).toEqual(stackBottom);
+    }));
+    (0, fixtures_1.test)("(horizontal) horizontalAlignment center", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        yield initTestBed(`
+      <Stack testId="stack" orientation="horizontal" horizontalAlignment="center" gap="0">
+        <Stack testId="item_0" backgroundColor="red" height="36px" width="36px" />
+        <Stack testId="item_1" backgroundColor="green" height="36px" width="36px" />
+        <Stack testId="item_2" backgroundColor="blue" height="36px" width="36px" />
+      </Stack>
+    `);
+        const { right: stackRight } = yield (0, component_test_helpers_1.getBounds)(page.getByTestId("stack"));
+        const { left: itemLeft0 } = yield (0, component_test_helpers_1.getBounds)(page.getByTestId("item_0"));
+        const { right: itemRight2 } = yield (0, component_test_helpers_1.getBounds)(page.getByTestId("item_2"));
+        const itemWidthSum = 3 * 36;
+        (0, fixtures_1.expect)(itemLeft0).toEqual(stackRight / 2 - itemWidthSum / 2);
+        (0, fixtures_1.expect)(itemRight2).toEqual(stackRight / 2 + itemWidthSum / 2);
+    }));
+    (0, fixtures_1.test)("(vertical) horizontal alignment end", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        yield initTestBed(`
+      <Stack testId="stack" orientation="vertical" horizontalAlignment="end" gap="0">
+        <Stack testId="item_0" backgroundColor="red" height="36px" width="36px" />
+        <Stack testId="item_1" backgroundColor="green" height="36px" width="36px" />
+        <Stack testId="item_2" backgroundColor="blue" height="36px" width="36px" />
+      </Stack>
+    `);
+        const { right: stackRight } = yield (0, component_test_helpers_1.getBounds)(page.getByTestId("stack"));
+        const { right: itemRight0 } = yield (0, component_test_helpers_1.getBounds)(page.getByTestId("item_0"));
+        const { right: itemRight1 } = yield (0, component_test_helpers_1.getBounds)(page.getByTestId("item_1"));
+        const { right: itemRight2 } = yield (0, component_test_helpers_1.getBounds)(page.getByTestId("item_2"));
+        (0, fixtures_1.expect)(itemRight0).toEqual(stackRight);
+        (0, fixtures_1.expect)(itemRight1).toEqual(stackRight);
+        (0, fixtures_1.expect)(itemRight2).toEqual(stackRight);
+    }));
+    (0, fixtures_1.test)("(horizontal) verticalAlignment center", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        yield initTestBed(`
+      <Stack testId="stack" orientation="horizontal" gap="1rem" verticalAlignment="center">
+        <Stack testId="item_0" backgroundColor="red" height="36px" width="36px" />
+        <Stack testId="item_1" backgroundColor="green" height="72px" width="36px" />
+        <Stack testId="item_2" backgroundColor="blue" height="48px" width="36px" />
+      </Stack>
+    `);
+        const stackDims = yield (0, component_test_helpers_1.getBounds)(page.getByTestId("stack"));
+        const itemDims0 = yield (0, component_test_helpers_1.getBounds)(page.getByTestId("item_0"));
+        const itemDims1 = yield (0, component_test_helpers_1.getBounds)(page.getByTestId("item_1"));
+        const itemDims2 = yield (0, component_test_helpers_1.getBounds)(page.getByTestId("item_2"));
+        (0, fixtures_1.expect)(itemDims0.top).toEqual(stackDims.height / 2 - itemDims0.height / 2);
+        (0, fixtures_1.expect)(itemDims0.bottom).toEqual(stackDims.height / 2 + itemDims0.height / 2);
+        (0, fixtures_1.expect)(itemDims1.top).toEqual(stackDims.top);
+        (0, fixtures_1.expect)(itemDims1.bottom).toEqual(stackDims.bottom);
+        (0, fixtures_1.expect)(itemDims2.top).toEqual(stackDims.height / 2 - itemDims2.height / 2);
+        (0, fixtures_1.expect)(itemDims2.bottom).toEqual(stackDims.height / 2 + itemDims2.height / 2);
+    }));
+    (0, fixtures_1.test)(`overflowY="scroll"`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        yield initTestBed(`
+      <VStack testId="stack" width="100px" height="60px" backgroundColor="cyan"
+        overflowY="scroll">
+        <Text testId="item0">
+          As its container width and height are fixed, this long text does not
+          fit into it; it will overflow.
+        </Text>
+      </VStack>
+    `);
+        const { scrollHeight, clientHeight } = yield page
+            .getByTestId("stack")
+            .evaluate((elem) => ({ scrollHeight: elem.scrollHeight, clientHeight: elem.clientHeight }));
+        (0, fixtures_1.expect)(scrollHeight).toBeGreaterThan(clientHeight);
+    }));
+    (0, fixtures_1.test)(`overflowX="scroll"`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        yield initTestBed(`
+      <HStack testId="stack" width="100px" height="60px" backgroundColor="cyan"
+        overflowX="scroll">
+        <Text testId="item0">
+          As its container width and height are fixed, this long text does not
+          fit into it; it will overflow.
+        </Text>
+      </HStack>
+    `);
+        const { scrollWidth, clientWidth } = yield page
+            .getByTestId("stack")
+            .evaluate((elem) => ({ scrollWidth: elem.scrollWidth, clientWidth: elem.clientWidth }));
+        (0, fixtures_1.expect)(scrollWidth).toBeGreaterThan(clientWidth);
+    }));
+    // When you set overflowX to scroll, it will automatically set overflowY to scroll if the text exceeds the viewport vertically
+    (0, fixtures_1.test)(`overflowX sets overflowY`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        yield initTestBed(`
+      <VStack testId="stack" height="50px" width="300px" backgroundColor="cyan"
+        overflowX="scroll">
+        <Text width="400px" backgroundColor="silver" opacity="0.8">
+          This text sets its size explicitly bigger than its container.
+          As it does not fit into the container's viewport, it overflows.
+          However, its container supports horizontal scrolling so you can
+          see its content.
+        </Text>
+      </VStack>
+    `);
+        const { scrollHeight, clientHeight, scrollWidth, clientWidth } = yield page
+            .getByTestId("stack")
+            .evaluate((elem) => ({
+            scrollHeight: elem.scrollHeight,
+            clientHeight: elem.clientHeight,
+            scrollWidth: elem.scrollWidth,
+            clientWidth: elem.clientWidth,
+        }));
+        (0, fixtures_1.expect)(scrollWidth).toBeGreaterThan(clientWidth);
+        (0, fixtures_1.expect)(scrollHeight).toBeGreaterThan(clientHeight);
+    }));
+});