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

fix: use new mobile vector for contact block

Browse Source 
Render mobile-contact-vector.svg alongside the existing contact linework. CSS hides the desktop SVG and shows the mobile <img> at <=767px so the new 342x187 composition fills the card width. Update the geometry test to assert the new linework ratio (342/187) and the snapshot.
This commit is contained in:
Keith Solomon
2026-06-28 13:04:55 -05:00
parent 14de24351e
commit 8c239e15f6
5 changed files with 60 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tests/mobile-homepage.spec.js
+39 -53
View File
@@ -350,7 +350,7 @@ test("mobile contact card matches the 402px reference geometry", async ({
const heading = await getBox(cardLocator.locator(".contact-block__text"));
const cta = await getBox(cardLocator.locator(".contact-block__cta"));
const linework = await getBox(
cardLocator.locator(".contact-block__linework"),
cardLocator.locator(".contact-block__linework--mobile"),
);
const backgroundImage = cardLocator.locator(".contact-block__bg-image");
const bandHeight = await cardLocator.evaluate((element) =>
@@ -366,9 +366,9 @@ test("mobile contact card matches the 402px reference geometry", async ({
expectNear(cta.x - card.x, 33, 3);
expectNear(cta.y - card.y, 219, 5);
expectNear(cta.width, 173, 4);
expectNear(linework.y - card.y, 300, 5);
expectNear(linework.height, 186, 5);
expect(linework.x).toBeLessThanOrEqual(card.x);
expectNear(linework.y - card.y, 299, 5);
expectNear(linework.height, 188, 5);
expectNear(linework.width, card.width, 3);
await expect(backgroundImage).toHaveCSS("object-fit", "cover");
const overlay = await cardLocator
.locator(".contact-block__media")
@@ -385,7 +385,9 @@ test("mobile contact card matches the 402px reference geometry", async ({
const media = clone.querySelector(".contact-block__media");
const content = clone.querySelector(".contact-block__content");
const linework = clone.querySelector(".contact-block__linework");
const linework = clone.querySelector(
".contact-block__linework--mobile",
);
const lineworkBox = linework.getBoundingClientRect();
const styles = {
borderRadius: getComputedStyle(clone).borderRadius,
@@ -401,7 +403,7 @@ test("mobile contact card matches the 402px reference geometry", async ({
expect(reusableStyles.borderRadius).toBe("12px 12px 0px 0px");
expect(reusableStyles.contentPaddingLeft).toBe("24px");
expectNear(reusableStyles.lineworkRatio, 628 / 282, 0.03);
expectNear(reusableStyles.lineworkRatio, 342 / 187, 0.03);
expect(reusableStyles.maskImage).toContain("linear-gradient");
expect(reusableStyles.overlay).toBe("none");
});
@@ -471,30 +473,27 @@ test("mobile Our Work uses its dedicated linework composition", async ({
await page.goto(homepage);
const mobileVector = page.locator(".our-work__vector-mobile");
const clip = mobileVector.locator(".our-work__vector-mobile-clip");
const composition = await mobileVector.evaluate((element) => {
const clipElement = element.querySelector(
".our-work__vector-mobile-clip",
);
const upper = getComputedStyle(clipElement, "::before");
const lower = getComputedStyle(element, "::after");
return {
lowerBackground: lower.backgroundImage,
lowerWidth: Number.parseFloat(lower.width),
upperBackground: upper.backgroundImage,
upperWidth: Number.parseFloat(upper.width),
};
});
const mobileImage = mobileVector.locator("img");
await expect(mobileVector).toBeVisible();
await expect(clip).toBeVisible();
await expect(mobileImage).toBeVisible();
await expect(page.locator(".our-work__vector-desktop")).toBeHidden();
await expect(mobileVector.locator("img")).toHaveCount(0);
expect(composition.upperBackground).toContain("our-work-vector.svg");
expect(composition.lowerBackground).toContain("our-work-vector.svg");
expectNear(composition.upperWidth, 960, 4);
expectNear(composition.lowerWidth, 960, 4);
await mobileImage.evaluate(
(image) =>
/** @type {HTMLImageElement} */ (image).complete ||
new Promise((resolve) => {
/** @type {HTMLImageElement} */ (image).addEventListener(
"load",
() => resolve(undefined),
{ once: true },
);
}),
);
expect(
await mobileImage.evaluate(
(image) => /** @type {HTMLImageElement} */ (image).currentSrc,
),
).toContain("mobile-work-vector.svg");
});
test("mobile Our Work reserves reference height only for both images", async ({
@@ -609,32 +608,19 @@ test("mobile Our Work remains contained at responsive endpoints", async ({
expectNear(primary.y, secondary.y, 2);
expect(left.y).toBeLessThan(bottom.y);
const vectorScale = await page
.locator(".our-work__vector-mobile")
.evaluate((element) => {
const clip = element.querySelector(
".our-work__vector-mobile-clip",
);
const upper = getComputedStyle(clip, "::before");
const lower = getComputedStyle(element, "::after");
return {
lowerLeft: Number.parseFloat(lower.left),
lowerTop: Number.parseFloat(lower.top),
lowerWidth: Number.parseFloat(lower.width),
upperLeft: Number.parseFloat(upper.left),
upperTop: Number.parseFloat(upper.top),
upperWidth: Number.parseFloat(upper.width),
};
});
const scale = width / 402;
expectNear(vectorScale.upperWidth, 960 * scale, 4);
expectNear(vectorScale.lowerWidth, 960 * scale, 4);
expectNear(vectorScale.upperLeft, 100 * scale, 3);
expectNear(vectorScale.upperTop, 240 * scale, 3);
expectNear(vectorScale.lowerLeft, -430 * scale, 4);
expectNear(vectorScale.lowerTop, 490 * scale, 4);
const mobileImage = page.locator(".our-work__vector-mobile img");
await expect(mobileImage).toBeVisible();
await mobileImage.evaluate(
(image) =>
/** @type {HTMLImageElement} */ (image).complete ||
new Promise((resolve) => {
/** @type {HTMLImageElement} */ (image).addEventListener(
"load",
() => resolve(undefined),
{ once: true },
);
}),
);
}
});