fix(card): don't override vertical divider styles (#11899)

Author: crisbeto

src/lib/card/card.scss

@@ -16,7 +16,7 @@ $mat-card-header-size: 40px !default;
   padding: $mat-card-default-padding;
   border-radius: $mat-card-border-radius;
 
-  .mat-divider {
+  .mat-divider-horizontal {
     position: absolute;
     left: 0;
     width: 100%;

src/lib/divider/divider.spec.ts

@@ -1,4 +1,4 @@
-import {async, ComponentFixture, TestBed} from '@angular/core/testing';
+import {fakeAsync, ComponentFixture, TestBed} from '@angular/core/testing';
 import {Component} from '@angular/core';
 import {By} from '@angular/platform-browser';
 import {MatDividerModule} from './divider-module';
@@ -8,12 +8,10 @@ describe('MatDivider', () => {
 
   let fixture: ComponentFixture<MatDividerTestComponent>;
 
-  beforeEach(async(() => {
+  beforeEach(fakeAsync(() => {
     TestBed.configureTestingModule({
       imports: [MatDividerModule],
-      declarations: [
-        MatDividerTestComponent
-      ],
+      declarations: [MatDividerTestComponent],
     });
 
     TestBed.compileComponents();
@@ -25,17 +23,27 @@ describe('MatDivider', () => {
     fixture.detectChanges();
 
     const divider = fixture.debugElement.query(By.css('mat-divider'));
-    expect(divider.nativeElement.className).toContain('mat-divider');
-    expect(divider.nativeElement.className).toContain('mat-divider-vertical');
+    expect(divider.nativeElement.classList).toContain('mat-divider');
+    expect(divider.nativeElement.classList).toContain('mat-divider-vertical');
+  });
+
+  it('should apply horizontal class to horizontal divider', () => {
+    fixture.componentInstance.vertical = false;
+    fixture.detectChanges();
+
+    const divider = fixture.debugElement.query(By.css('mat-divider'));
+    expect(divider.nativeElement.classList).toContain('mat-divider');
+    expect(divider.nativeElement.classList).not.toContain('mat-divider-vertical');
+    expect(divider.nativeElement.classList).toContain('mat-divider-horizontal');
   });
 
   it('should apply inset class to inset divider', () => {
     fixture.componentInstance.inset = true;
     fixture.detectChanges();
 
     const divider = fixture.debugElement.query(By.css('mat-divider'));
-    expect(divider.nativeElement.className).toContain('mat-divider');
-    expect(divider.nativeElement.className).toContain('mat-divider-inset');
+    expect(divider.nativeElement.classList).toContain('mat-divider');
+    expect(divider.nativeElement.classList).toContain('mat-divider-inset');
   });
 
   it('should apply inset and vertical classes to vertical inset divider', () => {
@@ -44,9 +52,9 @@ describe('MatDivider', () => {
     fixture.detectChanges();
 
     const divider = fixture.debugElement.query(By.css('mat-divider'));
-    expect(divider.nativeElement.className).toContain('mat-divider');
-    expect(divider.nativeElement.className).toContain('mat-divider-inset');
-    expect(divider.nativeElement.className).toContain('mat-divider-vertical');
+    expect(divider.nativeElement.classList).toContain('mat-divider');
+    expect(divider.nativeElement.classList).toContain('mat-divider-inset');
+    expect(divider.nativeElement.classList).toContain('mat-divider-vertical');
   });
 
   it('should add aria roles properly', () => {

src/lib/divider/divider.ts

@@ -16,6 +16,7 @@ import {coerceBooleanProperty} from '@angular/cdk/coercion';
     'role': 'separator',
     '[attr.aria-orientation]': 'vertical ? "vertical" : "horizontal"',
     '[class.mat-divider-vertical]': 'vertical',
+    '[class.mat-divider-horizontal]': '!vertical',
     '[class.mat-divider-inset]': 'inset',
     'class': 'mat-divider'
   },