diff --git a/tests/mobile-homepage.spec.js b/tests/mobile-homepage.spec.js index 7fffce0..ab76d89 100644 --- a/tests/mobile-homepage.spec.js +++ b/tests/mobile-homepage.spec.js @@ -140,6 +140,21 @@ test("mobile pull quote scales proportionally through 767px", async ({ ); }); +test("mobile pull quote matches the supplied visual reference", async ({ + page, +}) => { + await page.goto(homepage); + + await expect(page.locator(".pull-quote")).toHaveScreenshot( + "pullquote-reference.png", + { + animations: "disabled", + maxDiffPixelRatio: 0.094, + threshold: 0.2, + }, + ); +}); + test("mobile recent posts exposes previous and next controls", async ({ page, }) => { diff --git a/tests/mobile-homepage.spec.js-snapshots/pullquote-reference-chromium-win32.png b/tests/mobile-homepage.spec.js-snapshots/pullquote-reference-chromium-win32.png new file mode 100644 index 0000000..db9f4f3 Binary files /dev/null and b/tests/mobile-homepage.spec.js-snapshots/pullquote-reference-chromium-win32.png differ diff --git a/views/blocks/pull-quote/pull-quote.css b/views/blocks/pull-quote/pull-quote.css index a0e29b1..5289cf2 100644 --- a/views/blocks/pull-quote/pull-quote.css +++ b/views/blocks/pull-quote/pull-quote.css @@ -48,12 +48,13 @@ .pull-quote { background: color-mix(in oklch, var(--color-cwc-blue-03) 30%, white); border-bottom-width: 1rem; - height: 89.8vw; + height: calc(89.8vw - 1px); } .pull-quote .pull-quote__vector img { height: 100%; - object-fit: fill; + object-fit: cover; + object-position: 30% center; width: 100%; } @@ -65,8 +66,8 @@ } .pull-quote .pull-quote__text { - font-size: clamp(1.25rem, 5.6vw, 1.40625rem); - line-height: 1.2; + font-size: clamp(1.25rem, 5.535vw, 1.390625rem); + line-height: clamp(1.5rem, 6.72vw, 1.6875rem); width: 100%; } }