Solo-Web-Works/CWC
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: isolate mobile home contact styles

Browse Source
This commit is contained in:
Keith Solomon
2026-06-27 21:34:44 -05:00
parent 7c143721b8
commit f0c5c47297
3 changed files with 85 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tests/mobile-homepage.spec.js
+23 -4
View File
@@ -352,7 +352,6 @@ test("mobile contact card matches the 402px reference geometry", async ({
const linework = await getBox(
cardLocator.locator(".contact-block__linework"),
);
const lineworkLocator = cardLocator.locator(".contact-block__linework");
const backgroundImage = cardLocator.locator(".contact-block__bg-image");
const bandHeight = await cardLocator.evaluate((element) =>
Number.parseFloat(getComputedStyle(element).borderBottomWidth),
@@ -370,10 +369,7 @@ test("mobile contact card matches the 402px reference geometry", async ({
expectNear(linework.y - card.y, 300, 5);
expectNear(linework.height, 186, 5);
expect(linework.x).toBeLessThanOrEqual(card.x);
await expect(lineworkLocator).toHaveCSS("overflow", "visible");
await expect(backgroundImage).toHaveCSS("object-fit", "cover");
await expect(backgroundImage).toHaveCSS("object-position", "82% 50%");
await expect(backgroundImage).toHaveCSS("filter", "brightness(1.5)");
const overlay = await cardLocator
.locator(".contact-block__media")
.evaluate(
@@ -381,6 +377,29 @@ test("mobile contact card matches the 402px reference geometry", async ({
);
expect(overlay).toContain("linear-gradient");
await expect(cardLocator).toHaveCSS("border-radius", "16px 16px 0px 0px");
const reusableStyles = await cardLocator.evaluate((element) => {
const clone = element.cloneNode(true);
clone.classList.remove("home-contact");
document.body.append(clone);
const media = clone.querySelector(".contact-block__media");
const content = clone.querySelector(".contact-block__content");
const styles = {
borderRadius: getComputedStyle(clone).borderRadius,
contentPaddingLeft: getComputedStyle(content).paddingLeft,
maskImage: getComputedStyle(media).maskImage,
overlay: getComputedStyle(media, "::after").backgroundImage,
};
clone.remove();
return styles;
});
expect(reusableStyles.borderRadius).toBe("12px 12px 0px 0px");
expect(reusableStyles.contentPaddingLeft).toBe("24px");
expect(reusableStyles.maskImage).toContain("linear-gradient");
expect(reusableStyles.overlay).toBe("none");
});
test("mobile contact card scales proportionally and remains contained", async ({