fix(drag-drop): error when cloning 0x0 canvas (#19707)

We have some logic to clone the `canvas` elements inside the drag preview, but the process that transfers the content can throw if the canvas is invisible. These changes add a try/catch to prevent the entire process from breaking down.

Author: crisbeto

src/cdk/drag-drop/directives/drag.spec.ts

@@ -2151,6 +2151,19 @@ describe('CdkDrag', () => {
           'Expected cloned canvas to have the same content as the source.');
     }));
 
+    it('should not throw when cloning an invalid canvas', fakeAsync(() => {
+      const fixture = createComponent(DraggableWithInvalidCanvasInDropZone);
+      fixture.detectChanges();
+      const item = fixture.componentInstance.dragItems.toArray()[1].element.nativeElement;
+
+      expect(() => {
+        startDraggingViaMouse(fixture, item);
+        tick();
+      }).not.toThrow();
+
+      expect(document.querySelector('.cdk-drag-preview canvas')).toBeTruthy();
+    }));
+
     it('should clear the ids from descendants of the preview', fakeAsync(() => {
       const fixture = createComponent(DraggableInDropZone);
       fixture.detectChanges();
@@ -5949,6 +5962,30 @@ class DraggableWithCanvasInDropZone extends DraggableInDropZone implements After
   }
 }
 
+@Component({
+  template: `
+    <div
+      cdkDropList
+      style="width: 100px; background: pink;"
+      [id]="dropZoneId"
+      [cdkDropListData]="items"
+      (cdkDropListSorted)="sortedSpy($event)"
+      (cdkDropListDropped)="droppedSpy($event)">
+      <div
+        *ngFor="let item of items"
+        cdkDrag
+        [cdkDragData]="item"
+        [style.height.px]="item.height"
+        [style.margin-bottom.px]="item.margin"
+        style="width: 100%; background: red;">
+          {{item.value}}
+          <canvas width="0" height="0"></canvas>
+        </div>
+    </div>
+  `
+})
+class DraggableWithInvalidCanvasInDropZone extends DraggableInDropZone {}
+
 /**
  * Component that passes through whatever content is projected into it.
  * Used to test having drag elements being projected into a component.

src/cdk/drag-drop/drag-ref.ts

@@ -1292,7 +1292,11 @@ function deepCloneNode(node: HTMLElement): HTMLElement {
       const correspondingCloneContext = cloneCanvases[i].getContext('2d');
 
       if (correspondingCloneContext) {
-        correspondingCloneContext.drawImage(descendantCanvases[i], 0, 0);
+        // In some cases `drawImage` can throw (e.g. if the canvas size is 0x0).
+        // We can't do much about it so just ignore the error.
+        try {
+          correspondingCloneContext.drawImage(descendantCanvases[i], 0, 0);
+        } catch {}
       }
     }
   }