diff --git a/components/watermark/__tests__/index.test.tsx b/components/watermark/__tests__/index.test.tsx
index 8de5a7aaf21b..ef7182cdf3d0 100644
--- a/components/watermark/__tests__/index.test.tsx
+++ b/components/watermark/__tests__/index.test.tsx
@@ -16,10 +16,18 @@ describe('Watermark', () => {
});
});
+ beforeEach(() => {
+ jest.useFakeTimers();
+ });
+
afterAll(() => {
mockSrcSet.mockRestore();
});
+ afterEach(() => {
+ jest.useRealTimers();
+ });
+
it('The watermark should render successfully', () => {
const { container } = render();
expect(container.querySelector('.watermark div')).toBeTruthy();
@@ -94,4 +102,15 @@ describe('Watermark', () => {
await waitFor(() => expect(target).toBeTruthy());
expect(container).toMatchSnapshot();
});
+
+ it('should not crash if content is empty string', async () => {
+ const spy = jest.spyOn(CanvasRenderingContext2D.prototype, 'drawImage');
+ render();
+ await waitFakeTimer();
+ expect(spy).not.toHaveBeenCalledWith(expect.anything(), 0, 0);
+ expect(spy).not.toHaveBeenCalledWith(expect.anything(), -0, 0);
+ expect(spy).not.toHaveBeenCalledWith(expect.anything(), -0, -0);
+ expect(spy).not.toHaveBeenCalledWith(expect.anything(), 0, -0);
+ spy.mockRestore();
+ });
});
diff --git a/components/watermark/useClips.ts b/components/watermark/useClips.ts
index 2392e67d6a88..c8c8843ab440 100644
--- a/components/watermark/useClips.ts
+++ b/components/watermark/useClips.ts
@@ -69,7 +69,9 @@ export default function useClips() {
// Copy from `ctx` and rotate
rCtx.translate(realMaxSize / 2, realMaxSize / 2);
rCtx.rotate(angle);
- rCtx.drawImage(canvas, -contentWidth / 2, -contentHeight / 2);
+ if (contentWidth > 0 && contentHeight > 0) {
+ rCtx.drawImage(canvas, -contentWidth / 2, -contentHeight / 2);
+ }
// Get boundary of rotated text
function getRotatePos(x: number, y: number) {