diff --git a/playwright.config.js b/playwright.config.js index 18e8c18..c6ac6ee 100644 --- a/playwright.config.js +++ b/playwright.config.js @@ -14,6 +14,7 @@ import { defineConfig, devices } from '@playwright/test'; */ export default defineConfig({ testDir: './tests', + snapshotPathTemplate: '{testDir}/{testFilePath}-snapshots/{arg}{-projectName}{ext}', /* Run tests in files in parallel */ fullyParallel: true, /* Fail the build on CI if you accidentally left test.only in the source code. */ diff --git a/tests/mobile-homepage.spec.js b/tests/mobile-homepage.spec.js index 0360c08..45681a4 100644 --- a/tests/mobile-homepage.spec.js +++ b/tests/mobile-homepage.spec.js @@ -142,6 +142,49 @@ test("mobile pull quote scales proportionally through 767px", async ({ expectNear(text.y + text.height / 2, quote.y + (quote.height - 16) / 2, 8); }); +test("mobile pull quote keeps text above the band at 320px", async ({ + page, +}) => { + await page.setViewportSize({ width: 320, height: 800 }); + await page.goto(homepage); + + const quote = await getBox(page.locator(".pull-quote")); + const content = await getBox(page.locator(".pull-quote__content")); + const text = await getBox(page.locator(".pull-quote__text")); + + expectNear(quote.height, 320 * 0.898, 6); + expectNear(content.height, quote.height - 16, 3); + expect(text.y - content.y).toBeGreaterThanOrEqual(12); + expect( + content.y + content.height - (text.y + text.height), + ).toBeGreaterThanOrEqual(12); +}); + +test("mobile pull quote grows when its text needs more room", async ({ + page, +}) => { + await page.goto(homepage); + + const quoteLocator = page.locator(".pull-quote"); + const initialQuote = await getBox(quoteLocator); + await page.locator(".pull-quote__text p").evaluate((paragraph) => { + paragraph.textContent = `${paragraph.textContent} ${paragraph.textContent} ${paragraph.textContent}`; + }); + + const quote = await getBox(quoteLocator); + const content = await getBox(page.locator(".pull-quote__content")); + const text = await getBox(page.locator(".pull-quote__text")); + const vector = await getBox(page.locator(".pull-quote__vector--mobile")); + + expect(quote.height).toBeGreaterThan(initialQuote.height); + expectNear(content.height, quote.height - 16, 3); + expectNear(vector.height, quote.height - 16, 3); + expect(text.y).toBeGreaterThanOrEqual(content.y); + expect(text.y + text.height).toBeLessThanOrEqual( + content.y + content.height, + ); +}); + test("pull quote restores the configured artwork at 768px", async ({ page, }) => { @@ -181,6 +224,19 @@ test("mobile pull quote matches the supplied visual reference", async ({ ); }); +test("mobile pull quote linework render remains stable", async ({ page }) => { + await page.goto(homepage); + + await expect(page.locator(".pull-quote__vector--mobile")).toHaveScreenshot( + "pullquote-linework-render.png", + { + animations: "disabled", + maxDiffPixelRatio: 0.001, + threshold: 0.02, + }, + ); +}); + test("mobile recent posts exposes previous and next controls", async ({ page, }) => { diff --git a/tests/mobile-homepage.spec.js-snapshots/pullquote-linework-render-chromium.png b/tests/mobile-homepage.spec.js-snapshots/pullquote-linework-render-chromium.png new file mode 100644 index 0000000..5887409 Binary files /dev/null and b/tests/mobile-homepage.spec.js-snapshots/pullquote-linework-render-chromium.png differ diff --git a/tests/mobile-homepage.spec.js-snapshots/pullquote-reference-chromium-win32.png b/tests/mobile-homepage.spec.js-snapshots/pullquote-reference-chromium.png similarity index 100% rename from tests/mobile-homepage.spec.js-snapshots/pullquote-reference-chromium-win32.png rename to tests/mobile-homepage.spec.js-snapshots/pullquote-reference-chromium.png diff --git a/views/blocks/pull-quote/pull-quote.css b/views/blocks/pull-quote/pull-quote.css index b1cd25a..ae01bc4 100644 --- a/views/blocks/pull-quote/pull-quote.css +++ b/views/blocks/pull-quote/pull-quote.css @@ -53,7 +53,7 @@ .pull-quote { background: color-mix(in oklch, var(--color-cwc-blue-03) 30%, white); border-bottom: 0; - height: calc(89.8vw - 1px); + min-height: calc(89.8vw - 1px); } .pull-quote::after { @@ -86,7 +86,8 @@ .pull-quote .pull-quote__content { align-items: center; display: flex; - height: calc(100% - 1rem); + margin-bottom: 1rem; + min-height: calc(89.8vw - 1rem - 1px); padding: 2.5rem 2rem; } @@ -96,3 +97,9 @@ width: 100%; } } + +@media (max-width: 360px) { + .pull-quote .pull-quote__content { + padding-block: 0.9375rem; + } +} diff --git a/views/blocks/pull-quote/pull-quote.php b/views/blocks/pull-quote/pull-quote.php index 9139da1..73c186f 100644 --- a/views/blocks/pull-quote/pull-quote.php +++ b/views/blocks/pull-quote/pull-quote.php @@ -28,12 +28,12 @@ $wrapper = blockWrapperAttributes( $classes, $is_preview ); ?>
> - -