Skip to content

Commit 57f20bf

Browse files
devversionandrewseguin
authored andcommitted
test: fix datepicker position tests failing in firefox v78
The datepicker position tests seem to be thrown off in Firefox v78 where inputs have an uneven width (resulting in subpixel rendering that is not predictable and stable enough for our test assertions)
1 parent 6e30368 commit 57f20bf

File tree

3 files changed

+19
-3
lines changed

3 files changed

+19
-3
lines changed

src/cdk-experimental/popover-edit/popover-edit.spec.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -684,7 +684,7 @@ cdkPopoverEditTabOut`, fakeAsync(() => {
684684

685685
describe('edit lens', () => {
686686
function expectPixelsToEqual(actual: number, expected: number) {
687-
expect(Math.round(actual)).toBe(Math.round(expected));
687+
expect(Math.floor(actual)).toBe(Math.floor(expected));
688688
}
689689

690690
it('shows a lens with the value from the table', fakeAsync(() => {

src/material-experimental/popover-edit/popover-edit.spec.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import {DataSource} from '@angular/cdk/collections';
1+
import {DataSource} from '@angular/cdk/collections';
22
import {LEFT_ARROW, UP_ARROW, RIGHT_ARROW, DOWN_ARROW, TAB} from '@angular/cdk/keycodes';
33
import {MatTableModule} from '@angular/material/table';
44
import {dispatchKeyboardEvent} from '@angular/cdk/testing/private';
@@ -565,7 +565,7 @@ matPopoverEditTabOut`, fakeAsync(() => {
565565

566566
describe('edit lens', () => {
567567
function expectPixelsToEqual(actual: number, expected: number) {
568-
expect(Math.round(actual)).toBe(Math.round(expected));
568+
expect(Math.floor(actual)).toBe(Math.floor(expected));
569569
}
570570

571571
it('shows a lens with the value from the table', fakeAsync(() => {

src/material/datepicker/datepicker.spec.ts

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1929,6 +1929,21 @@ describe('MatDatepicker', () => {
19291929

19301930
});
19311931

1932+
/**
1933+
* Styles that set input elements to a fixed width. This helps with client rect measurements
1934+
* (i.e. that the datepicker aligns properly). Inputs have different dimensions in different
1935+
* browsers. e.g. in Firefox the input width is uneven, causing unexpected deviations in measuring.
1936+
* Note: The input should be able to shrink as on iOS the viewport width is very little but the
1937+
* datepicker inputs should not leave the viewport (as that throws off measuring too).
1938+
*/
1939+
const inputFixedWidthStyles = `
1940+
input {
1941+
width: 100%;
1942+
max-width: 150px;
1943+
border: none;
1944+
box-sizing: border-box;
1945+
}
1946+
`;
19321947

19331948
@Component({
19341949
template: `
@@ -1941,6 +1956,7 @@ describe('MatDatepicker', () => {
19411956
[xPosition]="xPosition"
19421957
[yPosition]="yPosition"></mat-datepicker>
19431958
`,
1959+
styles: [inputFixedWidthStyles]
19441960
})
19451961
class StandardDatepicker {
19461962
opened = false;

0 commit comments

Comments
 (0)