fix: align mobile hero vector crop
This commit is contained in:
@@ -40,6 +40,9 @@ test("mobile hero matches the 402px reference composition", async ({
|
|||||||
|
|
||||||
const hero = await getBox(page.locator(".homepage-hero"));
|
const hero = await getBox(page.locator(".homepage-hero"));
|
||||||
const heading = await getBox(page.locator(".homepage-hero .intro h1"));
|
const heading = await getBox(page.locator(".homepage-hero .intro h1"));
|
||||||
|
const vector = await getBox(
|
||||||
|
page.locator(".homepage-hero .heroVector .vector"),
|
||||||
|
);
|
||||||
const buttons = page.locator(".homepage-hero .reset .button");
|
const buttons = page.locator(".homepage-hero .reset .button");
|
||||||
const firstButton = await getBox(buttons.nth(0));
|
const firstButton = await getBox(buttons.nth(0));
|
||||||
const secondButton = await getBox(buttons.nth(1));
|
const secondButton = await getBox(buttons.nth(1));
|
||||||
@@ -47,14 +50,12 @@ test("mobile hero matches the 402px reference composition", async ({
|
|||||||
expectNear(hero.height, 752, 8);
|
expectNear(hero.height, 752, 8);
|
||||||
expectNear(heading.x, 32, 3);
|
expectNear(heading.x, 32, 3);
|
||||||
expect(heading.width).toBeGreaterThanOrEqual(330);
|
expect(heading.width).toBeGreaterThanOrEqual(330);
|
||||||
|
expectNear(vector.x, -414, 8);
|
||||||
expectNear(firstButton.y, secondButton.y, 2);
|
expectNear(firstButton.y, secondButton.y, 2);
|
||||||
expectNear(firstButton.width, 148, 4);
|
expectNear(firstButton.width, 148, 4);
|
||||||
expectNear(secondButton.width, 156, 4);
|
expectNear(secondButton.width, 156, 4);
|
||||||
|
|
||||||
const location = page.locator(".homepage-hero__location");
|
await expect(page.locator(".homepage-hero__location")).toBeVisible();
|
||||||
if ((await location.count()) > 0) {
|
|
||||||
await expect(location).toBeVisible();
|
|
||||||
}
|
|
||||||
});
|
});
|
||||||
|
|
||||||
test("mobile hero CTAs remain fully visible at 320px", async ({ page }) => {
|
test("mobile hero CTAs remain fully visible at 320px", async ({ page }) => {
|
||||||
|
|||||||
@@ -112,7 +112,7 @@
|
|||||||
|
|
||||||
.homepage-hero .heroVector .vector {
|
.homepage-hero .heroVector .vector {
|
||||||
bottom: 6.25rem;
|
bottom: 6.25rem;
|
||||||
left: 50%;
|
left: -8%;
|
||||||
transform: translateX(-50%);
|
transform: translateX(-50%);
|
||||||
width: clamp(43rem, 190vw, 48rem);
|
width: clamp(43rem, 190vw, 48rem);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user