xmlui 0.11.3 → 0.11.6

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

@@ -1,654 +0,0 @@
-"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);
-    }));
-});