diff --git a/tests/mobile-homepage.spec.js b/tests/mobile-homepage.spec.js index 71bc1b3..a0fb3ba 100644 --- a/tests/mobile-homepage.spec.js +++ b/tests/mobile-homepage.spec.js @@ -457,15 +457,49 @@ test("mobile Our Work contains both reference images", async ({ page }) => { const block = await getBox(page.locator(".our-work")); const left = await getBox(page.locator(".our-work__media--left")); const bottom = await getBox(page.locator(".our-work__media--bottom")); - const vector = await getBox(page.locator(".our-work__vector img")); expectNear(block.height, 888, 12); expectNear(left.width, 189, 5); expect(bottom.width).toBeGreaterThanOrEqual(335); expect(bottom.x).toBeGreaterThanOrEqual(60); expect(bottom.x + bottom.width).toBeLessThanOrEqual(402); - expectNear(vector.width, 474, 4); - expectNear(vector.y - block.y, 160, 3); +}); + +test("mobile Our Work uses its dedicated linework composition", async ({ + page, +}) => { + await page.goto(homepage); + + const block = await getBox(page.locator(".our-work")); + const mobileVector = page.locator(".our-work__vector-mobile"); + const upper = await getBox( + mobileVector.locator(".our-work__vector-mobile-upper"), + ); + const lower = await getBox( + mobileVector.locator(".our-work__vector-mobile-lower"), + ); + + await expect(mobileVector).toBeVisible(); + await expect(page.locator(".our-work__vector-desktop")).toBeHidden(); + expectNear(upper.x - block.x, 100, 3); + expectNear(upper.y - block.y, 240, 3); + expectNear(upper.width, 960, 4); + expectNear(lower.x - block.x, -430, 3); + expectNear(lower.y - block.y, 490, 3); + expectNear(lower.width, 960, 4); +}); + +test("mobile Our Work linework render remains stable", async ({ page }) => { + await page.goto(homepage); + + await expect(page.locator(".our-work")).toHaveScreenshot( + "our-work-linework-render.png", + { + animations: "disabled", + maxDiffPixelRatio: 0.025, + threshold: 0.08, + }, + ); }); test("mobile Our Work follows the reference content and overlap order", async ({ @@ -528,12 +562,18 @@ test("Our Work restores its tablet layout at 768px", async ({ page }) => { const block = page.locator(".our-work"); const inner = block.locator(".our-work__inner"); - const vector = block.locator(".our-work__vector img"); + const vector = block.locator(".our-work__vector-desktop img"); await expect(block).toHaveCSS("min-height", "0px"); await expect(block).toHaveCSS("padding-top", "64px"); await expect(inner).toHaveCSS("padding-left", "38.4px"); await expect(vector).toHaveCSS("width", "768px"); + await expect(block.locator(".our-work__vector-mobile")).toBeHidden(); + expect( + await vector.evaluate( + (image) => /** @type {HTMLImageElement} */ (image).currentSrc, + ), + ).toContain("our-work-vector.svg"); }); test("mobile recent posts exposes previous and next controls", async ({ diff --git a/tests/mobile-homepage.spec.js-snapshots/our-work-linework-render-chromium.png b/tests/mobile-homepage.spec.js-snapshots/our-work-linework-render-chromium.png new file mode 100644 index 0000000..4c13322 Binary files /dev/null and b/tests/mobile-homepage.spec.js-snapshots/our-work-linework-render-chromium.png differ diff --git a/views/blocks/our-work/our-work.css b/views/blocks/our-work/our-work.css index 81a80a2..8c466f2 100644 --- a/views/blocks/our-work/our-work.css +++ b/views/blocks/our-work/our-work.css @@ -35,6 +35,16 @@ width: 100%; } +.our-work__vector-desktop { + display: block; + height: 100%; + width: 100%; +} + +.our-work__vector-mobile { + display: none; +} + .our-work__inner { display: grid; gap: clamp(2rem, 4vw, 4rem) 2.5rem; @@ -196,13 +206,49 @@ padding-top: 4.25rem; } - .our-work__vector img { - height: 118%; + .our-work__vector-desktop { + display: none; + } + + .our-work__vector-mobile { + display: block; + inset: 0; + position: absolute; + } + + .our-work__vector-mobile-clip { + clip-path: polygon( + 74.63% 24.77%, + 100% 24.77%, + 100% 56.31%, + 0 56.31%, + 0 48.42%, + 54.73% 48.42%, + 54.73% 43.92%, + 67.16% 43.92%, + 67.16% 38.29%, + 74.63% 38.29% + ); + inset: 0; + position: absolute; + } + + .our-work__vector-mobile img { + height: auto; max-width: none; - object-fit: cover; - object-position: 85% center; - transform: translateY(clamp(8rem, 39.8vw, 10rem)); - width: 118%; + object-fit: fill; + position: absolute; + width: min(238.806vw, 60rem); + } + + .our-work__vector-mobile-upper { + left: min(24.876vw, 6.25rem); + top: min(59.701vw, 15rem); + } + + .our-work__vector-mobile-lower { + left: max(-106.965vw, -26.875rem); + top: min(121.891vw, 30.625rem); } .our-work__inner { diff --git a/views/blocks/our-work/our-work.php b/views/blocks/our-work/our-work.php index 3317be2..a902923 100644 --- a/views/blocks/our-work/our-work.php +++ b/views/blocks/our-work/our-work.php @@ -31,12 +31,33 @@ $wrapper = blockWrapperAttributes( $classes, $is_preview );
>