From d8cd6a788bea68350d8ce768646a11619db0a813 Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@users.noreply.github.com>
Date: Tue, 27 Nov 2018 16:40:09 +0100
Subject: [PATCH] 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.
---
 .../scrolling/virtual-scroll-viewport.spec.ts | 22 +++++++++++++++++++
 src/cdk/scrolling/virtual-scroll-viewport.ts  |  2 +-
 2 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/src/cdk/scrolling/virtual-scroll-viewport.spec.ts b/src/cdk/scrolling/virtual-scroll-viewport.spec.ts
index cf5c102136a..d160d826f53 100644
--- a/src/cdk/scrolling/virtual-scroll-viewport.spec.ts
+++ b/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});
diff --git a/src/cdk/scrolling/virtual-scroll-viewport.ts b/src/cdk/scrolling/virtual-scroll-viewport.ts
index 5bf5642e553..14a04e31ea6 100644
--- a/src/cdk/scrolling/virtual-scroll-viewport.ts
+++ b/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,