fix(scrolling): default to vertical CSS class for invalid orientation (…

…#14145)

Since there are some structural styles that depend on the `cdk-virtual-scroll-orientation-*` classes, it's important that at least one of them is on the element at any time. Currently the user can end up with none if they did something like `orientation="horizontal-with-a-typo"`. These changes default to vertical, unless the value is `horizontal` which mirrors all the internal logic.

src/cdk/scrolling/virtual-scroll-viewport.spec.ts

@@ -133,6 +133,28 @@ describe('CdkVirtualScrollViewport', () => {
       expect(viewport.elementRef.nativeElement.scrollWidth).toBe(10000);
     }));
 
+    it('should set a class based on the orientation', fakeAsync(() => {
+      finishInit(fixture);
+      const viewportElement: HTMLElement =
+          fixture.nativeElement.querySelector('.cdk-virtual-scroll-viewport');
+
+      expect(viewportElement.classList).toContain('cdk-virtual-scroll-orientation-vertical');
+
+      testComponent.orientation = 'horizontal';
+      fixture.detectChanges();
+
+      expect(viewportElement.classList).toContain('cdk-virtual-scroll-orientation-horizontal');
+    }));
+
+    it('should set the vertical class if an invalid orientation is set', fakeAsync(() => {
+      testComponent.orientation = 'diagonal';
+      finishInit(fixture);
+      const viewportElement: HTMLElement =
+          fixture.nativeElement.querySelector('.cdk-virtual-scroll-viewport');
+
+      expect(viewportElement.classList).toContain('cdk-virtual-scroll-orientation-vertical');
+    }));
+
     it('should set rendered range', fakeAsync(() => {
       finishInit(fixture);
       viewport.setRenderedRange({start: 2, end: 3});

src/cdk/scrolling/virtual-scroll-viewport.ts

@@ -46,7 +46,7 @@ function rangesEqual(r1: ListRange, r2: ListRange): boolean {
   host: {
     'class': 'cdk-virtual-scroll-viewport',
     '[class.cdk-virtual-scroll-orientation-horizontal]': 'orientation === "horizontal"',
-    '[class.cdk-virtual-scroll-orientation-vertical]': 'orientation === "vertical"',
+    '[class.cdk-virtual-scroll-orientation-vertical]': 'orientation !== "horizontal"',
   },
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,