refactor: harden responsive Our Work artwork

2026-06-27 22:36:46 -05:00
parent 79ff6a1408
commit 948cc7e368
3 changed files with 127 additions and 46 deletions
@@ -470,23 +470,78 @@ test("mobile Our Work uses its dedicated linework composition", async ({
 }) => {
    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"),
-    );
+    const clip = mobileVector.locator(".our-work__vector-mobile-clip");
+    const composition = await mobileVector.evaluate((element) => {
+        const clipElement = element.querySelector(
+            ".our-work__vector-mobile-clip",
+        );
+        const upper = getComputedStyle(clipElement, "::before");
+        const lower = getComputedStyle(element, "::after");
+
+        return {
+            lowerBackground: lower.backgroundImage,
+            lowerWidth: Number.parseFloat(lower.width),
+            upperBackground: upper.backgroundImage,
+            upperWidth: Number.parseFloat(upper.width),
+        };
+    });

    await expect(mobileVector).toBeVisible();
+    await expect(clip).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);
+    await expect(mobileVector.locator("img")).toHaveCount(0);
+    expect(composition.upperBackground).toContain("our-work-vector.svg");
+    expect(composition.lowerBackground).toContain("our-work-vector.svg");
+    expectNear(composition.upperWidth, 960, 4);
+    expectNear(composition.lowerWidth, 960, 4);
+});
+
+test("mobile Our Work reserves reference height only for both images", async ({
+    page,
+}) => {
+    await page.goto(homepage);
+
+    const minHeights = await page.locator(".our-work").evaluate((block) => {
+        const measureVariant = (removedClasses) => {
+            const clone = block.cloneNode(true);
+            clone.classList.remove(...removedClasses);
+            if (removedClasses.includes("has-left-image")) {
+                clone.querySelector(".our-work__media--left")?.remove();
+            }
+            if (removedClasses.includes("has-bottom-image")) {
+                clone.querySelector(".our-work__media--bottom")?.remove();
+            }
+            document.body.append(clone);
+            const measurements = {
+                height: clone.getBoundingClientRect().height,
+                minHeight: Number.parseFloat(getComputedStyle(clone).minHeight),
+            };
+            clone.remove();
+            return measurements;
+        };
+
+        return {
+            bothImages: {
+                height: block.getBoundingClientRect().height,
+                minHeight: Number.parseFloat(getComputedStyle(block).minHeight),
+            },
+            bottomOnly: measureVariant(["has-left-image"]),
+            leftOnly: measureVariant(["has-bottom-image"]),
+            noImages: measureVariant(["has-left-image", "has-bottom-image"]),
+        };
+    });
+
+    expectNear(minHeights.bothImages.minHeight, 888, 3);
+    expectNear(minHeights.bothImages.height, 888, 12);
+    for (const variant of [
+        minHeights.bottomOnly,
+        minHeights.leftOnly,
+        minHeights.noImages,
+    ]) {
+        expect(variant.minHeight).toBe(0);
+        expect(variant.height).toBeLessThan(minHeights.bothImages.height);
+    }
 });

 test("mobile Our Work linework render remains stable", async ({ page }) => {
@@ -553,6 +608,33 @@ test("mobile Our Work remains contained at responsive endpoints", async ({

        expectNear(primary.y, secondary.y, 2);
        expect(left.y).toBeLessThan(bottom.y);
+
+        const vectorScale = await page
+            .locator(".our-work__vector-mobile")
+            .evaluate((element) => {
+                const clip = element.querySelector(
+                    ".our-work__vector-mobile-clip",
+                );
+                const upper = getComputedStyle(clip, "::before");
+                const lower = getComputedStyle(element, "::after");
+
+                return {
+                    lowerLeft: Number.parseFloat(lower.left),
+                    lowerTop: Number.parseFloat(lower.top),
+                    lowerWidth: Number.parseFloat(lower.width),
+                    upperLeft: Number.parseFloat(upper.left),
+                    upperTop: Number.parseFloat(upper.top),
+                    upperWidth: Number.parseFloat(upper.width),
+                };
+            });
+        const scale = width / 402;
+
+        expectNear(vectorScale.upperWidth, 960 * scale, 4);
+        expectNear(vectorScale.lowerWidth, 960 * scale, 4);
+        expectNear(vectorScale.upperLeft, 100 * scale, 3);
+        expectNear(vectorScale.upperTop, 240 * scale, 3);
+        expectNear(vectorScale.lowerLeft, -430 * scale, 4);
+        expectNear(vectorScale.lowerTop, 490 * scale, 4);
    }
 });