fix: align mobile pull quote crop

This commit is contained in:
Keith Solomon
2026-06-27 19:00:12 -05:00
parent 445269d291
commit 8a601d90cb
2 changed files with 26 additions and 10 deletions
+7 -6
View File
@@ -102,23 +102,24 @@ 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),
const bandHeight = await page.locator(".pull-quote").evaluate((element) =>
Number.parseFloat(getComputedStyle(element, "::after").height),
);
expectNear(quote.height, 361, 6);
expectNear(borderWidth, 16, 1);
expectNear(bandHeight, 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 - borderWidth) / 2,
quote.y + (quote.height - bandHeight) / 2,
8,
);
expectNear(vector.x, quote.x, 3);
expectNear(vector.width, quote.width, 3);
expectNear(vector.height, quote.height - borderWidth, 3);
expectNear(vector.height, quote.height - bandHeight, 3);
await expect(vectorImage).toHaveCSS("object-position", "0% 50%");
});
test("mobile pull quote scales proportionally through 767px", async ({
@@ -149,7 +150,7 @@ test("mobile pull quote matches the supplied visual reference", async ({
"pullquote-reference.png",
{
animations: "disabled",
maxDiffPixelRatio: 0.094,
maxDiffPixelRatio: 0.05,
threshold: 0.2,
},
);