Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
4 changes: 2 additions & 2 deletions packages/core/src/runtime/captureMotionBlur/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -182,8 +182,8 @@ function createInstance(host: CaptureMotionBlurHost, config: Config, form: HtmlI
`[${HIDE_ATTR}] { opacity: 0 !important; }`,
// The root stays visible: a rotated or scaled mover under a hidden root is captured at the origin, untransformed.
`[${ONLY_ATTR}] { background: none !important; border-color: transparent !important; box-shadow: none !important; outline-color: transparent !important; }`,
`[${ONLY_ATTR}]::before, [${ONLY_ATTR}]::after, [${ONLY_ATTR}] * { visibility: hidden !important; }`,
`[${ONLY_ATTR}] [${MOVER_ATTR}], [${ONLY_ATTR}] [${MOVER_ATTR}] * { visibility: visible !important; }`,
`[${ONLY_ATTR}]::before, [${ONLY_ATTR}]::after, [${ONLY_ATTR}] *:not([${MOVER_ATTR}], [${MOVER_ATTR}] *) { visibility: hidden !important; }`,
`[${ONLY_ATTR}] [${MOVER_ATTR}] { visibility: visible !important; }`,
].join("\n");

let movers: HTMLElement[] = [];
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -268,6 +268,21 @@ describe.skipIf(!hasBrowser)("capture motion blur pixels in Chrome", () => {
},
);

it("keeps a visibility:hidden child of a mover out of the trail", async (ctx) => {
if (!supported) ctx.skip();
const body = `<div class="box" style="left:20px;top:80px"><div style="position:absolute;left:10px;top:10px;width:20px;height:20px;background:#0f0;visibility:hidden"></div></div>`;
const blurred = await frameOf(body, true, FRAME, "capture");
expect(blurred.report).toMatchObject({ state: "on", tier: "capture", movers: 1 });
let green = 0;
for (let y = 0; y < H; y++) {
for (let x = 0; x < W; x++) {
const [r = 0, g = 0, b = 0] = px(blurred.frame, x, y);
if (g - r > 30 && g - b > 30) green++;
}
}
expect(green).toBe(0);
});

it("blurs with filters where capture cannot run, over a page that has a WebGL canvas", async (ctx) => {
if (!supported) ctx.skip();
const gl = `<canvas id="gl" width="64" height="36" style="position:absolute;left:0;top:0;width:${W}px;height:${H}px"></canvas><script>document.getElementById("gl").getContext("webgl")</script>`;
Expand Down
Loading