diff --git a/static/img/pullquote-mobile-linework.png b/static/img/pullquote-mobile-linework.png new file mode 100644 index 0000000..69ecb48 Binary files /dev/null and b/static/img/pullquote-mobile-linework.png differ diff --git a/tests/mobile-homepage.spec.js b/tests/mobile-homepage.spec.js index ccedabd..0360c08 100644 --- a/tests/mobile-homepage.spec.js +++ b/tests/mobile-homepage.spec.js @@ -100,11 +100,14 @@ test("mobile pull quote matches the reference scale", async ({ page }) => { const quote = await getBox(page.locator(".pull-quote")); const text = await getBox(page.locator(".pull-quote__text")); - const vectorImage = page.locator(".pull-quote__vector img"); - const vector = await getBox(vectorImage); - const bandHeight = await page.locator(".pull-quote").evaluate((element) => - Number.parseFloat(getComputedStyle(element, "::after").height), - ); + const desktopVector = page.locator(".pull-quote__vector--bg"); + const mobileVector = page.locator(".pull-quote__vector--mobile"); + const vector = await getBox(mobileVector); + const bandHeight = await page + .locator(".pull-quote") + .evaluate((element) => + Number.parseFloat(getComputedStyle(element, "::after").height), + ); expectNear(quote.height, 361, 6); expectNear(bandHeight, 16, 1); @@ -119,9 +122,9 @@ test("mobile pull quote matches the reference scale", async ({ page }) => { expectNear(vector.x, quote.x, 3); expectNear(vector.width, quote.width, 3); expectNear(vector.height, quote.height - bandHeight, 3); - await expect(vectorImage).toHaveCSS("max-width", "none"); - await expect(vectorImage).toHaveCSS("object-fit", "fill"); - await expect(vectorImage).toHaveCSS("position", "static"); + await expect(mobileVector).toBeVisible(); + await expect(desktopVector).toBeHidden(); + await expect(mobileVector).toHaveCSS("object-fit", "cover"); }); test("mobile pull quote scales proportionally through 767px", async ({ @@ -136,11 +139,31 @@ test("mobile pull quote scales proportionally through 767px", async ({ 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, - ); + expectNear(text.y + text.height / 2, quote.y + (quote.height - 16) / 2, 8); +}); + +test("pull quote restores the configured artwork at 768px", async ({ + page, +}) => { + await page.setViewportSize({ width: 768, height: 900 }); + await page.goto(homepage); + + const desktopVector = page.locator(".pull-quote__vector--bg"); + const mobileVector = page.locator(".pull-quote__vector--mobile"); + const quote = await getBox(page.locator(".pull-quote")); + const vector = await getBox(desktopVector); + const borderWidth = await page + .locator(".pull-quote") + .evaluate((element) => + Number.parseFloat(getComputedStyle(element).borderBottomWidth), + ); + + await expect(desktopVector).toBeVisible(); + await expect(mobileVector).toBeHidden(); + expectNear(vector.x, quote.x, 3); + expectNear(vector.width, quote.width, 3); + expectNear(vector.height, quote.height - borderWidth, 3); + await expect(desktopVector).toHaveCSS("object-fit", "cover"); }); test("mobile pull quote matches the supplied visual reference", async ({ @@ -152,7 +175,7 @@ test("mobile pull quote matches the supplied visual reference", async ({ "pullquote-reference.png", { animations: "disabled", - maxDiffPixelRatio: 0.111, + maxDiffPixelRatio: 0.071, threshold: 0.05, }, ); diff --git a/views/blocks/pull-quote/pull-quote.css b/views/blocks/pull-quote/pull-quote.css index 061f9cb..b1cd25a 100644 --- a/views/blocks/pull-quote/pull-quote.css +++ b/views/blocks/pull-quote/pull-quote.css @@ -18,6 +18,10 @@ width: 100%; } + .pull-quote__vector .pull-quote__vector--mobile { + display: none; + } + .pull-quote__content { padding: 5rem 0; position: relative; @@ -32,7 +36,8 @@ text-align: center; text-wrap: balance; - strong, b { + strong, + b { color: var(--color-cwc-blue-02); font-weight: 800; } @@ -66,10 +71,15 @@ bottom: 1rem; } - .pull-quote .pull-quote__vector img { + .pull-quote .pull-quote__vector .pull-quote__vector--bg { + display: none; + } + + .pull-quote .pull-quote__vector .pull-quote__vector--mobile { + display: block; height: 100%; max-width: none; - object-fit: fill; + object-fit: cover; width: 100%; } diff --git a/views/blocks/pull-quote/pull-quote.php b/views/blocks/pull-quote/pull-quote.php index 934eb42..9139da1 100644 --- a/views/blocks/pull-quote/pull-quote.php +++ b/views/blocks/pull-quote/pull-quote.php @@ -31,6 +31,7 @@ $wrapper = blockWrapperAttributes( $classes, $is_preview );