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

fix: add mobile pull quote artwork

Browse Source
This commit is contained in:
Keith Solomon
2026-06-27 19:47:06 -05:00
parent 32bbf6750b
commit 7c3c09855d
4 changed files with 51 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tests/mobile-homepage.spec.js
+37 -14
View File
@@ -100,11 +100,14 @@ test("mobile pull quote matches the reference scale", async ({ page }) => {
const quote = await getBox(page.locator(".pull-quote"));
const text = await getBox(page.locator(".pull-quote__text"));
const vectorImage = page.locator(".pull-quote__vector img");
const vector = await getBox(vectorImage);
const bandHeight = await page.locator(".pull-quote").evaluate((element) =>
Number.parseFloat(getComputedStyle(element, "::after").height),
);
const desktopVector = page.locator(".pull-quote__vector--bg");
const mobileVector = page.locator(".pull-quote__vector--mobile");
const vector = await getBox(mobileVector);
const bandHeight = await page
.locator(".pull-quote")
.evaluate((element) =>
Number.parseFloat(getComputedStyle(element, "::after").height),
);
expectNear(quote.height, 361, 6);
expectNear(bandHeight, 16, 1);
@@ -119,9 +122,9 @@ test("mobile pull quote matches the reference scale", async ({ page }) => {
expectNear(vector.x, quote.x, 3);
expectNear(vector.width, quote.width, 3);
expectNear(vector.height, quote.height - bandHeight, 3);
await expect(vectorImage).toHaveCSS("max-width", "none");
await expect(vectorImage).toHaveCSS("object-fit", "fill");
await expect(vectorImage).toHaveCSS("position", "static");
await expect(mobileVector).toBeVisible();
await expect(desktopVector).toBeHidden();
await expect(mobileVector).toHaveCSS("object-fit", "cover");
});
test("mobile pull quote scales proportionally through 767px", async ({
@@ -136,11 +139,31 @@ test("mobile pull quote scales proportionally through 767px", async ({
expectNear(quote.height, 767 * 0.898, 6);
expect(text.y).toBeGreaterThanOrEqual(quote.y);
expect(text.y + text.height).toBeLessThanOrEqual(quote.y + quote.height);
expectNear(
text.y + text.height / 2,
quote.y + (quote.height - 16) / 2,
8,
);
expectNear(text.y + text.height / 2, quote.y + (quote.height - 16) / 2, 8);
});
test("pull quote restores the configured artwork at 768px", async ({
page,
}) => {
await page.setViewportSize({ width: 768, height: 900 });
await page.goto(homepage);
const desktopVector = page.locator(".pull-quote__vector--bg");
const mobileVector = page.locator(".pull-quote__vector--mobile");
const quote = await getBox(page.locator(".pull-quote"));
const vector = await getBox(desktopVector);
const borderWidth = await page
.locator(".pull-quote")
.evaluate((element) =>
Number.parseFloat(getComputedStyle(element).borderBottomWidth),
);
await expect(desktopVector).toBeVisible();
await expect(mobileVector).toBeHidden();
expectNear(vector.x, quote.x, 3);
expectNear(vector.width, quote.width, 3);
expectNear(vector.height, quote.height - borderWidth, 3);
await expect(desktopVector).toHaveCSS("object-fit", "cover");
});
test("mobile pull quote matches the supplied visual reference", async ({
@@ -152,7 +175,7 @@ test("mobile pull quote matches the supplied visual reference", async ({
"pullquote-reference.png",
{
animations: "disabled",
maxDiffPixelRatio: 0.111,
maxDiffPixelRatio: 0.071,
threshold: 0.05,
},
);