fix: match mobile Our Work linework
This commit is contained in:
@@ -457,15 +457,49 @@ test("mobile Our Work contains both reference images", async ({ page }) => {
|
||||
const block = await getBox(page.locator(".our-work"));
|
||||
const left = await getBox(page.locator(".our-work__media--left"));
|
||||
const bottom = await getBox(page.locator(".our-work__media--bottom"));
|
||||
const vector = await getBox(page.locator(".our-work__vector img"));
|
||||
|
||||
expectNear(block.height, 888, 12);
|
||||
expectNear(left.width, 189, 5);
|
||||
expect(bottom.width).toBeGreaterThanOrEqual(335);
|
||||
expect(bottom.x).toBeGreaterThanOrEqual(60);
|
||||
expect(bottom.x + bottom.width).toBeLessThanOrEqual(402);
|
||||
expectNear(vector.width, 474, 4);
|
||||
expectNear(vector.y - block.y, 160, 3);
|
||||
});
|
||||
|
||||
test("mobile Our Work uses its dedicated linework composition", async ({
|
||||
page,
|
||||
}) => {
|
||||
await page.goto(homepage);
|
||||
|
||||
const block = await getBox(page.locator(".our-work"));
|
||||
const mobileVector = page.locator(".our-work__vector-mobile");
|
||||
const upper = await getBox(
|
||||
mobileVector.locator(".our-work__vector-mobile-upper"),
|
||||
);
|
||||
const lower = await getBox(
|
||||
mobileVector.locator(".our-work__vector-mobile-lower"),
|
||||
);
|
||||
|
||||
await expect(mobileVector).toBeVisible();
|
||||
await expect(page.locator(".our-work__vector-desktop")).toBeHidden();
|
||||
expectNear(upper.x - block.x, 100, 3);
|
||||
expectNear(upper.y - block.y, 240, 3);
|
||||
expectNear(upper.width, 960, 4);
|
||||
expectNear(lower.x - block.x, -430, 3);
|
||||
expectNear(lower.y - block.y, 490, 3);
|
||||
expectNear(lower.width, 960, 4);
|
||||
});
|
||||
|
||||
test("mobile Our Work linework render remains stable", async ({ page }) => {
|
||||
await page.goto(homepage);
|
||||
|
||||
await expect(page.locator(".our-work")).toHaveScreenshot(
|
||||
"our-work-linework-render.png",
|
||||
{
|
||||
animations: "disabled",
|
||||
maxDiffPixelRatio: 0.025,
|
||||
threshold: 0.08,
|
||||
},
|
||||
);
|
||||
});
|
||||
|
||||
test("mobile Our Work follows the reference content and overlap order", async ({
|
||||
@@ -528,12 +562,18 @@ test("Our Work restores its tablet layout at 768px", async ({ page }) => {
|
||||
|
||||
const block = page.locator(".our-work");
|
||||
const inner = block.locator(".our-work__inner");
|
||||
const vector = block.locator(".our-work__vector img");
|
||||
const vector = block.locator(".our-work__vector-desktop img");
|
||||
|
||||
await expect(block).toHaveCSS("min-height", "0px");
|
||||
await expect(block).toHaveCSS("padding-top", "64px");
|
||||
await expect(inner).toHaveCSS("padding-left", "38.4px");
|
||||
await expect(vector).toHaveCSS("width", "768px");
|
||||
await expect(block.locator(".our-work__vector-mobile")).toBeHidden();
|
||||
expect(
|
||||
await vector.evaluate(
|
||||
(image) => /** @type {HTMLImageElement} */ (image).currentSrc,
|
||||
),
|
||||
).toContain("our-work-vector.svg");
|
||||
});
|
||||
|
||||
test("mobile recent posts exposes previous and next controls", async ({
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 254 KiB |
Reference in New Issue
Block a user