npm - xmlui - Versions diffs - 0.10.13 → 0.10.15 - Mend

xmlui 0.10.13 → 0.10.15

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (217) hide show

package/dist/scripts/src/components/Badge/Badge.spec.js ADDED Viewed

@@ -0,0 +1,2214 @@
+"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 component_test_helpers_1 = require("../../testing/component-test-helpers");
+const fixtures_1 = require("../../testing/fixtures");
+fixtures_1.test.describe("Basic Functionality For All Variants", () => {
+    (0, fixtures_1.test)("Component can render", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        yield initTestBed(`<Badge testId="badge" />`);
+        yield (0, fixtures_1.expect)(page.getByTestId("badge")).toBeVisible();
+    }));
+});
+// =============================================================================
+// BADGE TESTS
+// =============================================================================
+fixtures_1.test.describe("Badge-specific Functionality", () => {
+    (0, fixtures_1.test)("colorMap background", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        const EXPECTED_BG_COLOR_IMP = "rgb(255, 0, 0)";
+        const EXPECTED_BG_COLOR_REG = "rgb(255, 255, 0)";
+        yield initTestBed(`
+      <Fragment>
+        <variable name="simpleColorMap"
+          value="{{ important: '${EXPECTED_BG_COLOR_IMP}', regular: '${EXPECTED_BG_COLOR_REG}' }}" />
+        <Badge testId="badgeImp" value="important" colorMap="{simpleColorMap}" />
+        <Badge testId="badgeReg" value="regular" colorMap="{simpleColorMap}" />
+      </Fragment>
+    `);
+        yield (0, fixtures_1.expect)(page.getByTestId("badgeImp")).toHaveCSS("background-color", EXPECTED_BG_COLOR_IMP);
+        yield (0, fixtures_1.expect)(page.getByTestId("badgeReg")).toHaveCSS("background-color", EXPECTED_BG_COLOR_REG);
+    }));
+    (0, fixtures_1.test)("colorMap background and label", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        const EXPECTED_TEXT_COLOR_IMP = "rgb(255, 0, 0)";
+        const EXPECTED_BG_COLOR_IMP = "rgb(0, 255, 0)";
+        const EXPECTED_TEXT_COLOR_REG = "rgb(0, 0, 255)";
+        const EXPECTED_BG_COLOR_REG = "rgb(255, 255, 0)";
+        yield initTestBed(`
+      <Fragment>
+        <variable name="simpleColorMap"
+          value="{{
+            important: {label: '${EXPECTED_TEXT_COLOR_IMP}', background: '${EXPECTED_BG_COLOR_IMP}'},
+            regular: {label: '${EXPECTED_TEXT_COLOR_REG}', background: '${EXPECTED_BG_COLOR_REG}'} }}"
+        />
+        <Badge testId="badgeImp" value="important" colorMap="{simpleColorMap}" />
+        <Badge testId="badgeReg" value="regular" colorMap="{simpleColorMap}" />
+      </Fragment>
+    `);
+        yield (0, fixtures_1.expect)(page.getByTestId("badgeImp")).toHaveCSS("background-color", EXPECTED_BG_COLOR_IMP);
+        yield (0, fixtures_1.expect)(page.getByTestId("badgeImp")).toHaveCSS("color", EXPECTED_TEXT_COLOR_IMP);
+        yield (0, fixtures_1.expect)(page.getByTestId("badgeReg")).toHaveCSS("background-color", EXPECTED_BG_COLOR_REG);
+        yield (0, fixtures_1.expect)(page.getByTestId("badgeReg")).toHaveCSS("color", EXPECTED_TEXT_COLOR_REG);
+    }));
+});
+// =============================================================================
+// PILL TESTS
+// =============================================================================
+fixtures_1.test.describe("Pill-specific Functionality", () => {
+    (0, fixtures_1.test)("Is pill shaped", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        yield initTestBed(`<Badge variant="pill" testId="badge" />`);
+        const { width, height } = yield (0, component_test_helpers_1.getBounds)(page.getByTestId("badge"));
+        const smaller = Math.min(width, height);
+        const minRadius = smaller / 2;
+        const { borderRadius } = yield (0, component_test_helpers_1.getStyles)(page.getByTestId("badge"), "border-radius");
+        const radius = parseInt(borderRadius, 10);
+        (0, fixtures_1.expect)(radius).toBeGreaterThanOrEqual(minRadius);
+    }));
+    (0, fixtures_1.test)("fontSize", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createBadgeDriver }) {
+        const EXPECTED_FONT_SIZE = "18px";
+        yield initTestBed(`<Badge variant="pill" value="test content" />`, {
+            testThemeVars: {
+                "fontSize-Badge-pill": EXPECTED_FONT_SIZE,
+            },
+        });
+        const component = (yield createBadgeDriver()).component;
+        yield (0, fixtures_1.expect)(component).toHaveCSS("font-size", EXPECTED_FONT_SIZE);
+    }));
+    (0, fixtures_1.test)("fontWeight", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createBadgeDriver }) {
+        const EXPECTED_FONT_WEIGHT = "700";
+        yield initTestBed(`<Badge variant="pill" value="test content" />`, {
+            testThemeVars: {
+                "fontWeight-Badge-pill": EXPECTED_FONT_WEIGHT,
+            },
+        });
+        const component = (yield createBadgeDriver()).component;
+        yield (0, fixtures_1.expect)(component).toHaveCSS("font-weight", EXPECTED_FONT_WEIGHT);
+    }));
+});
+// =============================================================================
+// VISUAL STATE TESTS
+// =============================================================================
+fixtures_1.test.describe("Theme Vars: Badge", () => {
+    (0, fixtures_1.test)("backgroundColor", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        const EXPECTED_BG_COLOR = "rgb(255, 0, 0)";
+        yield initTestBed(`<Badge variant="badge" testId="badge" value="test content"/>`, {
+            testThemeVars: {
+                "backgroundColor-Badge": EXPECTED_BG_COLOR,
+            },
+        });
+        yield (0, fixtures_1.expect)(page.getByTestId("badge")).toHaveCSS("background-color", EXPECTED_BG_COLOR);
+    }));
+    (0, fixtures_1.test)("textColor", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        const EXPECTED_TEXT_COLOR = "rgb(255, 0, 0)";
+        yield initTestBed(`<Badge variant="badge" testId="badge" value="test content"/>`, {
+            testThemeVars: {
+                "textColor-Badge": EXPECTED_TEXT_COLOR,
+            },
+        });
+        yield (0, fixtures_1.expect)(page.getByTestId("badge")).toHaveCSS("color", EXPECTED_TEXT_COLOR);
+    }));
+    (0, fixtures_1.test)("border", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createBadgeDriver }) {
+        const EXPECTED_COLOR = "rgb(255, 0, 0)";
+        const EXPECTED_WIDTH = "5px";
+        const EXPECTED_STYLE = "dotted";
+        yield initTestBed(`<Badge variant="badge" value="test content"/>`, {
+            testThemeVars: {
+                "border-Badge": `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
+            },
+        });
+        const component = (yield createBadgeDriver()).component;
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-style", EXPECTED_STYLE);
+    }));
+    (0, fixtures_1.test)("borderLeft", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createBadgeDriver }) {
+        const EXPECTED_COLOR = "rgb(255, 0, 0)";
+        const EXPECTED_WIDTH = "5px";
+        const EXPECTED_STYLE = "dotted";
+        yield initTestBed(`<Badge variant="badge" value="test content"/>`, {
+            testThemeVars: {
+                "borderLeft-Badge": `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
+            },
+        });
+        const component = (yield createBadgeDriver()).component;
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-top-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-top-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-top-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-right-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-right-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-right-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-bottom-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-bottom-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-bottom-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-style", EXPECTED_STYLE);
+    }));
+    (0, fixtures_1.test)("borderRight", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createBadgeDriver }) {
+        const EXPECTED_COLOR = "rgb(255, 0, 0)";
+        const EXPECTED_WIDTH = "5px";
+        const EXPECTED_STYLE = "dotted";
+        yield initTestBed(`<Badge variant="badge" value="test content"/>`, {
+            testThemeVars: {
+                "borderRight-Badge": `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
+            },
+        });
+        const component = (yield createBadgeDriver()).component;
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-top-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-top-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-top-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-bottom-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-bottom-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-bottom-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-left-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-left-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-left-style", EXPECTED_STYLE);
+    }));
+    (0, fixtures_1.test)("borderHorizontal", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createBadgeDriver }) {
+        const EXPECTED_COLOR = "rgb(255, 0, 0)";
+        const EXPECTED_WIDTH = "5px";
+        const EXPECTED_STYLE = "dotted";
+        yield initTestBed(`<Badge variant="badge" value="test content"/>`, {
+            testThemeVars: {
+                "borderHorizontal-Badge": `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
+            },
+        });
+        const component = (yield createBadgeDriver()).component;
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-top-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-top-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-top-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-bottom-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-bottom-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-bottom-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-style", EXPECTED_STYLE);
+    }));
+    (0, fixtures_1.test)("borderHorizontal and borderLeft", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createBadgeDriver }) {
+        const EXPECTED_COLOR = "rgb(255, 0, 0)";
+        const EXPECTED_WIDTH = "5px";
+        const EXPECTED_STYLE = "dotted";
+        yield initTestBed(`<Badge variant="badge" value="test content"/>`, {
+            testThemeVars: {
+                "borderHorizontal-Badge": `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
+                "borderLeft-Badge": "8px double rgb(0, 128, 0)",
+            },
+        });
+        const component = (yield createBadgeDriver()).component;
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-top-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-top-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-top-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-bottom-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-bottom-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-bottom-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-color", "rgb(0, 128, 0)");
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-width", "8px");
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-style", "double");
+    }));
+    (0, fixtures_1.test)("borderHorizontal and borderRight", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createBadgeDriver }) {
+        const EXPECTED_COLOR = "rgb(255, 0, 0)";
+        const EXPECTED_WIDTH = "5px";
+        const EXPECTED_STYLE = "dotted";
+        yield initTestBed(`<Badge variant="badge" value="test content"/>`, {
+            testThemeVars: {
+                "borderHorizontal-Badge": `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
+                "borderRight-Badge": "8px double rgb(0, 128, 0)",
+            },
+        });
+        const component = (yield createBadgeDriver()).component;
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-top-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-top-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-top-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-color", "rgb(0, 128, 0)");
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-width", "8px");
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-style", "double");
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-bottom-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-bottom-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-bottom-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-style", EXPECTED_STYLE);
+    }));
+    (0, fixtures_1.test)("borderTop", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createBadgeDriver }) {
+        const EXPECTED_COLOR = "rgb(255, 0, 0)";
+        const EXPECTED_WIDTH = "5px";
+        const EXPECTED_STYLE = "dotted";
+        yield initTestBed(`<Badge variant="badge" value="test content"/>`, {
+            testThemeVars: {
+                "borderTop-Badge": `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
+            },
+        });
+        const component = (yield createBadgeDriver()).component;
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-right-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-right-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-right-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-bottom-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-bottom-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-bottom-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-left-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-left-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-left-style", EXPECTED_STYLE);
+    }));
+    (0, fixtures_1.test)("borderBottom", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createBadgeDriver }) {
+        const EXPECTED_COLOR = "rgb(255, 0, 0)";
+        const EXPECTED_WIDTH = "5px";
+        const EXPECTED_STYLE = "dotted";
+        yield initTestBed(`<Badge variant="badge" value="test content"/>`, {
+            testThemeVars: {
+                "borderBottom-Badge": `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
+            },
+        });
+        const component = (yield createBadgeDriver()).component;
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-top-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-top-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-top-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-right-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-right-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-right-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-left-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-left-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-left-style", EXPECTED_STYLE);
+    }));
+    (0, fixtures_1.test)("borderVertical", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createBadgeDriver }) {
+        const EXPECTED_COLOR = "rgb(255, 0, 0)";
+        const EXPECTED_WIDTH = "5px";
+        const EXPECTED_STYLE = "dotted";
+        yield initTestBed(`<Badge variant="badge" value="test content"/>`, {
+            testThemeVars: {
+                "borderVertical-Badge": `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
+            },
+        });
+        const component = (yield createBadgeDriver()).component;
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-right-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-right-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-right-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-left-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-left-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-left-style", EXPECTED_STYLE);
+    }));
+    (0, fixtures_1.test)("borderVertical and borderTop", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createBadgeDriver }) {
+        const EXPECTED_COLOR = "rgb(255, 0, 0)";
+        const EXPECTED_WIDTH = "5px";
+        const EXPECTED_STYLE = "dotted";
+        yield initTestBed(`<Badge variant="badge" value="test content"/>`, {
+            testThemeVars: {
+                "borderVertical-Badge": `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
+                "borderTop-Badge": "8px double rgb(0, 128, 0)",
+            },
+        });
+        const component = (yield createBadgeDriver()).component;
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-color", "rgb(0, 128, 0)");
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-width", "8px");
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-style", "double");
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-right-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-right-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-right-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-left-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-left-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-left-style", EXPECTED_STYLE);
+    }));
+    (0, fixtures_1.test)("borderVertical and border-bottom", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createBadgeDriver }) {
+        const EXPECTED_COLOR = "rgb(255, 0, 0)";
+        const EXPECTED_WIDTH = "5px";
+        const EXPECTED_STYLE = "dotted";
+        yield initTestBed(`<Badge variant="badge" value="test content"/>`, {
+            testThemeVars: {
+                "borderVertical-Badge": `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
+                "borderBottom-Badge": "8px double rgb(0, 128, 0)",
+            },
+        });
+        const component = (yield createBadgeDriver()).component;
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-right-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-right-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-right-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-color", "rgb(0, 128, 0)");
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-width", "8px");
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-style", "double");
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-left-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-left-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-left-style", EXPECTED_STYLE);
+    }));
+    (0, fixtures_1.test)("border-color", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createBadgeDriver }) {
+        const EXPECTED_COLOR = "rgb(0, 128, 0)";
+        const EXPECTED_WIDTH = "5px";
+        const EXPECTED_STYLE = "dotted";
+        yield initTestBed(`<Badge variant="badge" value="test content"/>`, {
+            testThemeVars: {
+                "borderColor-Badge": EXPECTED_COLOR,
+            },
+        });
+        const component = (yield createBadgeDriver()).component;
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-top-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-top-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-right-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-right-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-bottom-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-bottom-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-left-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-left-style", EXPECTED_STYLE);
+    }));
+    (0, fixtures_1.test)("border, border-color", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createBadgeDriver }) {
+        const EXPECTED_COLOR = "rgb(255, 0, 0)";
+        const EXPECTED_WIDTH = "5px";
+        const EXPECTED_STYLE = "dotted";
+        const UPDATED = "rgb(0, 128, 0)";
+        yield initTestBed(`<Badge variant="badge" value="test content"/>`, {
+            testThemeVars: {
+                "borderColor-Badge": UPDATED,
+                "border-Badge": `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
+            },
+        });
+        const component = (yield createBadgeDriver()).component;
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-color", UPDATED);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-color", UPDATED);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-color", UPDATED);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-color", UPDATED);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-style", EXPECTED_STYLE);
+    }));
+    (0, fixtures_1.test)("border, border-color-horizontal", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createBadgeDriver }) {
+        const EXPECTED_COLOR = "rgb(255, 0, 0)";
+        const EXPECTED_WIDTH = "5px";
+        const EXPECTED_STYLE = "dotted";
+        const UPDATED = "rgb(0, 128, 0)";
+        yield initTestBed(`<Badge variant="badge" value="test content"/>`, {
+            testThemeVars: {
+                "borderHorizontalColor-Badge": UPDATED,
+                "border-Badge": `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
+            },
+        });
+        const component = (yield createBadgeDriver()).component;
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-color", UPDATED);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-color", UPDATED);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-style", EXPECTED_STYLE);
+    }));
+    (0, fixtures_1.test)("border, border-color-left", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createBadgeDriver }) {
+        const EXPECTED_COLOR = "rgb(255, 0, 0)";
+        const EXPECTED_WIDTH = "5px";
+        const EXPECTED_STYLE = "dotted";
+        const UPDATED = "rgb(0, 128, 0)";
+        yield initTestBed(`<Badge variant="badge" value="test content"/>`, {
+            testThemeVars: {
+                "borderLeftColor-Badge": UPDATED,
+                "border-Badge": `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
+            },
+        });
+        const component = (yield createBadgeDriver()).component;
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-color", UPDATED);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-style", EXPECTED_STYLE);
+    }));
+    (0, fixtures_1.test)("border, border-color-right", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createBadgeDriver }) {
+        const EXPECTED_COLOR = "rgb(255, 0, 0)";
+        const EXPECTED_WIDTH = "5px";
+        const EXPECTED_STYLE = "dotted";
+        const UPDATED = "rgb(0, 128, 0)";
+        yield initTestBed(`<Badge variant="badge" value="test content"/>`, {
+            testThemeVars: {
+                "borderRightColor-Badge": UPDATED,
+                "border-Badge": `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
+            },
+        });
+        const component = (yield createBadgeDriver()).component;
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-color", UPDATED);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-style", EXPECTED_STYLE);
+    }));
+    (0, fixtures_1.test)("border, border-color-vertical", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createBadgeDriver }) {
+        const EXPECTED_COLOR = "rgb(255, 0, 0)";
+        const EXPECTED_WIDTH = "5px";
+        const EXPECTED_STYLE = "dotted";
+        const UPDATED = "rgb(0, 128, 0)";
+        yield initTestBed(`<Badge variant="badge" value="test content"/>`, {
+            testThemeVars: {
+                "borderVerticalColor-Badge": UPDATED,
+                "border-Badge": `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
+            },
+        });
+        const component = (yield createBadgeDriver()).component;
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-color", UPDATED);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-color", UPDATED);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-style", EXPECTED_STYLE);
+    }));
+    (0, fixtures_1.test)("border, border-color-top", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createBadgeDriver }) {
+        const EXPECTED_COLOR = "rgb(255, 0, 0)";
+        const EXPECTED_WIDTH = "5px";
+        const EXPECTED_STYLE = "dotted";
+        const UPDATED = "rgb(0, 128, 0)";
+        yield initTestBed(`<Badge variant="badge" value="test content"/>`, {
+            testThemeVars: {
+                "borderTopColor-Badge": UPDATED,
+                "border-Badge": `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
+            },
+        });
+        const component = (yield createBadgeDriver()).component;
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-color", UPDATED);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-style", EXPECTED_STYLE);
+    }));
+    (0, fixtures_1.test)("border, border-color-bottom", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createBadgeDriver }) {
+        const EXPECTED_COLOR = "rgb(255, 0, 0)";
+        const EXPECTED_WIDTH = "5px";
+        const EXPECTED_STYLE = "dotted";
+        const UPDATED = "rgb(0, 128, 0)";
+        yield initTestBed(`<Badge variant="badge" value="test content"/>`, {
+            testThemeVars: {
+                "borderBottomColor-Badge": UPDATED,
+                "border-Badge": `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
+            },
+        });
+        const component = (yield createBadgeDriver()).component;
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-color", UPDATED);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-style", EXPECTED_STYLE);
+    }));
+    (0, fixtures_1.test)("border-style", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createBadgeDriver }) {
+        const EXPECTED_COLOR = "rgb(0, 128, 0)";
+        const EXPECTED_WIDTH = "5px";
+        const EXPECTED_STYLE = "dotted";
+        yield initTestBed(`<Badge variant="badge" value="test content"/>`, {
+            testThemeVars: {
+                "borderStyle-Badge": EXPECTED_STYLE,
+            },
+        });
+        const component = (yield createBadgeDriver()).component;
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-top-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-top-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-right-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-right-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-bottom-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-bottom-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-left-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-left-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-style", EXPECTED_STYLE);
+    }));
+    (0, fixtures_1.test)("border, border-style", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createBadgeDriver }) {
+        const EXPECTED_COLOR = "rgb(255, 0, 0)";
+        const EXPECTED_WIDTH = "5px";
+        const EXPECTED_STYLE = "dotted";
+        const UPDATED = "double";
+        yield initTestBed(`<Badge variant="badge" value="test content"/>`, {
+            testThemeVars: {
+                "borderStyle-Badge": UPDATED,
+                "border-Badge": `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
+            },
+        });
+        const component = (yield createBadgeDriver()).component;
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-style", UPDATED);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-style", UPDATED);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-style", UPDATED);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-style", UPDATED);
+    }));
+    (0, fixtures_1.test)("border, border-style-horizontal", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createBadgeDriver }) {
+        const EXPECTED_COLOR = "rgb(0, 128, 0)";
+        const EXPECTED_WIDTH = "5px";
+        const EXPECTED_STYLE = "dotted";
+        const UPDATED = "double";
+        yield initTestBed(`<Badge variant="badge" value="test content"/>`, {
+            testThemeVars: {
+                "borderHorizontalStyle-Badge": UPDATED,
+                "border-Badge": `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
+            },
+        });
+        const component = (yield createBadgeDriver()).component;
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-style", UPDATED);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-style", UPDATED);
+    }));
+    (0, fixtures_1.test)("border, border-style-left", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createBadgeDriver }) {
+        const EXPECTED_COLOR = "rgb(0, 128, 0)";
+        const EXPECTED_WIDTH = "5px";
+        const EXPECTED_STYLE = "dotted";
+        const UPDATED = "double";
+        yield initTestBed(`<Badge variant="badge" value="test content"/>`, {
+            testThemeVars: {
+                "borderLeftStyle-Badge": UPDATED,
+                "border-Badge": `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
+            },
+        });
+        const component = (yield createBadgeDriver()).component;
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-style", UPDATED);
+    }));
+    (0, fixtures_1.test)("border, border-style-right", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createBadgeDriver }) {
+        const EXPECTED_COLOR = "rgb(0, 128, 0)";
+        const EXPECTED_WIDTH = "5px";
+        const EXPECTED_STYLE = "dotted";
+        const UPDATED = "double";
+        yield initTestBed(`<Badge variant="badge" value="test content"/>`, {
+            testThemeVars: {
+                "borderRightStyle-Badge": UPDATED,
+                "border-Badge": `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
+            },
+        });
+        const component = (yield createBadgeDriver()).component;
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-style", UPDATED);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-style", EXPECTED_STYLE);
+    }));
+    (0, fixtures_1.test)("border, border-style-vertical", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createBadgeDriver }) {
+        const EXPECTED_COLOR = "rgb(0, 128, 0)";
+        const EXPECTED_WIDTH = "5px";
+        const EXPECTED_STYLE = "dotted";
+        const UPDATED = "double";
+        yield initTestBed(`<Badge variant="badge" value="test content"/>`, {
+            testThemeVars: {
+                "borderVerticalStyle-Badge": UPDATED,
+                "border-Badge": `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
+            },
+        });
+        const component = (yield createBadgeDriver()).component;
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-style", UPDATED);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-style", UPDATED);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-style", EXPECTED_STYLE);
+    }));
+    (0, fixtures_1.test)("border, border-style-top", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createBadgeDriver }) {
+        const EXPECTED_COLOR = "rgb(0, 128, 0)";
+        const EXPECTED_WIDTH = "5px";
+        const EXPECTED_STYLE = "dotted";
+        const UPDATED = "double";
+        yield initTestBed(`<Badge variant="badge" value="test content"/>`, {
+            testThemeVars: {
+                "borderTopStyle-Badge": UPDATED,
+                "border-Badge": `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
+            },
+        });
+        const component = (yield createBadgeDriver()).component;
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-style", UPDATED);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-style", EXPECTED_STYLE);
+    }));
+    (0, fixtures_1.test)("border, border-style-bottom", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createBadgeDriver }) {
+        const EXPECTED_COLOR = "rgb(0, 128, 0)";
+        const EXPECTED_WIDTH = "5px";
+        const EXPECTED_STYLE = "dotted";
+        const UPDATED = "double";
+        yield initTestBed(`<Badge variant="badge" value="test content"/>`, {
+            testThemeVars: {
+                "borderBottomStyle-Badge": UPDATED,
+                "border-Badge": `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
+            },
+        });
+        const component = (yield createBadgeDriver()).component;
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-style", UPDATED);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-style", EXPECTED_STYLE);
+    }));
+    (0, fixtures_1.test)("border-thickness", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createBadgeDriver }) {
+        const EXPECTED_COLOR = "rgb(0, 128, 0)";
+        const EXPECTED_WIDTH = "8px";
+        const EXPECTED_STYLE = "dotted";
+        yield initTestBed(`<Badge variant="badge" value="test content"/>`, {
+            testThemeVars: {
+                "borderWidth-Badge": EXPECTED_WIDTH,
+            },
+        });
+        const component = (yield createBadgeDriver()).component;
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-top-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-top-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-right-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-right-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-bottom-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-bottom-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-left-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-left-style", EXPECTED_STYLE);
+    }));
+    (0, fixtures_1.test)("border, border-thickness", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createBadgeDriver }) {
+        const EXPECTED_COLOR = "rgb(255, 0, 0)";
+        const EXPECTED_WIDTH = "5px";
+        const EXPECTED_STYLE = "dotted";
+        const UPDATED = "12px";
+        yield initTestBed(`<Badge variant="badge" value="test content"/>`, {
+            testThemeVars: {
+                "borderWidth-Badge": UPDATED,
+                "border-Badge": `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
+            },
+        });
+        const component = (yield createBadgeDriver()).component;
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-width", UPDATED);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-width", UPDATED);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-width", UPDATED);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-width", UPDATED);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-style", EXPECTED_STYLE);
+    }));
+    (0, fixtures_1.test)("border, border-thickness-horizontal", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createBadgeDriver }) {
+        const EXPECTED_COLOR = "rgb(255, 0, 0)";
+        const EXPECTED_WIDTH = "5px";
+        const EXPECTED_STYLE = "dotted";
+        const UPDATED = "12px";
+        yield initTestBed(`<Badge variant="badge" value="test content"/>`, {
+            testThemeVars: {
+                "borderHorizontalWidth-Badge": UPDATED,
+                "border-Badge": `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
+            },
+        });
+        const component = (yield createBadgeDriver()).component;
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-width", UPDATED);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-width", UPDATED);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-style", EXPECTED_STYLE);
+    }));
+    (0, fixtures_1.test)("border, border-thickness-left", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createBadgeDriver }) {
+        const EXPECTED_COLOR = "rgb(255, 0, 0)";
+        const EXPECTED_WIDTH = "5px";
+        const EXPECTED_STYLE = "dotted";
+        const UPDATED = "12px";
+        yield initTestBed(`<Badge variant="badge" value="test content"/>`, {
+            testThemeVars: {
+                "borderLeftWidth-Badge": UPDATED,
+                "border-Badge": `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
+            },
+        });
+        const component = (yield createBadgeDriver()).component;
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-width", UPDATED);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-style", EXPECTED_STYLE);
+    }));
+    (0, fixtures_1.test)("border, border-thickness-right", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createBadgeDriver }) {
+        const EXPECTED_COLOR = "rgb(255, 0, 0)";
+        const EXPECTED_WIDTH = "5px";
+        const EXPECTED_STYLE = "dotted";
+        const UPDATED = "12px";
+        yield initTestBed(`<Badge variant="badge" value="test content"/>`, {
+            testThemeVars: {
+                "borderRightWidth-Badge": UPDATED,
+                "border-Badge": `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
+            },
+        });
+        const component = (yield createBadgeDriver()).component;
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-width", UPDATED);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-style", EXPECTED_STYLE);
+    }));
+    (0, fixtures_1.test)("border, border-thickness-vertical", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createBadgeDriver }) {
+        const EXPECTED_COLOR = "rgb(255, 0, 0)";
+        const EXPECTED_WIDTH = "5px";
+        const EXPECTED_STYLE = "dotted";
+        const UPDATED = "12px";
+        yield initTestBed(`<Badge variant="badge" value="test content"/>`, {
+            testThemeVars: {
+                "borderVerticalWidth-Badge": UPDATED,
+                "border-Badge": `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
+            },
+        });
+        const component = (yield createBadgeDriver()).component;
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-width", UPDATED);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-width", UPDATED);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-style", EXPECTED_STYLE);
+    }));
+    (0, fixtures_1.test)("border, border-thickness-top", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createBadgeDriver }) {
+        const EXPECTED_COLOR = "rgb(255, 0, 0)";
+        const EXPECTED_WIDTH = "5px";
+        const EXPECTED_STYLE = "dotted";
+        const UPDATED = "12px";
+        yield initTestBed(`<Badge variant="badge" value="test content"/>`, {
+            testThemeVars: {
+                "borderTopWidth-Badge": UPDATED,
+                "border-Badge": `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
+            },
+        });
+        const component = (yield createBadgeDriver()).component;
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-width", UPDATED);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-style", EXPECTED_STYLE);
+    }));
+    (0, fixtures_1.test)("border, border-thickness-bottom", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createBadgeDriver }) {
+        const EXPECTED_COLOR = "rgb(255, 0, 0)";
+        const EXPECTED_WIDTH = "5px";
+        const EXPECTED_STYLE = "dotted";
+        const UPDATED = "12px";
+        yield initTestBed(`<Badge variant="badge" value="test content"/>`, {
+            testThemeVars: {
+                "borderBottomWidth-Badge": UPDATED,
+                "border-Badge": `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
+            },
+        });
+        const component = (yield createBadgeDriver()).component;
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-width", UPDATED);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-style", EXPECTED_STYLE);
+    }));
+    (0, fixtures_1.test)("padding", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createBadgeDriver }) {
+        const EXPECTED = "100px";
+        yield initTestBed(`<Badge variant="badge" value="test content"/>`, {
+            testThemeVars: {
+                "padding-Badge": EXPECTED,
+            },
+        });
+        const component = (yield createBadgeDriver()).component;
+        yield (0, fixtures_1.expect)(component).toHaveCSS("padding-top", EXPECTED);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("padding-right", EXPECTED);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("padding-bottom", EXPECTED);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("padding-left", EXPECTED);
+    }));
+    (0, fixtures_1.test)("paddingHorizontal", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createBadgeDriver }) {
+        const EXPECTED = "100px";
+        yield initTestBed(`<Badge variant="badge" value="test content"/>`, {
+            testThemeVars: {
+                "paddingHorizontal-Badge": EXPECTED,
+            },
+        });
+        const component = (yield createBadgeDriver()).component;
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("padding-top", EXPECTED);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("padding-right", EXPECTED);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("padding-bottom", EXPECTED);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("padding-left", EXPECTED);
+    }));
+    (0, fixtures_1.test)("paddingLeft", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createBadgeDriver }) {
+        const EXPECTED = "100px";
+        yield initTestBed(`<Badge variant="badge" value="test content"/>`, {
+            testThemeVars: {
+                "paddingLeft-Badge": EXPECTED,
+            },
+        });
+        const component = (yield createBadgeDriver()).component;
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("padding-top", EXPECTED);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("padding-right", EXPECTED);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("padding-bottom", EXPECTED);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("padding-left", EXPECTED);
+    }));
+    (0, fixtures_1.test)("paddingRight", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createBadgeDriver }) {
+        const EXPECTED = "100px";
+        yield initTestBed(`<Badge variant="badge" value="test content"/>`, {
+            testThemeVars: {
+                "paddingRight-Badge": EXPECTED,
+            },
+        });
+        const component = (yield createBadgeDriver()).component;
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("padding-top", EXPECTED);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("padding-right", EXPECTED);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("padding-bottom", EXPECTED);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("padding-left", EXPECTED);
+    }));
+    (0, fixtures_1.test)("paddingVertical", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createBadgeDriver }) {
+        const EXPECTED = "100px";
+        yield initTestBed(`<Badge variant="badge" value="test content"/>`, {
+            testThemeVars: {
+                "paddingVertical-Badge": EXPECTED,
+            },
+        });
+        const component = (yield createBadgeDriver()).component;
+        yield (0, fixtures_1.expect)(component).toHaveCSS("padding-top", EXPECTED);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("padding-right", EXPECTED);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("padding-bottom", EXPECTED);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("padding-left", EXPECTED);
+    }));
+    (0, fixtures_1.test)("paddingTop", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createBadgeDriver }) {
+        const EXPECTED = "100px";
+        yield initTestBed(`<Badge variant="badge" value="test content"/>`, {
+            testThemeVars: {
+                "paddingTop-Badge": EXPECTED,
+            },
+        });
+        const component = (yield createBadgeDriver()).component;
+        yield (0, fixtures_1.expect)(component).toHaveCSS("padding-top", EXPECTED);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("padding-right", EXPECTED);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("padding-bottom", EXPECTED);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("padding-left", EXPECTED);
+    }));
+    (0, fixtures_1.test)("paddingBottom", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createBadgeDriver }) {
+        const EXPECTED = "100px";
+        yield initTestBed(`<Badge variant="badge" value="test content"/>`, {
+            testThemeVars: {
+                "paddingBottom-Badge": EXPECTED,
+            },
+        });
+        const component = (yield createBadgeDriver()).component;
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("padding-top", EXPECTED);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("padding-right", EXPECTED);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("padding-bottom", EXPECTED);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("padding-left", EXPECTED);
+    }));
+    (0, fixtures_1.test)("padding, paddingHorizontal", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createBadgeDriver }) {
+        const EXPECTED = "100px";
+        const UPDATED = "48px";
+        yield initTestBed(`<Badge variant="badge" value="test content"/>`, {
+            testThemeVars: {
+                "padding-Badge": EXPECTED,
+                "paddingHorizontal-Badge": UPDATED,
+            },
+        });
+        const component = (yield createBadgeDriver()).component;
+        yield (0, fixtures_1.expect)(component).toHaveCSS("padding-top", EXPECTED);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("padding-right", UPDATED);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("padding-bottom", EXPECTED);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("padding-left", UPDATED);
+    }));
+    (0, fixtures_1.test)("padding, paddingLeft", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createBadgeDriver }) {
+        const EXPECTED = "100px";
+        const UPDATED = "48px";
+        yield initTestBed(`<Badge variant="badge" value="test content"/>`, {
+            testThemeVars: {
+                "padding-Badge": EXPECTED,
+                "paddingLeft-Badge": UPDATED,
+            },
+        });
+        const component = (yield createBadgeDriver()).component;
+        yield (0, fixtures_1.expect)(component).toHaveCSS("padding-top", EXPECTED);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("padding-right", EXPECTED);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("padding-bottom", EXPECTED);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("padding-left", UPDATED);
+    }));
+    (0, fixtures_1.test)("padding, paddingRight", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createBadgeDriver }) {
+        const EXPECTED = "100px";
+        const UPDATED = "48px";
+        yield initTestBed(`<Badge variant="badge" value="test content"/>`, {
+            testThemeVars: {
+                "padding-Badge": EXPECTED,
+                "paddingRight-Badge": UPDATED,
+            },
+        });
+        const component = (yield createBadgeDriver()).component;
+        yield (0, fixtures_1.expect)(component).toHaveCSS("padding-top", EXPECTED);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("padding-right", UPDATED);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("padding-bottom", EXPECTED);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("padding-left", EXPECTED);
+    }));
+    (0, fixtures_1.test)("padding, paddingVertical", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createBadgeDriver }) {
+        const EXPECTED = "100px";
+        const UPDATED = "48px";
+        yield initTestBed(`<Badge variant="badge" value="test content"/>`, {
+            testThemeVars: {
+                "padding-Badge": EXPECTED,
+                "paddingVertical-Badge": UPDATED,
+            },
+        });
+        const component = (yield createBadgeDriver()).component;
+        yield (0, fixtures_1.expect)(component).toHaveCSS("padding-top", UPDATED);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("padding-right", EXPECTED);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("padding-bottom", UPDATED);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("padding-left", EXPECTED);
+    }));
+    (0, fixtures_1.test)("padding, paddingTop", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createBadgeDriver }) {
+        const EXPECTED = "100px";
+        const UPDATED = "48px";
+        yield initTestBed(`<Badge variant="badge" value="test content"/>`, {
+            testThemeVars: {
+                "padding-Badge": EXPECTED,
+                "paddingTop-Badge": UPDATED,
+            },
+        });
+        const component = (yield createBadgeDriver()).component;
+        yield (0, fixtures_1.expect)(component).toHaveCSS("padding-top", UPDATED);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("padding-right", EXPECTED);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("padding-bottom", EXPECTED);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("padding-left", EXPECTED);
+    }));
+    (0, fixtures_1.test)("padding, paddingBottom", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createBadgeDriver }) {
+        const EXPECTED = "100px";
+        const UPDATED = "48px";
+        yield initTestBed(`<Badge variant="badge" value="test content"/>`, {
+            testThemeVars: {
+                "padding-Badge": EXPECTED,
+                "paddingBottom-Badge": UPDATED,
+            },
+        });
+        const component = (yield createBadgeDriver()).component;
+        yield (0, fixtures_1.expect)(component).toHaveCSS("padding-top", EXPECTED);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("padding-right", EXPECTED);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("padding-bottom", UPDATED);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("padding-left", EXPECTED);
+    }));
+});
+fixtures_1.test.describe("Theme Vars: Pill", () => {
+    (0, fixtures_1.test)("pill: padding", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createBadgeDriver }) {
+        const EXPECTED_PADDING = "12px";
+        yield initTestBed(`<Badge variant="pill" value="test content"/>`, {
+            testThemeVars: {
+                "padding-Badge-pill": EXPECTED_PADDING,
+            },
+        });
+        const component = (yield createBadgeDriver()).component;
+        yield (0, fixtures_1.expect)(component).toHaveCSS("padding", EXPECTED_PADDING);
+    }));
+    (0, fixtures_1.test)("pill: paddingHorizontal", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createBadgeDriver }) {
+        const EXPECTED_PADDING_HORIZONTAL = "6px";
+        yield initTestBed(`<Badge variant="pill" value="test content"/>`, {
+            testThemeVars: {
+                "paddingHorizontal-Badge-pill": EXPECTED_PADDING_HORIZONTAL,
+            },
+        });
+        const component = (yield createBadgeDriver()).component;
+        yield (0, fixtures_1.expect)(component).toHaveCSS("padding-left", EXPECTED_PADDING_HORIZONTAL);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("padding-right", EXPECTED_PADDING_HORIZONTAL);
+    }));
+    (0, fixtures_1.test)("pill: paddingVertical", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createBadgeDriver }) {
+        const EXPECTED_PADDING_VERTICAL = "8px";
+        yield initTestBed(`<Badge variant="pill" value="test content"/>`, {
+            testThemeVars: {
+                "paddingVertical-Badge-pill": EXPECTED_PADDING_VERTICAL,
+            },
+        });
+        const component = (yield createBadgeDriver()).component;
+        yield (0, fixtures_1.expect)(component).toHaveCSS("padding-top", EXPECTED_PADDING_VERTICAL);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("padding-bottom", EXPECTED_PADDING_VERTICAL);
+    }));
+    (0, fixtures_1.test)("border", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createBadgeDriver }) {
+        const EXPECTED_COLOR = "rgb(255, 0, 0)";
+        const EXPECTED_WIDTH = "5px";
+        const EXPECTED_STYLE = "dotted";
+        yield initTestBed(`<Badge variant="pill" value="test content"/>`, {
+            testThemeVars: {
+                "border-Badge-pill": `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
+            },
+        });
+        const component = (yield createBadgeDriver()).component;
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-style", EXPECTED_STYLE);
+    }));
+    (0, fixtures_1.test)("borderLeft", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createBadgeDriver }) {
+        const EXPECTED_COLOR = "rgb(255, 0, 0)";
+        const EXPECTED_WIDTH = "5px";
+        const EXPECTED_STYLE = "dotted";
+        yield initTestBed(`<Badge variant="pill" value="test content"/>`, {
+            testThemeVars: {
+                "borderLeft-Badge-pill": `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
+            },
+        });
+        const component = (yield createBadgeDriver()).component;
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-top-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-top-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-top-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-right-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-right-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-right-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-bottom-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-bottom-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-bottom-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-style", EXPECTED_STYLE);
+    }));
+    (0, fixtures_1.test)("borderRight", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createBadgeDriver }) {
+        const EXPECTED_COLOR = "rgb(255, 0, 0)";
+        const EXPECTED_WIDTH = "5px";
+        const EXPECTED_STYLE = "dotted";
+        yield initTestBed(`<Badge variant="pill" value="test content"/>`, {
+            testThemeVars: {
+                "borderRight-Badge-pill": `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
+            },
+        });
+        const component = (yield createBadgeDriver()).component;
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-top-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-top-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-top-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-bottom-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-bottom-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-bottom-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-left-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-left-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-left-style", EXPECTED_STYLE);
+    }));
+    (0, fixtures_1.test)("borderHorizontal", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createBadgeDriver }) {
+        const EXPECTED_COLOR = "rgb(255, 0, 0)";
+        const EXPECTED_WIDTH = "5px";
+        const EXPECTED_STYLE = "dotted";
+        yield initTestBed(`<Badge variant="pill" value="test content"/>`, {
+            testThemeVars: {
+                "borderHorizontal-Badge-pill": `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
+            },
+        });
+        const component = (yield createBadgeDriver()).component;
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-top-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-top-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-top-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-bottom-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-bottom-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-bottom-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-style", EXPECTED_STYLE);
+    }));
+    (0, fixtures_1.test)("borderHorizontal and borderLeft", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createBadgeDriver }) {
+        const EXPECTED_COLOR = "rgb(255, 0, 0)";
+        const EXPECTED_WIDTH = "5px";
+        const EXPECTED_STYLE = "dotted";
+        yield initTestBed(`<Badge variant="pill" value="test content"/>`, {
+            testThemeVars: {
+                "borderHorizontal-Badge-pill": `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
+                "borderLeft-Badge-pill": "8px double rgb(0, 128, 0)",
+            },
+        });
+        const component = (yield createBadgeDriver()).component;
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-top-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-top-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-top-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-bottom-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-bottom-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-bottom-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-color", "rgb(0, 128, 0)");
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-width", "8px");
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-style", "double");
+    }));
+    (0, fixtures_1.test)("borderHorizontal and borderRight", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createBadgeDriver }) {
+        const EXPECTED_COLOR = "rgb(255, 0, 0)";
+        const EXPECTED_WIDTH = "5px";
+        const EXPECTED_STYLE = "dotted";
+        yield initTestBed(`<Badge variant="pill" value="test content"/>`, {
+            testThemeVars: {
+                "borderHorizontal-Badge-pill": `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
+                "borderRight-Badge-pill": "8px double rgb(0, 128, 0)",
+            },
+        });
+        const component = (yield createBadgeDriver()).component;
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-top-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-top-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-top-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-color", "rgb(0, 128, 0)");
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-width", "8px");
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-style", "double");
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-bottom-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-bottom-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-bottom-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-style", EXPECTED_STYLE);
+    }));
+    (0, fixtures_1.test)("borderTop", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createBadgeDriver }) {
+        const EXPECTED_COLOR = "rgb(255, 0, 0)";
+        const EXPECTED_WIDTH = "5px";
+        const EXPECTED_STYLE = "dotted";
+        yield initTestBed(`<Badge variant="pill" value="test content"/>`, {
+            testThemeVars: {
+                "borderTop-Badge-pill": `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
+            },
+        });
+        const component = (yield createBadgeDriver()).component;
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-right-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-right-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-right-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-bottom-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-bottom-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-bottom-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-left-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-left-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-left-style", EXPECTED_STYLE);
+    }));
+    (0, fixtures_1.test)("borderBottom", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createBadgeDriver }) {
+        const EXPECTED_COLOR = "rgb(255, 0, 0)";
+        const EXPECTED_WIDTH = "5px";
+        const EXPECTED_STYLE = "dotted";
+        yield initTestBed(`<Badge variant="pill" value="test content"/>`, {
+            testThemeVars: {
+                "borderBottom-Badge-pill": `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
+            },
+        });
+        const component = (yield createBadgeDriver()).component;
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-top-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-top-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-top-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-right-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-right-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-right-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-left-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-left-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-left-style", EXPECTED_STYLE);
+    }));
+    (0, fixtures_1.test)("borderVertical", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createBadgeDriver }) {
+        const EXPECTED_COLOR = "rgb(255, 0, 0)";
+        const EXPECTED_WIDTH = "5px";
+        const EXPECTED_STYLE = "dotted";
+        yield initTestBed(`<Badge variant="pill" value="test content"/>`, {
+            testThemeVars: {
+                "borderVertical-Badge-pill": `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
+            },
+        });
+        const component = (yield createBadgeDriver()).component;
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-right-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-right-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-right-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-left-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-left-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-left-style", EXPECTED_STYLE);
+    }));
+    (0, fixtures_1.test)("borderVertical and borderTop", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createBadgeDriver }) {
+        const EXPECTED_COLOR = "rgb(255, 0, 0)";
+        const EXPECTED_WIDTH = "5px";
+        const EXPECTED_STYLE = "dotted";
+        yield initTestBed(`<Badge variant="pill" value="test content"/>`, {
+            testThemeVars: {
+                "borderVertical-Badge-pill": `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
+                "borderTop-Badge-pill": "8px double rgb(0, 128, 0)",
+            },
+        });
+        const component = (yield createBadgeDriver()).component;
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-color", "rgb(0, 128, 0)");
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-width", "8px");
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-style", "double");
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-right-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-right-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-right-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-left-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-left-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-left-style", EXPECTED_STYLE);
+    }));
+    (0, fixtures_1.test)("borderVertical and border-bottom", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createBadgeDriver }) {
+        const EXPECTED_COLOR = "rgb(255, 0, 0)";
+        const EXPECTED_WIDTH = "5px";
+        const EXPECTED_STYLE = "dotted";
+        yield initTestBed(`<Badge variant="pill" value="test content"/>`, {
+            testThemeVars: {
+                "borderVertical-Badge-pill": `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
+                "borderBottom-Badge-pill": "8px double rgb(0, 128, 0)",
+            },
+        });
+        const component = (yield createBadgeDriver()).component;
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-right-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-right-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-right-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-color", "rgb(0, 128, 0)");
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-width", "8px");
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-style", "double");
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-left-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-left-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-left-style", EXPECTED_STYLE);
+    }));
+    (0, fixtures_1.test)("border-color", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createBadgeDriver }) {
+        const EXPECTED_COLOR = "rgb(0, 128, 0)";
+        const EXPECTED_WIDTH = "5px";
+        const EXPECTED_STYLE = "dotted";
+        yield initTestBed(`<Badge variant="pill" value="test content"/>`, {
+            testThemeVars: {
+                "borderColor-Badge-pill": EXPECTED_COLOR,
+            },
+        });
+        const component = (yield createBadgeDriver()).component;
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-top-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-top-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-right-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-right-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-bottom-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-bottom-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-left-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-left-style", EXPECTED_STYLE);
+    }));
+    (0, fixtures_1.test)("border, border-color", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createBadgeDriver }) {
+        const EXPECTED_COLOR = "rgb(255, 0, 0)";
+        const EXPECTED_WIDTH = "5px";
+        const EXPECTED_STYLE = "dotted";
+        const UPDATED = "rgb(0, 128, 0)";
+        yield initTestBed(`<Badge variant="pill" value="test content"/>`, {
+            testThemeVars: {
+                "borderColor-Badge-pill": UPDATED,
+                "border-Badge-pill": `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
+            },
+        });
+        const component = (yield createBadgeDriver()).component;
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-color", UPDATED);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-color", UPDATED);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-color", UPDATED);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-color", UPDATED);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-style", EXPECTED_STYLE);
+    }));
+    (0, fixtures_1.test)("border, border-color-horizontal", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createBadgeDriver }) {
+        const EXPECTED_COLOR = "rgb(255, 0, 0)";
+        const EXPECTED_WIDTH = "5px";
+        const EXPECTED_STYLE = "dotted";
+        const UPDATED = "rgb(0, 128, 0)";
+        yield initTestBed(`<Badge variant="pill" value="test content"/>`, {
+            testThemeVars: {
+                "borderHorizontalColor-Badge-pill": UPDATED,
+                "border-Badge-pill": `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
+            },
+        });
+        const component = (yield createBadgeDriver()).component;
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-color", UPDATED);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-color", UPDATED);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-style", EXPECTED_STYLE);
+    }));
+    (0, fixtures_1.test)("border, border-color-left", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createBadgeDriver }) {
+        const EXPECTED_COLOR = "rgb(255, 0, 0)";
+        const EXPECTED_WIDTH = "5px";
+        const EXPECTED_STYLE = "dotted";
+        const UPDATED = "rgb(0, 128, 0)";
+        yield initTestBed(`<Badge variant="pill" value="test content"/>`, {
+            testThemeVars: {
+                "borderLeftColor-Badge-pill": UPDATED,
+                "border-Badge-pill": `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
+            },
+        });
+        const component = (yield createBadgeDriver()).component;
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-color", UPDATED);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-style", EXPECTED_STYLE);
+    }));
+    (0, fixtures_1.test)("border, border-color-right", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createBadgeDriver }) {
+        const EXPECTED_COLOR = "rgb(255, 0, 0)";
+        const EXPECTED_WIDTH = "5px";
+        const EXPECTED_STYLE = "dotted";
+        const UPDATED = "rgb(0, 128, 0)";
+        yield initTestBed(`<Badge variant="pill" value="test content"/>`, {
+            testThemeVars: {
+                "borderRightColor-Badge-pill": UPDATED,
+                "border-Badge-pill": `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
+            },
+        });
+        const component = (yield createBadgeDriver()).component;
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-color", UPDATED);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-style", EXPECTED_STYLE);
+    }));
+    (0, fixtures_1.test)("border, border-color-vertical", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createBadgeDriver }) {
+        const EXPECTED_COLOR = "rgb(255, 0, 0)";
+        const EXPECTED_WIDTH = "5px";
+        const EXPECTED_STYLE = "dotted";
+        const UPDATED = "rgb(0, 128, 0)";
+        yield initTestBed(`<Badge variant="pill" value="test content"/>`, {
+            testThemeVars: {
+                "borderVerticalColor-Badge-pill": UPDATED,
+                "border-Badge-pill": `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
+            },
+        });
+        const component = (yield createBadgeDriver()).component;
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-color", UPDATED);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-color", UPDATED);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-style", EXPECTED_STYLE);
+    }));
+    (0, fixtures_1.test)("border, border-color-top", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createBadgeDriver }) {
+        const EXPECTED_COLOR = "rgb(255, 0, 0)";
+        const EXPECTED_WIDTH = "5px";
+        const EXPECTED_STYLE = "dotted";
+        const UPDATED = "rgb(0, 128, 0)";
+        yield initTestBed(`<Badge variant="pill" value="test content"/>`, {
+            testThemeVars: {
+                "borderTopColor-Badge-pill": UPDATED,
+                "border-Badge-pill": `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
+            },
+        });
+        const component = (yield createBadgeDriver()).component;
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-color", UPDATED);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-style", EXPECTED_STYLE);
+    }));
+    (0, fixtures_1.test)("border, border-color-bottom", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createBadgeDriver }) {
+        const EXPECTED_COLOR = "rgb(255, 0, 0)";
+        const EXPECTED_WIDTH = "5px";
+        const EXPECTED_STYLE = "dotted";
+        const UPDATED = "rgb(0, 128, 0)";
+        yield initTestBed(`<Badge variant="pill" value="test content"/>`, {
+            testThemeVars: {
+                "borderBottomColor-Badge-pill": UPDATED,
+                "border-Badge-pill": `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
+            },
+        });
+        const component = (yield createBadgeDriver()).component;
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-color", UPDATED);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-style", EXPECTED_STYLE);
+    }));
+    (0, fixtures_1.test)("border-style", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createBadgeDriver }) {
+        const EXPECTED_COLOR = "rgb(0, 128, 0)";
+        const EXPECTED_WIDTH = "5px";
+        const EXPECTED_STYLE = "dotted";
+        yield initTestBed(`<Badge variant="pill" value="test content"/>`, {
+            testThemeVars: {
+                "borderStyle-Badge-pill": EXPECTED_STYLE,
+            },
+        });
+        const component = (yield createBadgeDriver()).component;
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-top-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-top-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-right-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-right-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-bottom-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-bottom-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-left-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-left-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-style", EXPECTED_STYLE);
+    }));
+    (0, fixtures_1.test)("border, border-style", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createBadgeDriver }) {
+        const EXPECTED_COLOR = "rgb(255, 0, 0)";
+        const EXPECTED_WIDTH = "5px";
+        const EXPECTED_STYLE = "dotted";
+        const UPDATED = "double";
+        yield initTestBed(`<Badge variant="pill" value="test content"/>`, {
+            testThemeVars: {
+                "borderStyle-Badge-pill": UPDATED,
+                "border-Badge-pill": `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
+            },
+        });
+        const component = (yield createBadgeDriver()).component;
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-style", UPDATED);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-style", UPDATED);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-style", UPDATED);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-style", UPDATED);
+    }));
+    (0, fixtures_1.test)("border, border-style-horizontal", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createBadgeDriver }) {
+        const EXPECTED_COLOR = "rgb(0, 128, 0)";
+        const EXPECTED_WIDTH = "5px";
+        const EXPECTED_STYLE = "dotted";
+        const UPDATED = "double";
+        yield initTestBed(`<Badge variant="pill" value="test content"/>`, {
+            testThemeVars: {
+                "borderHorizontalStyle-Badge-pill": UPDATED,
+                "border-Badge-pill": `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
+            },
+        });
+        const component = (yield createBadgeDriver()).component;
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-style", UPDATED);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-style", UPDATED);
+    }));
+    (0, fixtures_1.test)("border, border-style-left", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createBadgeDriver }) {
+        const EXPECTED_COLOR = "rgb(0, 128, 0)";
+        const EXPECTED_WIDTH = "5px";
+        const EXPECTED_STYLE = "dotted";
+        const UPDATED = "double";
+        yield initTestBed(`<Badge variant="pill" value="test content"/>`, {
+            testThemeVars: {
+                "borderLeftStyle-Badge-pill": UPDATED,
+                "border-Badge-pill": `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
+            },
+        });
+        const component = (yield createBadgeDriver()).component;
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-style", UPDATED);
+    }));
+    (0, fixtures_1.test)("border, border-style-right", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createBadgeDriver }) {
+        const EXPECTED_COLOR = "rgb(0, 128, 0)";
+        const EXPECTED_WIDTH = "5px";
+        const EXPECTED_STYLE = "dotted";
+        const UPDATED = "double";
+        yield initTestBed(`<Badge variant="pill" value="test content"/>`, {
+            testThemeVars: {
+                "borderRightStyle-Badge-pill": UPDATED,
+                "border-Badge-pill": `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
+            },
+        });
+        const component = (yield createBadgeDriver()).component;
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-style", UPDATED);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-style", EXPECTED_STYLE);
+    }));
+    (0, fixtures_1.test)("border, border-style-vertical", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createBadgeDriver }) {
+        const EXPECTED_COLOR = "rgb(0, 128, 0)";
+        const EXPECTED_WIDTH = "5px";
+        const EXPECTED_STYLE = "dotted";
+        const UPDATED = "double";
+        yield initTestBed(`<Badge variant="pill" value="test content"/>`, {
+            testThemeVars: {
+                "borderVerticalStyle-Badge-pill": UPDATED,
+                "border-Badge-pill": `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
+            },
+        });
+        const component = (yield createBadgeDriver()).component;
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-style", UPDATED);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-style", UPDATED);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-style", EXPECTED_STYLE);
+    }));
+    (0, fixtures_1.test)("border, border-style-top", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createBadgeDriver }) {
+        const EXPECTED_COLOR = "rgb(0, 128, 0)";
+        const EXPECTED_WIDTH = "5px";
+        const EXPECTED_STYLE = "dotted";
+        const UPDATED = "double";
+        yield initTestBed(`<Badge variant="pill" value="test content"/>`, {
+            testThemeVars: {
+                "borderTopStyle-Badge-pill": UPDATED,
+                "border-Badge-pill": `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
+            },
+        });
+        const component = (yield createBadgeDriver()).component;
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-style", UPDATED);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-style", EXPECTED_STYLE);
+    }));
+    (0, fixtures_1.test)("border, border-style-bottom", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createBadgeDriver }) {
+        const EXPECTED_COLOR = "rgb(0, 128, 0)";
+        const EXPECTED_WIDTH = "5px";
+        const EXPECTED_STYLE = "dotted";
+        const UPDATED = "double";
+        yield initTestBed(`<Badge variant="pill" value="test content"/>`, {
+            testThemeVars: {
+                "borderBottomStyle-Badge-pill": UPDATED,
+                "border-Badge-pill": `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
+            },
+        });
+        const component = (yield createBadgeDriver()).component;
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-style", UPDATED);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-style", EXPECTED_STYLE);
+    }));
+    (0, fixtures_1.test)("border-thickness", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createBadgeDriver }) {
+        const EXPECTED_COLOR = "rgb(0, 128, 0)";
+        const EXPECTED_WIDTH = "8px";
+        const EXPECTED_STYLE = "dotted";
+        yield initTestBed(`<Badge variant="pill" value="test content"/>`, {
+            testThemeVars: {
+                "borderWidth-Badge-pill": EXPECTED_WIDTH,
+            },
+        });
+        const component = (yield createBadgeDriver()).component;
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-top-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-top-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-right-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-right-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-bottom-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-bottom-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-left-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-left-style", EXPECTED_STYLE);
+    }));
+    (0, fixtures_1.test)("border, border-thickness", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createBadgeDriver }) {
+        const EXPECTED_COLOR = "rgb(255, 0, 0)";
+        const EXPECTED_WIDTH = "5px";
+        const EXPECTED_STYLE = "dotted";
+        const UPDATED = "12px";
+        yield initTestBed(`<Badge variant="pill" value="test content"/>`, {
+            testThemeVars: {
+                "borderWidth-Badge-pill": UPDATED,
+                "border-Badge-pill": `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
+            },
+        });
+        const component = (yield createBadgeDriver()).component;
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-width", UPDATED);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-width", UPDATED);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-width", UPDATED);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-width", UPDATED);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-style", EXPECTED_STYLE);
+    }));
+    (0, fixtures_1.test)("border, border-thickness-horizontal", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createBadgeDriver }) {
+        const EXPECTED_COLOR = "rgb(255, 0, 0)";
+        const EXPECTED_WIDTH = "5px";
+        const EXPECTED_STYLE = "dotted";
+        const UPDATED = "12px";
+        yield initTestBed(`<Badge variant="pill" value="test content"/>`, {
+            testThemeVars: {
+                "borderHorizontalWidth-Badge-pill": UPDATED,
+                "border-Badge-pill": `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
+            },
+        });
+        const component = (yield createBadgeDriver()).component;
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-width", UPDATED);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-width", UPDATED);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-style", EXPECTED_STYLE);
+    }));
+    (0, fixtures_1.test)("border, border-thickness-left", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createBadgeDriver }) {
+        const EXPECTED_COLOR = "rgb(255, 0, 0)";
+        const EXPECTED_WIDTH = "5px";
+        const EXPECTED_STYLE = "dotted";
+        const UPDATED = "12px";
+        yield initTestBed(`<Badge variant="pill" value="test content"/>`, {
+            testThemeVars: {
+                "borderLeftWidth-Badge-pill": UPDATED,
+                "border-Badge-pill": `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
+            },
+        });
+        const component = (yield createBadgeDriver()).component;
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-width", UPDATED);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-style", EXPECTED_STYLE);
+    }));
+    (0, fixtures_1.test)("border, border-thickness-right", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createBadgeDriver }) {
+        const EXPECTED_COLOR = "rgb(255, 0, 0)";
+        const EXPECTED_WIDTH = "5px";
+        const EXPECTED_STYLE = "dotted";
+        const UPDATED = "12px";
+        yield initTestBed(`<Badge variant="pill" value="test content"/>`, {
+            testThemeVars: {
+                "borderRightWidth-Badge-pill": UPDATED,
+                "border-Badge-pill": `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
+            },
+        });
+        const component = (yield createBadgeDriver()).component;
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-width", UPDATED);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-style", EXPECTED_STYLE);
+    }));
+    (0, fixtures_1.test)("border, border-thickness-vertical", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createBadgeDriver }) {
+        const EXPECTED_COLOR = "rgb(255, 0, 0)";
+        const EXPECTED_WIDTH = "5px";
+        const EXPECTED_STYLE = "dotted";
+        const UPDATED = "12px";
+        yield initTestBed(`<Badge variant="pill" value="test content"/>`, {
+            testThemeVars: {
+                "borderVerticalWidth-Badge-pill": UPDATED,
+                "border-Badge-pill": `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
+            },
+        });
+        const component = (yield createBadgeDriver()).component;
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-width", UPDATED);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-width", UPDATED);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-style", EXPECTED_STYLE);
+    }));
+    (0, fixtures_1.test)("border, border-thickness-top", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createBadgeDriver }) {
+        const EXPECTED_COLOR = "rgb(255, 0, 0)";
+        const EXPECTED_WIDTH = "5px";
+        const EXPECTED_STYLE = "dotted";
+        const UPDATED = "12px";
+        yield initTestBed(`<Badge variant="pill" value="test content"/>`, {
+            testThemeVars: {
+                "borderTopWidth-Badge-pill": UPDATED,
+                "border-Badge-pill": `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
+            },
+        });
+        const component = (yield createBadgeDriver()).component;
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-width", UPDATED);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-style", EXPECTED_STYLE);
+    }));
+    (0, fixtures_1.test)("border, border-thickness-bottom", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createBadgeDriver }) {
+        const EXPECTED_COLOR = "rgb(255, 0, 0)";
+        const EXPECTED_WIDTH = "5px";
+        const EXPECTED_STYLE = "dotted";
+        const UPDATED = "12px";
+        yield initTestBed(`<Badge variant="pill" value="test content"/>`, {
+            testThemeVars: {
+                "borderBottomWidth-Badge-pill": UPDATED,
+                "border-Badge-pill": `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
+            },
+        });
+        const component = (yield createBadgeDriver()).component;
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-width", UPDATED);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-style", EXPECTED_STYLE);
+    }));
+    (0, fixtures_1.test)("padding", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createBadgeDriver }) {
+        const EXPECTED = "100px";
+        yield initTestBed(`<Badge variant="pill" value="test content"/>`, {
+            testThemeVars: {
+                "padding-Badge-pill": EXPECTED,
+            },
+        });
+        const component = (yield createBadgeDriver()).component;
+        yield (0, fixtures_1.expect)(component).toHaveCSS("padding-top", EXPECTED);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("padding-right", EXPECTED);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("padding-bottom", EXPECTED);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("padding-left", EXPECTED);
+    }));
+    (0, fixtures_1.test)("paddingHorizontal", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createBadgeDriver }) {
+        const EXPECTED = "100px";
+        yield initTestBed(`<Badge variant="pill" value="test content"/>`, {
+            testThemeVars: {
+                "paddingHorizontal-Badge-pill": EXPECTED,
+            },
+        });
+        const component = (yield createBadgeDriver()).component;
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("padding-top", EXPECTED);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("padding-right", EXPECTED);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("padding-bottom", EXPECTED);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("padding-left", EXPECTED);
+    }));
+    (0, fixtures_1.test)("paddingLeft", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createBadgeDriver }) {
+        const EXPECTED = "100px";
+        yield initTestBed(`<Badge variant="pill" value="test content"/>`, {
+            testThemeVars: {
+                "paddingLeft-Badge-pill": EXPECTED,
+            },
+        });
+        const component = (yield createBadgeDriver()).component;
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("padding-top", EXPECTED);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("padding-right", EXPECTED);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("padding-bottom", EXPECTED);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("padding-left", EXPECTED);
+    }));
+    (0, fixtures_1.test)("paddingRight", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createBadgeDriver }) {
+        const EXPECTED = "100px";
+        yield initTestBed(`<Badge variant="pill" value="test content"/>`, {
+            testThemeVars: {
+                "paddingRight-Badge-pill": EXPECTED,
+            },
+        });
+        const component = (yield createBadgeDriver()).component;
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("padding-top", EXPECTED);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("padding-right", EXPECTED);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("padding-bottom", EXPECTED);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("padding-left", EXPECTED);
+    }));
+    (0, fixtures_1.test)("paddingVertical", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createBadgeDriver }) {
+        const EXPECTED = "100px";
+        yield initTestBed(`<Badge variant="pill" value="test content"/>`, {
+            testThemeVars: {
+                "paddingVertical-Badge-pill": EXPECTED,
+            },
+        });
+        const component = (yield createBadgeDriver()).component;
+        yield (0, fixtures_1.expect)(component).toHaveCSS("padding-top", EXPECTED);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("padding-right", EXPECTED);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("padding-bottom", EXPECTED);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("padding-left", EXPECTED);
+    }));
+    (0, fixtures_1.test)("paddingTop", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createBadgeDriver }) {
+        const EXPECTED = "100px";
+        yield initTestBed(`<Badge variant="pill" value="test content"/>`, {
+            testThemeVars: {
+                "paddingTop-Badge-pill": EXPECTED,
+            },
+        });
+        const component = (yield createBadgeDriver()).component;
+        yield (0, fixtures_1.expect)(component).toHaveCSS("padding-top", EXPECTED);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("padding-right", EXPECTED);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("padding-bottom", EXPECTED);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("padding-left", EXPECTED);
+    }));
+    (0, fixtures_1.test)("paddingBottom", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createBadgeDriver }) {
+        const EXPECTED = "100px";
+        yield initTestBed(`<Badge variant="pill" value="test content"/>`, {
+            testThemeVars: {
+                "paddingBottom-Badge-pill": EXPECTED,
+            },
+        });
+        const component = (yield createBadgeDriver()).component;
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("padding-top", EXPECTED);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("padding-right", EXPECTED);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("padding-bottom", EXPECTED);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("padding-left", EXPECTED);
+    }));
+    (0, fixtures_1.test)("padding, paddingHorizontal", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createBadgeDriver }) {
+        const EXPECTED = "100px";
+        const UPDATED = "48px";
+        yield initTestBed(`<Badge variant="pill" value="test content"/>`, {
+            testThemeVars: {
+                "padding-Badge-pill": EXPECTED,
+                "paddingHorizontal-Badge-pill": UPDATED,
+            },
+        });
+        const component = (yield createBadgeDriver()).component;
+        yield (0, fixtures_1.expect)(component).toHaveCSS("padding-top", EXPECTED);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("padding-right", UPDATED);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("padding-bottom", EXPECTED);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("padding-left", UPDATED);
+    }));
+    (0, fixtures_1.test)("padding, paddingLeft", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createBadgeDriver }) {
+        const EXPECTED = "100px";
+        const UPDATED = "48px";
+        yield initTestBed(`<Badge variant="pill" value="test content"/>`, {
+            testThemeVars: {
+                "padding-Badge-pill": EXPECTED,
+                "paddingLeft-Badge-pill": UPDATED,
+            },
+        });
+        const component = (yield createBadgeDriver()).component;
+        yield (0, fixtures_1.expect)(component).toHaveCSS("padding-top", EXPECTED);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("padding-right", EXPECTED);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("padding-bottom", EXPECTED);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("padding-left", UPDATED);
+    }));
+    (0, fixtures_1.test)("padding, paddingRight", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createBadgeDriver }) {
+        const EXPECTED = "100px";
+        const UPDATED = "48px";
+        yield initTestBed(`<Badge variant="pill" value="test content"/>`, {
+            testThemeVars: {
+                "padding-Badge-pill": EXPECTED,
+                "paddingRight-Badge-pill": UPDATED,
+            },
+        });
+        const component = (yield createBadgeDriver()).component;
+        yield (0, fixtures_1.expect)(component).toHaveCSS("padding-top", EXPECTED);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("padding-right", UPDATED);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("padding-bottom", EXPECTED);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("padding-left", EXPECTED);
+    }));
+    (0, fixtures_1.test)("padding, paddingVertical", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createBadgeDriver }) {
+        const EXPECTED = "100px";
+        const UPDATED = "48px";
+        yield initTestBed(`<Badge variant="pill" value="test content"/>`, {
+            testThemeVars: {
+                "padding-Badge-pill": EXPECTED,
+                "paddingVertical-Badge-pill": UPDATED,
+            },
+        });
+        const component = (yield createBadgeDriver()).component;
+        yield (0, fixtures_1.expect)(component).toHaveCSS("padding-top", UPDATED);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("padding-right", EXPECTED);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("padding-bottom", UPDATED);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("padding-left", EXPECTED);
+    }));
+    (0, fixtures_1.test)("padding, paddingTop", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createBadgeDriver }) {
+        const EXPECTED = "100px";
+        const UPDATED = "48px";
+        yield initTestBed(`<Badge variant="pill" value="test content"/>`, {
+            testThemeVars: {
+                "padding-Badge-pill": EXPECTED,
+                "paddingTop-Badge-pill": UPDATED,
+            },
+        });
+        const component = (yield createBadgeDriver()).component;
+        yield (0, fixtures_1.expect)(component).toHaveCSS("padding-top", UPDATED);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("padding-right", EXPECTED);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("padding-bottom", EXPECTED);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("padding-left", EXPECTED);
+    }));
+    (0, fixtures_1.test)("padding, paddingBottom", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createBadgeDriver }) {
+        const EXPECTED = "100px";
+        const UPDATED = "48px";
+        yield initTestBed(`<Badge variant="pill" value="test content"/>`, {
+            testThemeVars: {
+                "padding-Badge-pill": EXPECTED,
+                "paddingBottom-Badge-pill": UPDATED,
+            },
+        });
+        const component = (yield createBadgeDriver()).component;
+        yield (0, fixtures_1.expect)(component).toHaveCSS("padding-top", EXPECTED);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("padding-right", EXPECTED);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("padding-bottom", UPDATED);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("padding-left", EXPECTED);
+    }));
+});