diff --git a/src/lib/card/card.scss b/src/lib/card/card.scss index ebe404552f9a..5a7ec82f156c 100644 --- a/src/lib/card/card.scss +++ b/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%; diff --git a/src/lib/divider/divider.spec.ts b/src/lib/divider/divider.spec.ts index 9637ea39750f..112577a0d93b 100644 --- a/src/lib/divider/divider.spec.ts +++ b/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; - beforeEach(async(() => { + beforeEach(fakeAsync(() => { TestBed.configureTestingModule({ imports: [MatDividerModule], - declarations: [ - MatDividerTestComponent - ], + declarations: [MatDividerTestComponent], }); TestBed.compileComponents(); @@ -25,8 +23,18 @@ 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', () => { @@ -34,8 +42,8 @@ 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.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', () => { diff --git a/src/lib/divider/divider.ts b/src/lib/divider/divider.ts index 97f4856a9d15..b90e0acafceb 100644 --- a/src/lib/divider/divider.ts +++ b/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' },