feat: finish portfolio title, navigation, and destination effects
Add the approved name animation, rounded docking navigation, localized keyboard focus cue, unified builds card, and destination copy hierarchy.
Introduce lightweight one-shot meteors and a sun ring that repeats every three seconds at Contact. Open the email action in a separate browsing context. Preserve reduced-motion behavior and keep private handoff and visual-check artifacts out of version control.
Validation: 649 tests passed; all 20 failures in world-models and SceneCanvas reproduce on baseline 103427f. Typecheck, artifact verification, and transfer budgets passed. Client/SSR preview build passed before this commit. Existing baseline test failures remain unchanged.
This commit is contained in:
76
tests/browser/arrival-finale.spec.ts
Normal file
76
tests/browser/arrival-finale.spec.ts
Normal file
@@ -0,0 +1,76 @@
|
||||
import { expect, test } from '../helpers/serve-dist';
|
||||
|
||||
test('arrival draws six meteor triangles, uses warmed shaders, then stops drawing the meteors', async ({ page, distUrl }, testInfo) => {
|
||||
test.setTimeout(45_000);
|
||||
if (testInfo.project.name === 'desktop-chromium') await page.setViewportSize({ width: 1440, height: 900 });
|
||||
await page.addInitScript((quality: string) => {
|
||||
localStorage.setItem('portfolio.motion.maximum-quality', quality);
|
||||
const probe = { draws: 0, maxVertices: 0, programs: 0, frames: 0, time: -1, ring: 0 };
|
||||
(window as any).__arrivalProbe = probe;
|
||||
const proto = WebGL2RenderingContext.prototype;
|
||||
const meteorPrograms = new WeakSet<WebGLProgram>();
|
||||
const locations = new WeakMap<WebGLUniformLocation, { program: WebGLProgram; name: string }>();
|
||||
let activeProgram: WebGLProgram | null = null;
|
||||
const meteorShaders = new WeakSet<WebGLShader>();
|
||||
const source = proto.shaderSource;
|
||||
proto.shaderSource = function (shader, text) {
|
||||
if (text.includes('attribute vec2 aFlight;')) meteorShaders.add(shader);
|
||||
return source.call(this, shader, text);
|
||||
};
|
||||
const attach = proto.attachShader;
|
||||
proto.attachShader = function (program, shader) {
|
||||
if (meteorShaders.has(shader) && !meteorPrograms.has(program)) {
|
||||
meteorPrograms.add(program);
|
||||
probe.programs++;
|
||||
}
|
||||
return attach.call(this, program, shader);
|
||||
};
|
||||
const getUniform = proto.getUniformLocation;
|
||||
proto.getUniformLocation = function (program, name) {
|
||||
const location = getUniform.call(this, program, name);
|
||||
if (location) locations.set(location, { program, name });
|
||||
return location;
|
||||
};
|
||||
const uniform = proto.uniform1f;
|
||||
proto.uniform1f = function (location, value) {
|
||||
const entry = location && locations.get(location);
|
||||
if (entry?.name === 'uTime' && meteorPrograms.has(entry.program)) probe.time = value;
|
||||
if (entry?.name === 'uRingOpacity') probe.ring = value;
|
||||
return uniform.call(this, location, value);
|
||||
};
|
||||
const useProgram = proto.useProgram;
|
||||
proto.useProgram = function (program) { activeProgram = program; return useProgram.call(this, program); };
|
||||
const draw = proto.drawArrays;
|
||||
proto.drawArrays = function (mode, first, count) {
|
||||
if (activeProgram && meteorPrograms.has(activeProgram)) {
|
||||
probe.draws++;
|
||||
probe.maxVertices = Math.max(probe.maxVertices, count);
|
||||
}
|
||||
return draw.call(this, mode, first, count);
|
||||
};
|
||||
const clear = proto.clear;
|
||||
proto.clear = function (mask) { probe.frames++; return clear.call(this, mask); };
|
||||
}, process.env.ARRIVAL_TEST_QUALITY === 'high' ? 'high' : 'low');
|
||||
await page.goto(distUrl);
|
||||
await expect(page.locator('html')).toHaveAttribute('data-expressway', 'live');
|
||||
const read = () => page.evaluate(() => ({ ...(window as any).__arrivalProbe }));
|
||||
const baseline = await read();
|
||||
expect(baseline.draws).toBe(1); // Transparent startup warm-up only.
|
||||
expect(baseline.programs).toBe(1);
|
||||
await page.locator('.hero-journey__action--primary').click();
|
||||
await expect(page.locator('.journey-world')).toHaveAttribute('data-arrived', 'true');
|
||||
await expect.poll(async () => (await read()).draws, { timeout: 12_000 }).toBeGreaterThan(baseline.draws);
|
||||
await expect.poll(async () => (await read()).ring).toBeGreaterThan(0);
|
||||
await expect.poll(async () => (await read()).time).toBeGreaterThan(1.2);
|
||||
await page.screenshot({ path: testInfo.outputPath('arrival-active.png') });
|
||||
await expect.poll(async () => (await read()).time, { timeout: 15_000 }).toBeGreaterThan(3.8);
|
||||
const ending = await read();
|
||||
await expect.poll(async () => (await read()).frames).toBeGreaterThan(ending.frames + 30);
|
||||
const settled = await read();
|
||||
expect(settled.maxVertices).toBe(18);
|
||||
expect(settled.programs).toBe(baseline.programs);
|
||||
await expect.poll(async () => (await read()).ring).toBeGreaterThan(0);
|
||||
await expect.poll(async () => (await read()).frames).toBeGreaterThan(settled.frames + 30);
|
||||
expect((await read()).draws).toBe(settled.draws);
|
||||
await page.screenshot({ path: testInfo.outputPath('arrival-settled.png') });
|
||||
});
|
||||
@@ -1,6 +1,40 @@
|
||||
import AxeBuilder from '@axe-core/playwright';
|
||||
import { expect, test } from '../helpers/serve-dist';
|
||||
|
||||
test('builds heading shares the first project surface and contact keeps a clear copy hierarchy', async ({ page, distUrl }) => {
|
||||
await page.emulateMedia({ reducedMotion: 'reduce' });
|
||||
await page.goto(distUrl);
|
||||
const joined = await page.locator('#selected-builds-heading').evaluate(heading => {
|
||||
const surface = heading.closest('.project-stage__lead');
|
||||
return Boolean(surface?.querySelector('.project-case-study') &&
|
||||
getComputedStyle(surface).backgroundColor !== 'rgba(0, 0, 0, 0)');
|
||||
});
|
||||
expect(joined).toBe(true);
|
||||
const hierarchy = await page.locator('#contact').evaluate(section => {
|
||||
const lead = section.querySelector('.contact-destination__copy');
|
||||
const availability = section.querySelector('.contact-destination__availability');
|
||||
return Boolean(lead && availability &&
|
||||
parseFloat(getComputedStyle(lead).fontSize) > parseFloat(getComputedStyle(availability).fontSize));
|
||||
});
|
||||
expect(hierarchy).toBe(true);
|
||||
});
|
||||
|
||||
test('the live reading mask measures the inset builds heading', async ({ page, distUrl }) => {
|
||||
await page.goto(distUrl);
|
||||
await expect(page.locator('html')).toHaveAttribute('data-expressway', 'live');
|
||||
const geometry = await page.locator('#selected-builds').evaluate(section => ({
|
||||
offset: parseFloat((section as HTMLElement).style.getPropertyValue('--chapter-heading-offset')) || 0,
|
||||
actual: section.querySelector('h2')!.getBoundingClientRect().top - section.getBoundingClientRect().top,
|
||||
}));
|
||||
expect(geometry.offset).toBeGreaterThan(20);
|
||||
expect(geometry.offset).toBeCloseTo(geometry.actual, 1);
|
||||
const disclosure = page.locator('.site-navigation summary');
|
||||
if (await disclosure.isVisible()) await disclosure.click();
|
||||
await page.locator('.site-navigation a[href="#selected-builds"]').click();
|
||||
await expect.poll(() => page.locator('#selected-builds-heading').evaluate(heading =>
|
||||
Number(getComputedStyle(heading).opacity))).toBe(1);
|
||||
});
|
||||
|
||||
test('start navigation, contact identity, and toolkit icons use the approved content', async ({ page, distUrl }) => {
|
||||
await page.emulateMedia({ reducedMotion: 'reduce' });
|
||||
const response = await page.goto(distUrl);
|
||||
@@ -11,6 +45,10 @@ test('start navigation, contact identity, and toolkit icons use the approved con
|
||||
await page.locator('.hero-journey__action--primary').click();
|
||||
await expect(page).toHaveURL(/#contact$/);
|
||||
await expect(page.locator('#contact')).toBeInViewport();
|
||||
await expect(page.locator('.journey-world')).toHaveAttribute('data-arrived', 'true');
|
||||
await expect(page.locator('.journey-world')).toHaveAttribute('data-static-fallback', 'true');
|
||||
await expect(page.locator('.journey-canvas')).toHaveCount(0);
|
||||
expect(await page.locator('.journey-poster').evaluate(poster => getComputedStyle(poster).filter)).not.toBe('none');
|
||||
await expect(page.locator('.contact-avatar')).toBeVisible();
|
||||
await expect(page.locator('.contact-social-link')).toHaveText(['LinkedIn', 'GitHub', 'GitLab']);
|
||||
const missing = await page.locator('[data-testid="toolkit-technology"]').evaluateAll(items => items.filter(item => !item.querySelector('svg')).map(item => item.textContent));
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { expect, expectInsetFocusIndicator, test } from "../helpers/serve-dist";
|
||||
import { expect, expectContentFocusCue, test } from "../helpers/serve-dist";
|
||||
|
||||
const navHrefs = [
|
||||
"#start",
|
||||
@@ -130,7 +130,7 @@ test("activating the skip link focuses the visible unobscured portfolio content"
|
||||
"tabindex",
|
||||
"-1",
|
||||
);
|
||||
await expectInsetFocusIndicator(page, "#portfolio-content");
|
||||
await expectContentFocusCue(page);
|
||||
});
|
||||
|
||||
test("explicit section activation scrolls to and focuses its heading", async ({
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import type { PortfolioContent } from "@/content/types";
|
||||
import { expect, expectInsetFocusIndicator, test } from "../helpers/serve-dist";
|
||||
import { expect, expectContentFocusCue, test } from "../helpers/serve-dist";
|
||||
|
||||
test.use({ javaScriptEnabled: false });
|
||||
|
||||
@@ -401,7 +401,7 @@ test("keeps every raw SSR reading-path segment visible without JavaScript", asyn
|
||||
.locator("main > section")
|
||||
.evaluateAll((sections) => sections.map((section) => section.id)),
|
||||
).toEqual(sectionIds);
|
||||
expect(await page.locator("main > section > h2").allTextContents()).toEqual(
|
||||
expect(await page.locator("main > section h2").allTextContents()).toEqual(
|
||||
sectionHeadings,
|
||||
);
|
||||
|
||||
@@ -518,7 +518,7 @@ test("activating the skip link focuses visible portfolio content without JavaScr
|
||||
"tabindex",
|
||||
"-1",
|
||||
);
|
||||
await expectInsetFocusIndicator(page, "#portfolio-content");
|
||||
await expectContentFocusCue(page);
|
||||
});
|
||||
|
||||
test("retains native section navigation when scripts are disabled", async ({
|
||||
|
||||
143
tests/browser/title-navigation.spec.ts
Normal file
143
tests/browser/title-navigation.spec.ts
Normal file
@@ -0,0 +1,143 @@
|
||||
import { expect, test } from '../helpers/serve-dist';
|
||||
|
||||
test('desktop navigation docks without stretching labels or shifting the document', async ({ page, distUrl }, testInfo) => {
|
||||
test.skip(testInfo.project.name !== 'desktop-chromium');
|
||||
await page.setViewportSize({ width: 1920, height: 1080 });
|
||||
await page.emulateMedia({ reducedMotion: 'reduce' });
|
||||
await page.goto(distUrl, { waitUntil: 'networkidle' });
|
||||
await page.evaluate(() => document.fonts.ready);
|
||||
const nav = page.locator('.site-navigation');
|
||||
await expect(nav).toHaveAttribute('data-enhanced', 'true');
|
||||
const surfaceScale = () => nav.evaluate(el => new DOMMatrixReadOnly(getComputedStyle(el, '::before').transform).a);
|
||||
expect(await surfaceScale()).toBeLessThan(1);
|
||||
const label = nav.locator('a').first();
|
||||
const initialFont = await label.evaluate(el => getComputedStyle(el).fontSize);
|
||||
// Measure the content beside this fixed header, not unrelated lazy media
|
||||
// farther down the page that can settle independently of navigation.
|
||||
const heroGeometry = () => page.locator('#start').evaluate(el => ({
|
||||
top: el.getBoundingClientRect().top + scrollY,
|
||||
height: el.getBoundingClientRect().height,
|
||||
}));
|
||||
const initialHero = await heroGeometry();
|
||||
await page.evaluate(() => scrollTo(0, 100));
|
||||
await expect.poll(async () => (await nav.boundingBox())!.y).toBeLessThan(1);
|
||||
await expect.poll(async () => (await nav.boundingBox())!.width).toBe(1920);
|
||||
await expect.poll(surfaceScale).toBe(1);
|
||||
expect(await label.evaluate(el => getComputedStyle(el).fontSize)).toBe(initialFont);
|
||||
expect(await heroGeometry()).toEqual(initialHero);
|
||||
await page.evaluate(() => scrollTo(0, 0));
|
||||
await expect.poll(async () => (await nav.boundingBox())!.y).toBeGreaterThan(10);
|
||||
});
|
||||
|
||||
test('selected navigation has rounded inset highlights', async ({ page, distUrl }) => {
|
||||
await page.goto(distUrl);
|
||||
const disclosure = page.locator('.site-navigation summary');
|
||||
if (await disclosure.isVisible()) await disclosure.click();
|
||||
const selected = page.locator('.site-navigation a[aria-current="page"]');
|
||||
expect(await selected.evaluate(el => parseFloat(getComputedStyle(el).borderTopLeftRadius))).toBeGreaterThanOrEqual(5);
|
||||
await selected.focus();
|
||||
await page.keyboard.press('Shift');
|
||||
expect(await selected.evaluate(el => getComputedStyle(el).outlineStyle)).not.toBe('none');
|
||||
});
|
||||
|
||||
test('skip link uses a localized visible cue and Tab continues into content', async ({ page, distUrl }) => {
|
||||
await page.emulateMedia({ reducedMotion: 'reduce' });
|
||||
await page.goto(distUrl);
|
||||
await page.keyboard.press('Tab');
|
||||
await expect(page.locator('.skip-link')).toBeFocused();
|
||||
await page.keyboard.press('Enter');
|
||||
const main = page.locator('#portfolio-content');
|
||||
await expect(main).toBeFocused();
|
||||
expect(await main.evaluate(el => getComputedStyle(el).boxShadow)).toBe('none');
|
||||
expect(await main.evaluate(el => getComputedStyle(el).outlineStyle)).toBe('none');
|
||||
await expect(page.locator('.content-focus-cue')).toBeVisible();
|
||||
const cue = await page.locator('.content-focus-cue').boundingBox();
|
||||
expect(cue!.width).toBeLessThan(240);
|
||||
expect(cue!.height).toBeLessThan(60);
|
||||
await page.keyboard.press('Tab');
|
||||
await expect(page.locator('.hero-journey__action--primary')).toBeFocused();
|
||||
expect(await page.locator('.hero-journey__action--primary').evaluate(el => getComputedStyle(el).outlineStyle)).not.toBe('none');
|
||||
await expect(page.locator('.content-focus-cue')).not.toBeVisible();
|
||||
});
|
||||
|
||||
test('Shift cannot draw a page-wide focus frame in the live reading stage', async ({ page, distUrl }) => {
|
||||
await page.goto(distUrl);
|
||||
await page.locator('main').evaluate(el => (el as HTMLElement).focus({ preventScroll: true }));
|
||||
await page.keyboard.press('Shift');
|
||||
expect(await page.locator('main').evaluate(el => ({ outline: getComputedStyle(el).outlineStyle, shadow: getComputedStyle(el).boxShadow }))).toEqual({ outline: 'none', shadow: 'none' });
|
||||
await page.locator('.hero-journey__action--primary').focus();
|
||||
await page.keyboard.press('Shift');
|
||||
expect(await page.locator('.hero-journey__action--primary').evaluate(el => getComputedStyle(el).outlineStyle)).not.toBe('none');
|
||||
});
|
||||
|
||||
test('name decoration pauses offscreen and leaves one readable heading', async ({ page, distUrl }) => {
|
||||
await page.goto(distUrl);
|
||||
await expect(page.getByRole('heading', { level: 1 })).toHaveText('Luca Pîslaru');
|
||||
await page.evaluate(() => document.fonts.ready);
|
||||
const title = await page.locator('.hero-name').evaluate(el => ({
|
||||
height: el.getBoundingClientRect().height,
|
||||
lineHeight: parseFloat(getComputedStyle(el).lineHeight),
|
||||
}));
|
||||
expect(title.height).toBeLessThanOrEqual(title.lineHeight * 2.1);
|
||||
const particles = page.locator('.hero-name-particles');
|
||||
await expect(particles).toHaveAttribute('aria-hidden', 'true');
|
||||
await expect(particles).toHaveAttribute('data-active', 'true');
|
||||
const canvas = particles.locator('canvas');
|
||||
await expect(canvas).toHaveCount(1);
|
||||
const nameBox = await particles.boundingBox();
|
||||
const effectBox = await canvas.boundingBox();
|
||||
expect(effectBox!.x).toBeCloseTo(nameBox!.x - 12, 0);
|
||||
expect(effectBox!.width).toBeCloseTo(nameBox!.width + 24, 0);
|
||||
const roleBox = await page.locator('.hero-journey__role').boundingBox();
|
||||
// The complete drawing area (including every wave crest) clears the role.
|
||||
expect(roleBox!.y - (effectBox!.y + effectBox!.height)).toBeGreaterThanOrEqual(4);
|
||||
await expect.poll(() => canvas.evaluate(el => {
|
||||
const context = (el as HTMLCanvasElement).getContext('2d')!;
|
||||
const { width, height } = el as HTMLCanvasElement;
|
||||
// Sparks occupy the name area, while the waves sit below it.
|
||||
return [
|
||||
context.getImageData(0, 0, width, Math.floor(height * 0.75)).data.some(value => value > 0),
|
||||
context.getImageData(0, Math.floor(height * 0.92), width, Math.max(1, Math.floor(height * 0.08))).data.some(value => value > 0),
|
||||
];
|
||||
})).toEqual([true, true]);
|
||||
expect(await particles.evaluate(el => getComputedStyle(el, '::after').animationName)).toBe('name-sheen');
|
||||
expect(await particles.evaluate(el => getComputedStyle(el, '::after').animationPlayState)).toBe('running');
|
||||
const firstFrame = await canvas.evaluate(el => (el as HTMLCanvasElement).toDataURL());
|
||||
await expect.poll(() => canvas.evaluate(el => (el as HTMLCanvasElement).toDataURL())).not.toBe(firstFrame);
|
||||
await page.locator('#contact').scrollIntoViewIfNeeded();
|
||||
await expect(particles).toHaveAttribute('data-active', 'false');
|
||||
expect(await particles.evaluate(el => getComputedStyle(el, '::after').animationPlayState)).toBe('paused');
|
||||
const stoppedFrame = await canvas.evaluate(el => (el as HTMLCanvasElement).toDataURL());
|
||||
await page.waitForTimeout(150);
|
||||
expect(await canvas.evaluate(el => (el as HTMLCanvasElement).toDataURL())).toBe(stoppedFrame);
|
||||
});
|
||||
|
||||
test('wave animation clears the role text across desktop, short screens, and narrow phones', async ({ page, distUrl }, testInfo) => {
|
||||
test.skip(testInfo.project.name !== 'desktop-chromium');
|
||||
await page.goto(distUrl);
|
||||
for (const [width, height] of [[1920, 1080], [1024, 768], [820, 600], [768, 520], [393, 851], [320, 640]]) {
|
||||
await page.setViewportSize({ width: width!, height: height! });
|
||||
await page.evaluate(() => document.fonts.ready);
|
||||
await expect.poll(async () => {
|
||||
const effect = await page.locator('.hero-name-particles canvas').boundingBox();
|
||||
const role = await page.locator('.hero-journey__role').boundingBox();
|
||||
return role!.y - (effect!.y + effect!.height);
|
||||
}, { message: `Wave clearance at ${width} × ${height}` }).toBeGreaterThanOrEqual(4);
|
||||
expect(await page.evaluate(() => document.documentElement.scrollWidth <= innerWidth)).toBe(true);
|
||||
}
|
||||
});
|
||||
|
||||
test('reduced motion and no-JavaScript retain the name and native skip link', async ({ browser, page, distUrl }) => {
|
||||
await page.emulateMedia({ reducedMotion: 'reduce' });
|
||||
await page.goto(distUrl);
|
||||
await expect(page.locator('.hero-name-particles')).toHaveAttribute('data-active', 'false');
|
||||
const context = await browser.newContext({ javaScriptEnabled: false });
|
||||
const native = await context.newPage();
|
||||
await native.goto(distUrl);
|
||||
await expect(native.getByRole('heading', { level: 1 })).toHaveText('Luca Pîslaru');
|
||||
await native.keyboard.press('Tab');
|
||||
await native.keyboard.press('Enter');
|
||||
await expect(native.locator('main')).toBeFocused();
|
||||
await expect(native.locator('.content-focus-cue')).toBeVisible();
|
||||
await context.close();
|
||||
});
|
||||
Reference in New Issue
Block a user