mirror of
https://github.com/angular/angular.git
synced 2026-09-14 13:54:52 +08:00
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.
This commit is contained in:
committed by
Jeremy Elbourn
parent
18ef94f342
commit
d8cd6a788b
@@ -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});
|
||||
|
||||
@@ -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,
|
||||
|
||||
Reference in New Issue
Block a user