Skip to content

fix(camera): spotlight() paints over its own target #44

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
shreyaskarnik merged 2 commits into from
Aug 25, 2026
Merged

fix(camera): spotlight() paints over its own target #44

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
6cd5cfa
fix(camera): cut the spotlight hole with evenodd
Joilence Aug 14, 2026
da93906
docs(camera): trim the cutout comments
Joilence Aug 23, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions src/camera.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -114,10 +114,15 @@ export async function spotlight(

const overlay = document.createElement('div');
overlay.setAttribute(attr, 'spotlight');
// `evenodd` because both rings of the cutout are written in the same
// winding order, so the default `nonzero` fills the interior instead of
// clearing it and the overlay paints as a solid scrim with no hole. It
// also keeps the cutout independent of vertex order.
overlay.style.cssText = `
position: fixed; inset: 0; z-index: 99990; pointer-events: none;
background: rgba(0,0,0,${opacity});
clip-path: polygon(
evenodd,
0% 0%, 0% 100%, 100% 100%, 100% 0%, 0% 0%,
${rect.left - padding}px ${rect.top - padding}px,
${rect.left - padding}px ${rect.bottom + padding}px,
Expand Down Expand Up @@ -223,10 +228,12 @@ export async function dimAround(
const padding = 0;
const overlay = document.createElement('div');
overlay.setAttribute(attr, 'dim-around');
// `evenodd` for the same reason as in spotlight() above.
overlay.style.cssText = `
position: fixed; inset: 0; z-index: 99990; pointer-events: none;
background: rgba(0,0,0,${1 - dimOpacity});
clip-path: polygon(
evenodd,
0% 0%, 0% 100%, 100% 100%, 100% 0%, 0% 0%,
${rect.left - padding}px ${rect.top - padding}px,
${rect.left - padding}px ${rect.bottom + padding}px,
Expand Down
66 changes: 66 additions & 0 deletions tests/e2e/camera.e2e.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
import { describe, it, expect } from 'vitest';
import { chromium, type Browser } from 'playwright';
import { spotlight } from '../../src/camera.js';

async function canLaunchChromium(): Promise<boolean> {
try {
const browser = await chromium.launch({ headless: true });
await browser.close();
return true;
} catch {
return false;
}
}

const describeCameraE2E = (await canLaunchChromium()) ? describe : describe.skip;

/** White target on a mid-grey field, so the scrim's effect on each is obvious. */
const FIXTURE = `<!doctype html><meta charset="utf-8">
<style>
body { margin: 0; height: 100vh; background: #808080; display: grid; place-items: center; }
#target { width: 300px; height: 100px; background: #fff; border: 0; }
</style>
<button id="target"></button>`;

describeCameraE2E('E2E: camera effects', () => {
it('spotlight leaves the target untouched and dims everything else', async () => {
let browser: Browser | undefined;
try {
browser = await chromium.launch({ headless: true });
const page = await browser.newPage({ viewport: { width: 1280, height: 720 } });
await page.setContent(FIXTURE);

const box = (await page.locator('#target').boundingBox())!;
// Both regions sit clear of the cutout edge, so antialiasing cannot skew it.
const insideTarget = {
x: Math.round(box.x + 40),
y: Math.round(box.y + 25),
width: 120,
height: 50,
};
const awayFromTarget = { x: 40, y: 40, width: 120, height: 50 };

const targetBefore = await page.screenshot({ clip: insideTarget });
const elsewhereBefore = await page.screenshot({ clip: awayFromTarget });

await spotlight(page, '#target', { duration: 8000, fadeIn: 0, padding: 12 });
await page.waitForTimeout(150);

const targetAfter = await page.screenshot({ clip: insideTarget });
const elsewhereAfter = await page.screenshot({ clip: awayFromTarget });

// Comparing encoded bytes avoids an image-decoding dependency:
// identical pixels from the same browser encode to an identical PNG.
expect(
targetAfter.equals(targetBefore),
'spotlight painted over its own target: the cutout did not clear a hole',
).toBe(true);
expect(
elsewhereAfter.equals(elsewhereBefore),
'spotlight did not dim anything, so the hole assertion above proves nothing',
).toBe(false);
} finally {
await browser?.close();
}
}, 30_000);
});
Loading