fix: scale mobile pull quote proportionally
This commit is contained in:
@@ -102,19 +102,42 @@ test("mobile pull quote matches the reference scale", async ({ page }) => {
|
||||
const text = await getBox(page.locator(".pull-quote__text"));
|
||||
const vectorImage = page.locator(".pull-quote__vector img");
|
||||
const vector = await getBox(vectorImage);
|
||||
const borderWidth = await page.locator(".pull-quote").evaluate((element) =>
|
||||
Number.parseFloat(getComputedStyle(element).borderBottomWidth),
|
||||
);
|
||||
|
||||
expectNear(quote.height, 361, 6);
|
||||
expectNear(borderWidth, 16, 1);
|
||||
expectNear(text.x - quote.x, 32, 3);
|
||||
expect(text.width).toBeGreaterThanOrEqual(330);
|
||||
expectNear(text.height, 216, 6);
|
||||
expectNear(
|
||||
text.y + text.height / 2,
|
||||
quote.y + (quote.height - 12) / 2,
|
||||
quote.y + (quote.height - borderWidth) / 2,
|
||||
8,
|
||||
);
|
||||
expectNear(vector.x, quote.x, 3);
|
||||
expectNear(vector.width, quote.width, 3);
|
||||
expectNear(vector.height, quote.height - borderWidth, 3);
|
||||
});
|
||||
|
||||
test("mobile pull quote scales proportionally through 767px", async ({
|
||||
page,
|
||||
}) => {
|
||||
await page.setViewportSize({ width: 767, height: 900 });
|
||||
await page.goto(homepage);
|
||||
|
||||
const quote = await getBox(page.locator(".pull-quote"));
|
||||
const text = await getBox(page.locator(".pull-quote__text"));
|
||||
|
||||
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,
|
||||
);
|
||||
expect(vector.width).toBeGreaterThanOrEqual(470);
|
||||
expect(vector.height).toBeGreaterThan(quote.height);
|
||||
await expect(vectorImage).toHaveCSS("object-position", "3% 42%");
|
||||
});
|
||||
|
||||
test("mobile recent posts exposes previous and next controls", async ({
|
||||
|
||||
Reference in New Issue
Block a user