fix(cdk/drag-drop): fix for recommended changes to code and tests cases

Author: laiseng

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

@@ -409,45 +409,12 @@ describe('CdkDrag', () => {
 
     describe('mouse dragging when initial transform is none', () => {
       it('should drag an element freely to a particular position', fakeAsync(() => {
-        const fixture = createComponent(StandaloneDraggableWithInitialTransformNone);
-        fixture.detectChanges();
-        const dragElement = fixture.componentInstance.dragElement.nativeElement;
-
-        expect(dragElement.style.transform).toBe('none');
-        dragElementViaMouse(fixture, dragElement, 50, 100);
-        expect(dragElement.style.transform).toBe('translate3d(50px, 100px, 0px)');
-      }));
-
-      it('should drag an SVG element freely to a particular position', fakeAsync(() => {
-        const fixture = createComponent(StandaloneDraggableSvgWithInitialTransformNone);
+        const fixture = createComponent(StandaloneDraggable);
         fixture.detectChanges();
         const dragElement = fixture.componentInstance.dragElement.nativeElement;
+        dragElement.style.transform = 'none';
 
-        expect(dragElement.style.transform).toBe('none');
         dragElementViaMouse(fixture, dragElement, 50, 100);
-        expect(dragElement.getAttribute('transform')).toBe('translate(50 100)');
-      }));
-
-      it('should drag an SVG element freely to a particular position in SVG viewBox coordinates',
-        fakeAsync(() => {
-          const fixture = createComponent(StandaloneDraggableSvgWithViewBoxInitialTranformNone);
-          fixture.detectChanges();
-          const dragElement = fixture.componentInstance.dragElement.nativeElement;
-
-          expect(dragElement.style.transform).toBe('none');
-          dragElementViaMouse(fixture, dragElement, 50, 100);
-          expect(dragElement.getAttribute('transform')).toBe('translate(100 200)');
-        }));
-    });
-
-    describe('touch dragging when initial transform is none', () => {
-      it('should drag an element freely to a particular position', fakeAsync(() => {
-        const fixture = createComponent(StandaloneDraggableWithInitialTransformNone);
-        fixture.detectChanges();
-        const dragElement = fixture.componentInstance.dragElement.nativeElement;
-
-        expect(dragElement.style.transform).toBe('none');
-        dragElementViaTouch(fixture, dragElement, 50, 100);
         expect(dragElement.style.transform).toBe('translate3d(50px, 100px, 0px)');
       }));
     });
@@ -5981,21 +5948,6 @@ class StandaloneDraggable {
   freeDragPosition?: {x: number, y: number};
 }
 
-@Component({
-  template: `
-    <div class="wrapper" style="width: 200px; height: 200px; background: green;">
-      <div
-        cdkDrag
-        #dragElement
-        style="transform: none; width: 100px; height: 100px; background: red;"></div>
-    </div>
-  `
-})
-class StandaloneDraggableWithInitialTransformNone {
-  @ViewChild('dragElement') dragElement: ElementRef<HTMLElement>;
-  @ViewChild(CdkDrag) dragInstance: CdkDrag;
-}
-
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
@@ -6020,34 +5972,6 @@ class StandaloneDraggableSvg {
   @ViewChild('dragElement') dragElement: ElementRef<SVGElement>;
 }
 
-@Component({
-  template: `
-    <svg><g
-      cdkDrag
-      style="transform: none"
-      #dragElement>
-      <circle fill="red" r="50" cx="50" cy="50"/>
-    </g></svg>
-  `
-})
-class StandaloneDraggableSvgWithInitialTransformNone {
-  @ViewChild('dragElement') dragElement: ElementRef<SVGElement>;
-}
-
-@Component({
-  template: `
-    <svg width="400px" height="400px" viewBox="0 0 800 800"><g
-      cdkDrag
-      style="transform: none"
-      #dragElement>
-      <circle fill="red" r="50" cx="50" cy="50"/>
-    </g></svg>
-  `
-})
-class StandaloneDraggableSvgWithViewBoxInitialTranformNone {
-  @ViewChild('dragElement') dragElement: ElementRef<SVGElement>;
-}
-
 @Component({
   template: `
     <svg width="400px" height="400px" viewBox="0 0 800 800"><g

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

@@ -1277,8 +1277,12 @@ export class DragRef<T = any> {
 
     // Cache the previous transform amount only after the first drag sequence, because
     // we don't want our own transforms to stack on top of each other.
+    // Should be excluded none because none + translate3d(x, y, x) is invalid css
     if (this._initialTransform == null) {
-      this._initialTransform = this._rootElement.style.transform || '';
+      this._initialTransform = this._rootElement.style.transform
+                               && this._rootElement.style.transform != 'none'
+                               ? this._rootElement.style.transform
+                               : '';
     }
 
     // Preserve the previous `transform` value, if there was one. Note that we apply our own