/* 图片落地之后的取景：头像按人脸放大、封面按人脸与正封框取景、过小的图原尺寸摆、加载中的微光。
*
* 测试环境没有布局也不解码图片：框的尺寸和图的像素直接写在元素上。 */
import { afterEach, describe, expect, it, vi } from 'vitest';
import {
avatarFrame, coverAnchor, fitNativeImage, installCardArt, refitNativeImages, settleImage, upgradeCover,
watchPendingImages,
} from '../../src/card-art/framing';
function sized(img: HTMLImageElement, width: number, height: number): HTMLImageElement {
Object.defineProperty(img, 'naturalWidth', { configurable: true, value: width });
Object.defineProperty(img, 'naturalHeight', { configurable: true, value: height });
Object.defineProperty(img, 'complete', { configurable: true, value: true });
return img;
}
function boxOf(el: Element, width: number, height: number): void {
el.getBoundingClientRect = () => ({ width, height, x: 0, y: 0, top: 0, left: 0, right: width, bottom: height, toJSON: () => ({}) });
}
function mount(html: string): HTMLElement {
const host = document.createElement('div');
host.innerHTML = html;
document.body.append(host);
return host;
}
afterEach(() => {
document.body.replaceChildren();
vi.useRealTimers();
});
describe('avatarFrame：圆框按人脸放大', () => {
it('图撑到 cover 缩放乘倍数那么大，负偏移把脸拉向框心，并撤掉预检的宽度上限', () => {
const host = mount('![]()
');
const img = sized(host.querySelector('img')!, 640, 960);
boxOf(img.parentElement!, 160, 160);
vi.stubGlobal('devicePixelRatio', 2);
avatarFrame(img);
vi.unstubAllGlobals();
expect(img.dataset.faceFramed).toBe('');
expect(img.style.position).toBe('absolute');
expect(img.style.width).toBe('200%');
expect(img.style.height).toBe('300%');
expect(img.style.left).toBe('-37.8%');
expect(img.style.top).toBe('-17.2%');
expect(img.style.maxWidth).toBe('none');
});
it('派生件按比例换算脸框，换成别的图就退回几何居中', () => {
const host = mount('![]()
');
const derived = sized(host.querySelector('img')!, 320, 480);
boxOf(derived.parentElement!, 160, 160);
avatarFrame(derived);
expect(derived.style.width).not.toBe('');
const other = mount('![]()
').querySelector('img')!;
sized(other, 500, 500);
boxOf(other.parentElement!, 160, 160);
avatarFrame(other);
expect(other.style.objectPosition).toBe('50% 50%');
expect(other.style.width).toBe('');
});
it('原尺寸摆放的小图不放大', () => {
const host = mount('![]()
');
const img = sized(host.querySelector('img')!, 640, 960);
boxOf(img.parentElement!, 160, 160);
avatarFrame(img);
expect(img.dataset.faceFramed).toBe('');
expect(img.style.width).toBe('');
});
it('框还没布局时先藏着，等量到尺寸再取景', () => {
const observers: { fire(): void }[] = [];
vi.stubGlobal('ResizeObserver', class {
constructor(private readonly callback: () => void) { observers.push({ fire: () => this.callback() }); }
observe() {}
disconnect() {}
});
const host = mount('![]()
');
const img = sized(host.querySelector('img')!, 640, 960);
boxOf(img.parentElement!, 0, 0);
avatarFrame(img);
expect(img.dataset.faceFramed).toBeUndefined();
boxOf(img.parentElement!, 160, 160);
observers[0]!.fire();
vi.unstubAllGlobals();
expect(img.dataset.faceFramed).toBe('');
expect(img.style.width).not.toBe('');
});
});
describe('coverAnchor：封面按自己的宽高比分流', () => {
const cover = (src: string, width: number, height: number, attrs = '') => {
const host = mount(`
').querySelector('img')!, 1200, 800);
boxOf(sharp, 600, 400);
upgradeCover(sharp);
expect(sharp.getAttribute('src')).toBe('/cover?code=B&thumb=1');
});
it('800 那一档不够清楚先换 1600 那一档，版本号留着；模糊底记第一张派生档', () => {
const host = mount('
').querySelector('img')!, 800, 538);
boxOf(fits, 333, 224);
upgradeCover(fits);
expect(fits.getAttribute('src')).toBe('/cover?code=B&thumb=2');
});
});
describe('fitNativeImage：比框还小的图原尺寸摆', () => {
it('小图按源尺寸摆并拿自己垫模糊底，够大的铺满', () => {
const host = mount('
');
const box = host.querySelector('[data-fit-native]')!;
Object.defineProperty(box, 'clientWidth', { value: 180 });
Object.defineProperty(box, 'clientHeight', { value: 180 });
const img = sized(box.querySelector('img')!, 42, 42);
fitNativeImage(img);
expect(box.dataset.nativeSmall).toBe('true');
expect(box.style.getPropertyValue('--markw')).toBe('42px');
expect(box.style.getPropertyValue('--markbg')).toContain('/logo?studio=a');
sized(img, 1378, 1378);
refitNativeImages(host);
expect(box.dataset.nativeSmall).toBe('false');
expect(box.style.getPropertyValue('--markw')).toBe('100%');
expect(box.style.getPropertyValue('--markbg')).toBe('none');
});
it('超扁的标识短边撑到下限、不补模糊底；人像框不走这一条', () => {
const host = mount('
'
+ '
');
const [mark, portrait] = [...host.querySelectorAll('[data-fit-native]')];
for (const box of [mark!, portrait!]) {
Object.defineProperty(box, 'clientWidth', { value: 180 });
Object.defineProperty(box, 'clientHeight', { value: 180 });
}
fitNativeImage(sized(mark!.querySelector('img')!, 1378, 42));
expect(mark!.dataset.nativeClamp).toBe('true');
expect(mark!.style.getPropertyValue('--markw')).toBe('180px');
expect(mark!.style.getPropertyValue('--markh')).toBe('18px');
expect(mark!.style.getPropertyValue('--markbg')).toBe('none');
fitNativeImage(sized(portrait!.querySelector('img')!, 1378, 42));
expect(portrait!.dataset.nativeClamp).toBe('false');
});
});
describe('加载微光', () => {
it('插进页面时还没到手的图在框上标 imgwait，等得不久就直接摘', () => {
const host = mount('
');
const img = host.querySelector('img')!;
Object.defineProperty(img, 'complete', { configurable: true, value: false });
watchPendingImages(host);
expect(img.parentElement!.classList.contains('imgwait')).toBe(true);
settleImage(img);
expect(img.parentElement!.classList.contains('imgwait')).toBe(false);
expect(img.parentElement!.classList.contains('ui-imgdone')).toBe(false);
});
it('等过门槛的淡出完再摘；动效不来时一秒兜底', () => {
vi.useFakeTimers();
const host = mount('');
const img = host.querySelector('img')!;
Object.defineProperty(img, 'complete', { configurable: true, value: false });
watchPendingImages(host);
vi.advanceTimersByTime(500);
settleImage(img);
expect(img.parentElement!.classList.contains('ui-imgdone')).toBe(true);
vi.advanceTimersByTime(1000);
expect(img.parentElement!.classList.contains('ui-imgdone')).toBe(false);
});
});
describe('installCardArt：全站一组捕获监听', () => {
it('头像加载完按脸框取景；封面加载完取景；取不到图收掉微光', () => {
installCardArt();
installCardArt();
const host = mount('![]()
');
const face = sized(host.querySelector('.ring img')!, 640, 960);
boxOf(face.parentElement!, 160, 160);
face.dispatchEvent(new Event('load'));
expect(face.dataset.faceFramed).toBe('');
expect(face.style.width).not.toBe('');
const cover = sized(host.querySelector('img.cover')!, 1600, 900);
cover.dispatchEvent(new Event('load'));
expect(cover.dataset.frame).toBe('still');
const gone = host.querySelector('img[src="/gone"]')!;
gone.dispatchEvent(new Event('error'));
expect(gone.parentElement!.classList.contains('imgwait')).toBe(false);
});
});