Solo-Web-Works/CWC
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: harden responsive Our Work artwork

Browse Source
This commit is contained in:
Keith Solomon
2026-06-27 22:36:46 -05:00
parent 79ff6a1408
commit 948cc7e368
3 changed files with 127 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tests/mobile-homepage.spec.js
+95 -13
View File
@@ -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);
}
});
views/blocks/our-work/our-work.css
+25 -15
View File
@@ -202,10 +202,13 @@
@media (max-width: 767px) {
.our-work {
margin-bottom: 2rem;
min-height: clamp(44rem, 220.9vw, 55.5rem);
padding-top: 4.25rem;
}
.our-work.has-left-image.has-bottom-image {
min-height: clamp(44rem, 220.9vw, 55.5rem);
}
.our-work__vector-desktop {
display: none;
}
@@ -216,6 +219,21 @@
position: absolute;
}
/*
* CSS layers keep the approved external SVG available. Browsers do not load
* nested external images from an SVG embedded through an img element.
*/
.our-work__vector-mobile::after,
.our-work__vector-mobile-clip::before {
background-image: var(--our-work-vector-image);
background-repeat: no-repeat;
background-size: 100% 100%;
content: "";
height: 98.756vw;
position: absolute;
width: 238.806vw;
}
.our-work__vector-mobile-clip {
clip-path: polygon(
74.63% 24.77%,
@@ -233,22 +251,14 @@
position: absolute;
}
.our-work__vector-mobile img {
height: auto;
max-width: none;
object-fit: fill;
position: absolute;
width: min(238.806vw, 60rem);
.our-work__vector-mobile-clip::before {
left: 24.876vw;
top: 59.701vw;
}
.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__vector-mobile::after {
left: -106.965vw;
top: 121.891vw;
}
.our-work__inner {
views/blocks/our-work/our-work.php
+7 -18
View File
@@ -11,6 +11,7 @@ namespace CWC;
$left_image = get_field( 'left_image' );
$bottom_image = get_field( 'bottom_image' );
$vector_url = get_stylesheet_directory_uri() . '/views/blocks/our-work/our-work-vector.svg';
$classes = 'our-work mx-break-out mb-36';
@@ -31,28 +32,16 @@ $wrapper = blockWrapperAttributes( $classes, $is_preview );
<section <?php echo wp_kses_post( $wrapper ); ?>>
<div class="our-work__vector" aria-hidden="true">
<div class="our-work__vector-mobile">
<div class="our-work__vector-mobile-clip">
<img
class="our-work__vector-mobile-upper"
src="<?php echo esc_url( get_stylesheet_directory_uri() . '/views/blocks/our-work/our-work-vector.svg' ); ?>"
alt=""
loading="lazy"
role="presentation"
/>
</div>
<img
class="our-work__vector-mobile-lower"
src="<?php echo esc_url( get_stylesheet_directory_uri() . '/views/blocks/our-work/our-work-vector.svg' ); ?>"
alt=""
loading="lazy"
role="presentation"
/>
<div
class="our-work__vector-mobile"
style="<?php echo esc_attr( '--our-work-vector-image: url(' . esc_url( $vector_url ) . ');' ); ?>"
>
<div class="our-work__vector-mobile-clip"></div>
</div>
<div class="our-work__vector-desktop">
<img
src="<?php echo esc_url( get_stylesheet_directory_uri() . '/views/blocks/our-work/our-work-vector.svg' ); ?>"
src="<?php echo esc_url( $vector_url ); ?>"
alt=""
loading="lazy"
role="presentation"