diff --git a/src/lib/grid-list/grid-list.spec.ts b/src/lib/grid-list/grid-list.spec.ts index 17f956dfc79b..8f5d4b6886c9 100644 --- a/src/lib/grid-list/grid-list.spec.ts +++ b/src/lib/grid-list/grid-list.spec.ts @@ -3,6 +3,7 @@ import {Component, DebugElement} from '@angular/core'; import {By} from '@angular/platform-browser'; import {MatGridList, MatGridListModule} from './index'; import {MatGridTile, MatGridTileText} from './grid-tile'; +import {Directionality} from '@angular/cdk/bidi'; describe('MatGridList', () => { @@ -29,6 +30,8 @@ describe('MatGridList', () => { GridListWithFootersWithoutLines, GridListWithFooterContainingTwoLines, GridListWithoutMatchingGap, + GridListWithEmptyDirectionality, + GridListWithRtl, ], }); @@ -297,6 +300,23 @@ describe('MatGridList', () => { .toBe(true, 'Expected none of the tiles to have a negative `left`'); }); + it('should default to LTR if empty directionality is given', () => { + const fixture = TestBed.createComponent(GridListWithEmptyDirectionality); + const tile: HTMLElement = fixture.debugElement.query(By.css('mat-grid-tile')).nativeElement; + fixture.detectChanges(); + + expect(tile.style.left).toBe('0px'); + expect(tile.style.right).toBe(''); + }); + + it('should set `right` styles for RTL', () => { + const fixture = TestBed.createComponent(GridListWithRtl); + const tile: HTMLElement = fixture.debugElement.query(By.css('mat-grid-tile')).nativeElement; + fixture.detectChanges(); + + expect(tile.style.left).toBe(''); + expect(tile.style.right).toBe('0px'); + }); }); @@ -317,7 +337,6 @@ function getComputedLeft(element: DebugElement): number { } - @Component({template: ''}) class GridListWithoutCols { } @@ -478,3 +497,15 @@ class GridListWithFooterContainingTwoLines { } `}) class GridListWithoutMatchingGap { } + +@Component({ + template: `Hello`, + providers: [{provide: Directionality, useValue: {}}] +}) +class GridListWithEmptyDirectionality { } + +@Component({ + template: `Hello`, + providers: [{provide: Directionality, useValue: {value: 'rtl'}}] +}) +class GridListWithRtl { } diff --git a/src/lib/grid-list/tile-styler.ts b/src/lib/grid-list/tile-styler.ts index 6ce66c7acbf1..57969a1bac87 100644 --- a/src/lib/grid-list/tile-styler.ts +++ b/src/lib/grid-list/tile-styler.ts @@ -106,7 +106,7 @@ export abstract class TileStyler { // The width and horizontal position of each tile is always calculated the same way, but the // height and vertical position depends on the rowMode. - let side = this._direction === 'ltr' ? 'left' : 'right'; + let side = this._direction === 'rtl' ? 'right' : 'left'; tile._setStyle(side, this.getTilePosition(baseTileWidth, colIndex)); tile._setStyle('width', calc(this.getTileSize(baseTileWidth, tile.colspan))); }